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;}

Meerkat Central

    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 that element 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 to any content of those list items. Thanks
     to inheritance, that's exactly what happens, as Figure 3-3 demonstrates.
    Figure 3-3. Inheritance of styles
    It's easier to see how inheritance works by turning to a tree diagram of a document. Figure 3-4 shows the tree diagram for a
     very simple document containing two lists: one unordered and the other ordered.
    Figure 3-4. A simple tree diagram
    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.
    Tip
    There is an exception to the upward propagation rule in HTML: background styles
     applied to the
body
element can be passed to the
html
element, which is the document's root
     element and therefore defines its canvas.
    Inheritance is one of those things about CSS that is so basic that you almost never
     think about it unless you have to. However, you should still keep a few things in mind.
    First, note that some properties are not inherited—generally as a result of simple
     common sense. For example, the property
border
(which
     is used to set borders on elements) does not inherit. A quick glance at Figure 3-5 reveals why this is the case. If
     borders were inherited, documents would become much more cluttered—unless the author
     took the extra effort to turn off the inherited borders.
    Figure 3-5. Why borders aren't inherited
    As it happens, most of the box-model properties—including margins, padding,
     backgrounds, and borders—are not inherited for the same reason. After all, you wouldn't
     want all of the links in a paragraph to inherit a 30-pixel left margin from their parent
     element!
    Inherited values have no specificity at all, not even zero specificity. This seems
     like an academic distinction until you work through the consequences of the lack of
     inherited specificity. Consider the following rules and markup fragment and compare them
     to the result shown in Figure 3-6 :
* {color: gray;}
h1#page-title {color: black;}

Meerkat Central

Welcome to the best place on the web for meerkat information!

    Figure 3-6. Zero specificity defeats no specificity
    Inherit the Bugs
    Due to problems in various browser implementations, an author cannot rely on
     inheritance to operate as expected in all circumstances. For example, Navigator 4
     (and, to a lesser extent, Explorer 4 and 5) does not inherit styles into tables.
     Thus, the following rule would result in a document with smaller text everywhere
     outside of tables:
body {font-size: 0.8em;}
    This is not correct behavior under CSS, but it does exist, so authors have
     historically resorted to tricks such as:
body, table, th, td {font-size: 0.8em;}
    This is more likely, although still not guaranteed, to achieve the desired effect
     in buggy browsers.
    Unfortunately, the above "fix" leads to an even worse problem in browsers that do
     implement inheritance correctly, such as