HTML and CSS Reference
In-Depth Information
Figure 2-4. A simple tree diagram
There is an exception to the upward propagation rule in HTML: back-
ground 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. This only happens if the
body
element has a defined background
and the
html
element does not.
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 couple of things in mind.
First, note that many properties are not inherited—generally as a result of simple com-
mon sense. For example, the property
border
(which is used to set borders on elements)
does not inherit. A quick glance at
Figure 2-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 2-5. Why borders aren't inherited
As it happens, most of the box-model properties—including margins, padding, back-
grounds, 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!
Second, 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 2-6
:
* {color: gray;}
h1#page-title {color: black;}
<h1 id="page-title">Meerkat <em>Central</em></h1>
