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.
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.