4

The Cascade and Inheritance

WHAT YOU WILL LEARN IN THIS CHAPTER:

  • The cascade and how style sheets and some selectors take precedence over others
  • Inheritance and why the values of some properties are inherited and some are not
  • The !important rule and how to force precedence

In Chapter 3, I discussed the various types of selectors that CSS supports. In this chapter, now that you have an understanding of some of the basic nuts and bolts that make up CSS, you continue along that path with the cascade and inheritance. In CSS, inheritance and the cascade are as fundamental as selectors, lengths, and properties. In fact, the importance of precedence is implied by the name of the language itself: Cascading Style Sheets.Cascading is a term used to describe precedence. Because a single element may be matched by multiple CSS declarations, the CSS specification includes a set of guidelines defining which declarations can take precedence over others and how this is decided.

THE CASCADE

Style sheets can come from more than one place. A style sheet can originate from any of the following sources:

  • From the browser (the browser's default look and feel)
  • From the user visiting the website (a user-defined style sheet)
  • From the web page itself (a style sheet created by the website's author)

Because a style sheet can originate from more than one source, it is necessary to establish an order of precedence to determine in which order style sheets apply styles for the page the user is seeing. The ...

Get Beginning CSS: Cascading Style Sheets for Web Design, Third 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.