Cascade

What does "cascading" mean?

"Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.

Even the simplest HTML document may have three or more style sheets associated with it including:

Browser style sheets

Browsers apply style sheets to all web documents. Although these style sheets vary from browser to browser, they all have common characteristics such as black text, blue links, purple visited links etc. These are referred to as a "default" browser stylesheet.

As soon as you, the author, apply a style sheet to a document, it will override the browser's style sheet. This is because author style sheets will always override browser style sheets.

User style sheets

A user is anyone who looks at your website.

Most modern browsers allow users to set their own style sheets within their browser. These style sheets will override the browsers default style sheets - for that user only.

It is important to know that users can set color and background color for HTML documents. If you, as an author, do not specify a color or background color, a user's style sheet could be used. More importantly, you should either specify both color and background color or neither. If you only specify a color and the user has specified the same color for their background, your entire document may be inaccessible to this user.

Author style sheets

The author is the person who develops the website - you!

As soon as you apply a basic style sheet or an inline style to a page, you have added what is referred to as an "author style sheet". Everything you do, from choosing fonts, colours and laying out pages in CSS is done using author style sheets.

Author style sheets can be applied inside an HTML document or by linking to an external file. You can also use multiple style sheets on an particular document to take advantage of the cascade.

Generally speaking, author styles override user styles which override browser styles.

!important rules

You can set "!important" on any declaration and this will override other declarations for the same element. "!important" declarations override normal declarations.

For "!important" declarations, user style sheets override author style sheets which override the default style sheet. This allows users with special requirements (large fonts, color combinations, etc.) control over presentation.

Why use multiple author style sheets?

Style sheets can be used to target different user agents, so a single HTML document could have links to a number of style sheets including aural, print and screen style sheets.

For a large site, you may wish to use a range of visual style sheets for each document. This could include a general style sheet (applied across all sections of the site) for basic font information and then individual style sheets for each section of the site. Or, certain aspects of each document could be styled by individual style sheets. You could use a footer style sheet, a navigation style sheet and a range of overall content style sheets.

There is no limit to the way you break up your style sheet information. The aim is to use style sheets so that information does not have to be repeated in other style sheets. This means you can edit once and apply often.

Further information

What happens when conflicts occur? »

Other Max Design articles and presentations
Associated with webstandardsgroup.org