Styling Heading Elements
Headings present different margin behavior than most block elements, which makes their composition one of the more annoying tasks stylists face.
Heading Sizes and Type Treatments
Almost every high-value design is going to specify heading sizes that differ from the user agent defaults, in no small part becauseâletâs face itâthe user agent styles for headings make them universally big and ugly.
The first step to attractive headings involves a type
treatment. This will specify the size, leading (line-height
), font,
color, and box behavior of all the type used on the site.
In the case of headings, at minimum the type treatment will specify a different graduation of sizes that will be based on the number of scope levels in the content and the intent of the siteâs designers.
Type treatments are explored at length in Chapter 12.
Normalizing Heading Dimensions
The very first thing stylists should do before working with headings is to
reset their user agent default styles, making sure
to set all box and font-size
values. For
box values, I recommend something like:
h2 { margin: 0 0 1.5em 0; padding: 0; border: 0; ... }
However, that work wonât resolve potential composition issues by
itself. line-height
will likely also need to be taken into account, and still more important will be the position of headings within the pageâs overall structure. If each heading is mated to a section container with custom box values of its own, the work that goes into heading resets ...
Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.