Constructing Content
single property can carry values for most font styles in a space-separated list, and those values must occur
in a specific sequence to be recognized: font-style, font-variant, font-weight, font-size/line-
height, and font-family. Note that a slash (/), not a space, separates the values for font-size and
line-height, binding the two values together.
Any values not declared with font will be inherited from an ancestral element, or else the browser will fall
back to its default value for that property. However, the font property always requires values for font-
size and font-family at a minimum; the declaration will be ignored without both of those values present.
Listing 4-50 shows the updated body rule, now with a single shorthand font declaration.
Listing 4-50. The shorthand font property
body {
font: 14px/1.5 "Trebuchet MS", Helvetica, Arial, sans-serif;
}
As another example, this rule sets all h5 elements as Trebuchet italic bold small caps, at 100% font-size
(inherited from the parent element) with an inherited line height (because we’ve omitted a value for that
property):
h5 {
font: small-caps italic bold 100% "Trebuchet MS", sans-serif;
}
Heading Hierarchy
Earlier in the chapter you learned about sectioning roots and document outlines; an element that
establishes a new sectioning root “resets” the heading hierarchy within that element, and the overall
document outline can be generated from the nested sections. Visually, headings of descending rank
usually become progressively smaller as an indicator of that diminished rank. Some browsers do the same
for headings of the same level when they appear in nested sectioning elements, even when those
headings are of the same rank. Take the markup in Listing 4-51, for example (it’s the same example you
saw way back in Listing 4-8).
Listing 4-51. Headings in nested sections
<h1>Costume Accessories</h1>
<p>All the trappings and trimmings.</p>
<section>
<h1>Masks and Cowls</h1>
<p>Protect your secret identity.</p>
<section>
<h1>Masks</h1>
<p>Facial coverage.</p>
</section>
<section>
<h1>Cowls</h1>
