HTML and CSS Reference
In-Depth Information
Important declarations and their handling are discussed in more detail
in “The Cascade” later in this chapter.
Inheritance
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.
