HTML and CSS Reference
In-Depth Information
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.
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 con-
tains a full list of length units.
Length Units in CSS
Relative; height of the element's font
Relative; height of x character in the element's font
Search WWH ::

Custom Search