Headings and paragraphs (h1)

Remember that for accessibility and semantics you need to keep the headings hierarchical. The main page heading is h1 so the next one should be h2. The next subheading after that should be h3 (and not a jump to h4).

Heading two (h2)

This a is a paragraph.

Heading three (h3)

This a is a paragraph.

Heading four (h4)

This a is a paragraph.

An h2 with a smaller space above

Showing how you can use the generic classes to alter spacing between elements. In this case the notm ("no top margin") class is applied to the heading. This means the top space is provided by the preceding paragraph (1em rather than the heading's 1.5em).

An h2 with an even smaller space above

This time the negtm ("negative top margin") class is applied to the heading above. This gives the heading a margin of -0.5em. The paragraph bottom margin is 1em, so that leaves 0.5em space between the elements.

An h2 with no space above

We have used the nobm ("no bottom margin") class on the paragraph before the heading and notm on the heading. You can use these classes on any element, of course. Just remember that the selectors are generic so in some cases may be overriden by more specific selectors e.g. nav.nobm will override .nobm.

An h2 with no space below

We have used the nobm ("no bottom margin") class on the heading so there is no space between the heading and this paragraph. Only h2s have a bottom margin (h3s and h4s have no bottom margin).

A small h2

Sometimes the h2 is a bit big so you can apply class="small" to reduce its size.

This is a generic div. By default this has no margin.

We've used a class of tm ("top margin") on this paragraph to give it some space above. Paragraphs only have bottom margins by default in the stylesheet.