CSS: Origin of Cascading

Origin of Cascading

Style sheets may have three different origins: author, user, and user agent.

* Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
* User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did).
* User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.

Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

Style sheets from these three origins will overlap in scope, and they interact according to the cascade.

The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All rules user and author rules have more weight than rules in the UA's default style sheet.

Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply.

Order of Cascading

To find the value for an element/property combination, user agents must apply for the following sorting order:

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question.

2. The primary sort of the declarations is 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. "!important" declaration override normal declarations. An imported style sheet has the same origin as the style sheet that imported it.

3. The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

4. Finally, sort by order specified: if two rules have the same weight, origin, and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. It is, therefore, important that the user agent gives the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.

Previous: SCSS Cascading
Next: CSS Inheritance