12.0 The Cascade

Stylesheets can have three different sources: author, user, and user agent. The author is a web designer, who specifies style sheets (in the html document or linked externally). The user, a site visitor, may also be able to specify style information in special cases. And finally, user agents, browsers, have in-built style sheets that set the default presentation for elements. Style sheets from these three sources overlap and interact according to the cascade, which determines which CSS rules should take precedence when there's a conflict.

The cascade gives a weight to each style rule. When several rules apply, the one with the greatest weight takes priority. Rules in author style sheets have more weight than rules in user style sheets, but this priority is reversed for "!important" rules. All user and author rules have more weight than rules in the user agent's default style sheet.

Specificity and Order

These both apply when comparing external style sheets and embedded stylesheets (those in the head section of a html document). Specificity, the importance of each rule, is governed by the number of ids, classes, and elements (tags) in each selector. By way of example, a selector with the most ids takes precedence. When the same number of ids are present, the one with more classes and pseudo-classes takes precedence. When the same number of classes are present, the one with more element names and pseudo-elements takes precedence. This means a selector containing a single id would still be more specific than one with containing dozens of classes. If selectors conflict but have the same specificity, then order of appearance decides matters. The rule declared later wins. This applies not only to the order of rules within a single sheet, but also to the order that the sheets are linked, imported or embedded in the head section.

If there is a conflict in styles, such as the same property being declared twice, the rule that comes later in the cascade (nearer to the actual element) wins. The later in the cascade, the more likely it is to affect an element.

For example, using an external stylesheet:

p	{color: red;} 
p	{color: blue;}

The second rule overwrites the first, as it is nearer to the element (p) in the html document, and so the text would be blue. If the red colour was declared in the stylesheet but the blue colour was declared in the head section, then the text would also be blue because again the rule is nearer to the element. And if the colour green was applied in an inline style (<p style="color:green";>), then the text would be green as this is even nearer to the element in question.

This also applies when using multiple classes. For example:

.red	{color: red; font-weight: bold;} 
.blue	{color: blue;}

The text here would be bold and blue, as the blue value overwrites the red value being nearer to the element, and there is nothing to overwrite the bold value. So if two rules have exactly the same weight and specifity, the one that occurs later in the style sheet wins. Note that where stylesheets import other stylesheets, the imported files are parsed first.

Inheritance

Inheritance is the process by which the values of certain CSS properties applied to an element get passed down to all elements nested within it. Inheritance relies on the document tree, which is the hierarchy of (X)HTML elements in a page based on nesting. Descendant elements may inherit CSS property values from any ancestor elements enclosing them, with the nearest ancestor taking precedence.

Some properties that inherit include color, font, line-height and list-style, and some that don't inherit include background, padding, border, margin, height and width. Inheritance prevents certain properties from having to be declared over and over again in a style sheet, allowing the developers to write less CSS, the users to view faster-loading pages, and the clients to save money on bandwidth and development costs.