Q5402 What does CSS cascading mean?
You are here: irt.org | FAQ | CSS | Q5402 [ previous next ]
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
- User agent: Default style sheets inside the browser you're
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
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
- Find all declarations that apply to the element and property in
question, for the target media type.
- 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
- Sort by specificity of selector: more specific selectors will override more general ones.
- 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.
©2018 Martin Webb