HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 8.1
How cascading
styles work.
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.
There are a number of other selectors that enable you to apply styles very specifically
without requiring you to add your own classes or IDs to elements. Lesson 13, “Advanced
CSS Techniques,” discusses those.
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 con-
tains a full list of length units.
TABLE 8.1
Length Units in CSS
Unit
Measurement
Relative; height of the element's font
em
Relative; height of x character in the element's font
ex
