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
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>
Search WWH ::

Custom Search