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
<p> tag 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 ...