HTML and CSS Reference
In-Depth Information
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>
