Text Styling

The various types of text styling are shown on this page.

Headers

H1 Tag

This tag should appear once and be the title of the page.

H2 Tag

This tag usually only appears once, but is a sub heading to the page title.

H3 Tag

This tag can appear many times on a page and is a section heading.

H4 Tag

This tag can appear many times on a page, but should always be tied to an h3 tag, and is a section subheading.

H5 Tag

This tag can appear many times and is used to strongely label a block element.

H6 Tag

This tag can appear many times and is used to subtly label a block element.

Code

For inline chunks of code wrap the text with <code></code> tag.

For block level one-liner code segments, it is okay to apply the code and padding-1em styles:

<code class="code padding-1em"></code>

For sections of code, use the syntax highlighter module (loaded on every page):

        <pre class="brush:js">
            ENTER CODE HERE
        </pre>
    

Quotes

Wrapping quotes should use the <q></q> tag, for example quoted text. And is used to call-out things like variable in a paragraph. Use a <blockquote><p></p></blockquote>, when a paragraph of text needs to be quoted:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur scelerisque adipiscing. Pellentesque metus orci, rhoncus id faucibus non, volutpat in mi. Praesent vitae volutpat dui. Ut in tortor diam. Proin mi metus, iaculis vel faucibus non, posuere vel nisl. Suspendisse potenti. Maecenas felis erat, accumsan ut congue et, iaculis at risus. Praesent venenatis, elit id faucibus tincidunt, massa sapien lobortis mi, vitae vestibulum quam justo at augue. Fusce a leo vel risus facilisis sollicitudin a ut nulla. Integer fermentum porta tortor, vehicula bibendum sem auctor sit amet. Sed eget fringilla lacus. Aenean ultrices dapibus dui sed sodales.

For a stronger blockquote, use <blockquote class="strong"><p></p></blockquote>:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur scelerisque adipiscing. Pellentesque metus orci, rhoncus id faucibus non, volutpat in mi. Praesent vitae volutpat dui. Ut in tortor diam. Proin mi metus, iaculis vel faucibus non, posuere vel nisl. Suspendisse potenti. Maecenas felis erat, accumsan ut congue et, iaculis at risus. Praesent venenatis, elit id faucibus tincidunt, massa sapien lobortis mi, vitae vestibulum quam justo at augue. Fusce a leo vel risus facilisis sollicitudin a ut nulla. Integer fermentum porta tortor, vehicula bibendum sem auctor sit amet. Sed eget fringilla lacus. Aenean ultrices dapibus dui sed sodales.

Paragraphs

This is the default paragraph, it inherits behavior from the normalized stylesheet, except for the 1em top and bottom margin.

If you apply the strong class, then the text is bolder.

If you apply the small class, then the text and margin is smaller.

If you apply the em class, then the text is italicized.