As you create increasingly complex style sheets, you’ll sometimes
wonder why a particular element on a page looks the way it does. CSS’s
inheritance feature, as discussed in Chapter 4, creates the possibility
that any tag on a page is potentially affected by any of the tags that
wrap around it. For example, the
<body> tag can pass properties on to a
paragraph, and a paragraph may pass its own formatting instructions on
to a link within the paragraph. In other words, that link can inherit
CSS properties from both the
<body> and the
<p> tag—essentially creating a kind of
Frankenstyle that combines parts of two different CSS styles.
Then there are times when styles collide—the same CSS property is
defined in multiple styles, all applying to a particular element on the
page (for example, a
style in an external style sheet and another
<p> tag style in an internal style
sheet). When that happens, you can see some pretty weird stuff, like
text that appears bright blue, even though you specifically applied a
class style with the text color set to red. Fortunately, there’s
actually a system at work: a basic CSS mechanism known as the
cascade, which governs how styles interact and
which styles get precedence when there’s a conflict.
This chapter deals with issues that arise when you build complex style sheets that rely on inheritance and more sophisticated types of selectors like descendent selectors (Creating a Descendent Selector ...