Likewise, in a conflict between styles defined in an embedded style and an
“inline” style (a style defined within an HTML element itself such as <p style=
”font-style: italic;”>), the inline style is closer. In fact, inline styles are
right there inside the element itself, so the inline style is the winner.
Grasping tree structure ....................................................................
Inheritancerelates to the tree structure that underlies all Web pages. Imagine a
simple document with only two paragraphs. Its tree structure would illustrate
how the paragraphs were subordinate (were “child” elements) to the body (the
“parent” element of both paragraphs). Put another way, the paragraph tags are
inside the <body> </body>tags, so the <p>elements are the children of the
parent <body>. The tree diagram of this document looks like Figure 14-1:
Parents versus ancestors .................................................................
You’ll hear the terms parent-childand ancestor-descendant. Not all ancestors
are parents, although all parents are ancestors. Get it? Probably not. I didn’t
get it at first. Few people do.
These relationships don’t mean exactly the same thing. A parent-child
relationship is the closest possible: The parent is precisely one level (in the
tree structure) above its child. However, inheritance can flow further than one
level, and when it flows down pasta child (to that child’s children or beyond)
that relationship is described as an ancestor-descendant relationship.
Still unclear? Well, put down the martini or the cat or “close friend” or what-
ever it is that’s distracting you, and focus.
<body>
<p> <p>
Figure 14-1:
A simple
tree dia-
gram illus-
trates how
these two
child <p>
elements
branch off
from their
common
parent
<body>
element.
254 Part IV: Advanced CSS Techniques
