What is so Cascading about Style Sheets?
There were times when I wondered why style sheets were referred to as CSS. Why Cascading?
Style sheets may have three different origins:
- The author: These style sheets are defined by the person who writes the document. For instance, in HTML, the author can decide to include the styles sheets in the document, or have them in a separate file, that is linked to the source document.
- The user: The user may have their own styles that they want to use when accessing documents. Someone with bad eye sight may decide to use a larger font, or a different contrast profile. One may want to disable blinking text, or other distracting styles.
- User agent: This is the application that is used to access the document. This could be anything, from a web browser, email client, mobile phone, screen reader to even a braille reader.
User agents that claim to operate conform the CSS specifications, are required to, at least behave as if they apply a default style sheet before other style sheets for a document are loaded. If you would view a document without style, it needs to have a standard look in every user agent, depending on the language it was written in. In HTML, an unstyled EM element, for instance, would be displayed using an italic font. This element could be styled to look as strike-trough text by the author, but if it isn’t the author should be able to assume it will be displayed using an italic font.
Rest assured that style definitions will overlap, so there has to be a way to know which style of the different sources will be used. This is where the cascade comes in play.
The cascade
The CSS cascade assigns a weight to each style definition. When there are several definitions for the same rule, the one with the greatest weight will take precedence.
Rules from the Author have more weight than rules user styles. User agent rules have the least weight. The weight of imported style sheets depends on their import order. In case the “!important” declaration is used, the precedence of the author style and the user styles is switched.
So, to find the correct style values to display, a user agent needs to do the following:
- 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.
- Sort the declarations for the first time, by weight and origin: For normal declarations this means that the default style will be overridden by the user styles, which in turn will be overridden by the author styles. For “!important” declarations this means that the default style is overridden by the author styles, which will be overridden by the user styles. Imported styles are considered to have the same origin as the style sheet that imported it.
- Sort the declarations for the second time, 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.
- Finally, sort by order specified: if weight, origin and specificity are the same, the last rue to be specified will be used. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
Examples
Let’s say I create an HTML 4 document where I use the following style definition:
body { margin: 0; padding: 0; }
When you would visit that page in your browser, the browser would first apply the default style for body:
body { padding: 8px; line-height: 1.33 }
Since you, as the reader, probably don’t have your own styles specified, it would skip to apply the styles as I have defined them. In this case, the padding of 8px of the default style will be overruled by my zero padding. Since I have no declaration for line-height, the default line-height will be used. This will result in your browser displaying the page with
body { margin: 0; padding: 0; line-height: 1.33 }
Summary
To summarize: The cascade works as follows: The user agent (browser, mobile device, braille reader or such) applies the default style to the document. After that it looks for relevant styles defined by the reader of the document. If they exist, they are applied. After, it checks if there are author styles, and applies those. In this whole process it checks how specific the rule is.
Later I’ll talk about the !important setting and look at some examples of rule specificity.
