Q5402 What does CSS cascading mean?

irt.org | Knowledge Base | CSS | Q5402 [ previous next ]

Q5402 What does CSS cascading mean?

There are 3 different types of style sheets:

• Author: Created by the author of the document your are browsing. Designed to fit the site your are currently visiting.
• User: Your very own style sheet, created to fulfill your own needs.
• User agent: Default style sheets inside the browser you're using.

These 3 different style sheets will overlap in scope, and they then interact according to the cascade, which assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.

Imported style sheets also cascade, and their weight depends on their import order.

The cascading order is then the order in which the user agent finds the value for an element/property. User agents use the following algorithm:

1. Find all declarations that apply to the element and property in question, for the target media type.
2. Sort the declarations by weight and origin: For normal declarations, author style sheets override user style sheets which override the default style sheet. For "!important" declarations, user style sheets override author style sheets which override the default style sheet.
3. Sort by specificity of selector: more specific selectors will override more general ones.
4. Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

The search for the property value is then terminated, when any of the above steps yields a rule, that has a higher weight than the other rules, that apply to the same element/property combination.

All in all, apart from the "!important" setting, author style sheets have higher weight than those of the reader.