The term cascading refers to the way a browser ultimately displays styles for specific elements on a web page. Three different sources are responsible for the styles you see on a web page: the style sheet created by the author of the page, the user’s customized style selections (if any), and the default styles of the browser itself. The previous topics describe creating styles for a web page as the author of both the web page and the style sheet attached to that page. But browsers also have their own default style sheets that dictate the rendering of web pages, and in addition to that, users can customize their browsers by making selections that adjust the display of web pages. The final appearance of a web page is the result of the rules of all three of these sources coming together (or “cascading”) to render the web page in an optimal way.

A common tag—the paragraph tag, or <p> tag—illustrates the concept. By default, browsers come with style sheets that define the font and font size for paragraph text (that is, text that falls between <p> tags in the HTML code). In Internet Explorer, for example, all body text, including paragraph text, displays in Times New Roman, Medium font by default.

As the author of a web page, however, you can create a style sheet that overrides the browser’s default style for paragraph font and font size. For example, you can create the following rule in your style sheet:

p {
font-family: Arial;
font-size: small;
}

When a user loads the page, the paragraph font and font size settings set by you as the author override the default paragraph text settings of the browser.

Users can make selections to customize the browser display in an optimal way for their own use. In Internet Explorer, for example, the user can select View > Text Size > Largest to expand the page font to a more readable size if they think the font is too small. Ultimately (at least in this case), the user’s selection overrides both the default browser styles for paragraph font size and the paragraph styles created by the author of the web page.

Inheritance is another important part of the cascade. Properties for most elements on a web page are inherited—for example, paragraph tags inherit certain properties from body tags, bullet list tags inherit certain properties from paragraph tags, and so on. Thus, if you create the following rule in your style sheet:

body {
font-family: Arial;
font-style: italic;
}

All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and italic because the paragraph tag inherits these properties from the body tag. You can, however, become more specific with your rules, and create styles that override the standard formula for inheritence. For example, if you create the following rules in your style sheet:

body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}

All body text will be Arial and italic except paragraph (and its inherited) text, which will display as Courier normal (non-italic). Technically, the paragraph tag first inherits the properties that are set for the body tag, but then ignores those properties because it has properties of its own defined. In other words, while page elements generally inherit properties from above, the direct application of a property to a tag always causes an override of the standard formula for inheritance.

The combination of all of the factors discussed above, plus other factors like CSS specificity (a system that gives different weight to particular kinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade where items with higher priorities override properties that have lower priorities. For more information on the rules governing the cascade, inheritance, and specificity, visit www.w3.org/TR/CSS2/cascade.html.