HTML and CSS Reference
In-Depth Information
Important declarations and their handling are discussed in more detail
in “The Cascade” later in this chapter.
As important as specificity may be to understanding how declarations are applied to a
document, another key concept is inheritance . Inheritance is the mechanism by which
styles are applied not only to a specified element, but also to its descendants. If a color
is applied to an h1 element, for example, then that color is applied to all text in the
h1 , even the text enclosed within child elements of that h1 :
h1 {color: gray;}
<h1>Meerkat <em>Central</em></h1>
Both the ordinary h1 text and the em text are colored gray because the em element inherits
the value of color . If property values could not be inherited by descendant elements,
the em text would be black, not gray, and you'd have to color the elements separately.
Inheritance also works well with unordered lists. Let's say you apply a style of color :
gray; for ul elements:
ul {color: gray;}
You expect that a style that is applied to a ul will also be applied to its list items, and
also to any content of those list items. Thanks to inheritance, that's exactly what hap-
pens, as Figure 2-3 demonstrates.
Figure 2-3. Inheritance of styles
It's easier to see how inheritance works by turning to a tree diagram of a document.
Figure 2-4 shows the tree diagram for a very simple document containing two lists: one
unordered and the other ordered.
When the declaration color : gray; is applied to the ul element, that element takes on
that declaration. The value is then propagated down the tree to the descendant elements
and continues on until there are no more descendants to inherit the value. Values are
never propagated upward; that is, an element never passes values up to its ancestors.
Search WWH ::

Custom Search