Chapter 5. Managing Multiple Styles: The Cascade
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.
Note
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 ...
Get CSS3: The Missing Manual, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
