Cascade, Specificity and Inheritance Definitions and Notes

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).

However, for balance, an "!important" declaration (the keywords "!" and "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

You can think of some rules coming from "higher up" in the cascade; these combine with the rules at the next level down, and the result combines with the next level, and so on, until finally you have the actual rules to be applied to the document pooled at the "base" of the cascade.

Style sheets from three origins (Author, User, User Agent) 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.

Specified values may be absolute (i.e., they are not specified relative to another value, as in 'red' or '2mm') or relative (i.e., they are specified relative to another value, as in 'auto', '2em', and '12%'). For absolute values, no computation is needed to find the computed value.

Relative values, on the other hand, must be transformed into computed values: percentages must be multiplied by a reference value (each property defines which value that is), values with relative units (em, ex, px) must be made absolute by multiplying with the appropriate font or pixel size, 'auto' values must be computed by the formulas given with each property, certain keywords ('smaller', 'bolder', 'inherit') must be replaced according to their definitions.

In most cases, elements inherit computed values. However, there are some properties whose specified value may be inherited (e.g., the number value for the 'line-height' property). In the cases where child elements do not inherit the computed value, this is described in the property definition.

A mechanism by which some values are passed down to the children of an element in the document tree. Each property defines whether it is inherited or not.

Every document containing markup is a tree of information, where nested elements are nodes that branch from the topmost element (In the case of HTML, the HTML element is the top of this tree.) Elements nested within other elements represent branches, while empty elements and text represent leaves of the tree. CSS allows some properties applied to certain elements to be inherited from those specified for parent elements further up the document tree (toward the root element.) Not all CSS properties are inherited, and those that are may not always be inheritable by all elements.

Refer to individual CSS properties to find a breakdown of individual inheritance rules.

• In HTML, default properties for a document can be set by applying style rules to the HTML or BODY elements.
• While not all CSS properties automatically inherit, CSS2 introduces a new value for every CSS property ("inherit") which automatically causes the property to be inherited from a parent in the element tree. This also gives the inheritance directive a greater weight in the Cascade calculation.

Inheritance makes CSS operate sensibly. When an element gets styled, you expect (in most cases) that its descendant elements will also be styled.

For example, if you set a ul element to have italicized text, you assume that the list items within that list will be in italics: that's inheritance at work.

Not every property is inherited. You wouldn't expect that a border around a ul element would lead to borders around each of the li elements; borders aren't inherited.

Inherited values are computed values. Let's say you set a table element to font-size: 200%—that size is computed to a specific length (probably in pixels, but it could be in any unit) and the computed size is inherited by the elements within that table; otherwise, every element would be twice as big as its parent!

Exception: numeric values for line-height are inherited "in the raw".

Inherited values always lose to values explicitily assigned by rules in the stylesheet.

If you set ul elements to be red and li elements to be blue, they'll be blue because the assigned value of blue overrides the inherited value of red.

At its core, specificity is the mechanism by which the rest of CSS works. It is used to decide which selectors are more specific than others, and therefore which rules will apply to a given element. This basically has to do with the number of elements and attributes in a rule's selector. The procedure involves counting three items:

1. The number of ID attributes in the selector.
2. The number of other attributes in the selector.
3. The number of tag names in the selector.

These three values are then concatenated in order to give a weight.

The highest specificity (almost) always wins

Grouped selectors and declarations are broken apart and considered individually

Therefore:h1, h2 {color: black;}…is the same as:h1 {color: black;} h2 {color: black;}…and each "split rule" has its own specificity

User agents must first assign a specified value to a property based on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it.
2. Otherwise, if the property is inherited, use the value of the parent element, generally the computed value.
3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

Since it has no parent, the root of the document tree cannot use values from the parent element; in this case, the initial value is used if necessary.