ptg16476052166 LESSON 8: Using CSS to Style a Site
<p><span class="smaller"><span id="smallest">This text is in a
span with the ID "smallest".</span></span></p>
</div>Output ▼
When percentage units are used in style sheets, the percentage is applied to the value
that’s inherited as the styles cascade down. To start, all the text on the page is set to a
font size of 200% using the selector for the <body> tag. Then I use a variety of selectors
to make the text progressively smaller as the styles cascade down through the style sheet.
With CSS, the styles that are applied to a given element are calculated from all the selec-
tors that match that style in the style sheet.
It’s also possible to override styles. This style sheet sets the font weight for spans with
the class smaller to bold. The element with the ID smallest has its font weight set to
normal. In Figure 8.1, you’ll see that the last line is not bold. It inherits the font weight
from the span.smaller selector, but the #smallest selector overrides it.Units of Measure
One of the most confusing aspects of CSS is the units of measure it provides. Four types
of units can be specified in CSS: length units, percentage units, color units, and URLs.
There are two kinds of length units: absolute and relative. Absolute units theoretically
correspond to a unit of measure in the real world, such as an inch, a centimeter, or a
point. Relative units are based on some more arbitrary unit of measure. Table 8.1 contains
a full list of length units.FIGURE 8.1
How cascading
styles work.