HTML & CSS: The Good Parts

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 is reduced; ...