Beginning CSS: Cascading Style Sheets for Web Design, Second Edition

Chapter 4. The Cascade and Inheritance

In Chapter 3, I discussed the various types of selectors that CSS supports. In this chapter, now that you have some understanding 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 CSS declarations can appear more than once for a single element, the CSS specification includes a set of guidelines defining which declarations can take precedence over others and how this is decided. In this chapter, I discuss the following:

• 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

• Custom style sheets and how to override website styles with them

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 (default look and feel)

• From the user visiting the website (a user-defined style sheet)

• From the web page itself (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 which style sheet applies style for the page the user ...