Types of CSS Property Values

There are many types of values that a CSS property can have - keywords, color values, number values, percentage values, length values strings and URLs.

The Cascade

When two or more CSS declarations target the same element and have the same specificity, the CSS declaration that is finally applied is based on the Cascade. The Cascade is the process by which the web browser selects the property that has to be applied to an element.

The Cascade Process

1. For a particular element, all the CSS declarations that apply to it are found.
2. All the declarations by origin - author, user and user agent are sorted. The author's styles have the highest weight, the user's styles come second and the user-agent's (browser's) styles have the lowest weight.
   • Among author styles, inline style declarations (loaded with the style attribute) have the highest weight.
     
   • Next in weight are the styles loaded with the <style> element and the <link> element. In the (X)HTML document, the styles that appear later get higher weight (whether loaded by <style> or by <link>). Therefore, if the <link> element (that links a style sheet) comes after the <style> element, then the external CSS declarations will have higher weight. If the order is switched, then the converse is true.
     
   • In the <style> element, the @import directive must appear before any CSS rules. The CSS declarations loaded from style sheets by @import directives in the <style> element are lower in weight than any CSS declarations that are directly contained in the element. This is because these declarations are considered to come before the other CSS rules in the <style> element.
   • In external style sheets (loaded with the <link> tag), if there are any CSS styles loaded with the @import directive, those styles are considered to have come before any later styles, and therefore, are of lower weight.
     
3. All the declarations that apply to the element are sorted by specificity - higher the specificity, higher the weight.
4. If any declarations from a particular origin have the same specificity, the declarations are sorted by the order in which they appear - declarations that appear later have higher weight.
5. Among author's styles, Important Declarations have the highest weight regardless of specificity. The same goes for user styles and user agent styles. However, Important Declarations in user styles override any conflicting Important Declarations in author styles and user-agent styles.
   

Note: Any presentational attributes that an (X)HTML document has are converted to their CSS equivalents. These are considered to be at the beginning of the author styles and have a specificity of zero. This gives them them the lowest weight among author styles. Therefore, any author CSS declarations that target the (X)HTML element will override presentational attribute styling.

Property Inheritance

Inheritance is the system by which elements automatically obtain certain properties from their ancestor elements. For example if the declaration color: red; is applied to a div element, then that declaration will also apply to p elements that are within it.
Inherited properties have no specificity at all, not even zero. An inherited property is overridden by values applied to the property using the universal selector (*). This is because the universal selector has a specificity of zero.
Most of the properties that apply to the "box" of an element such as borders, margins, padding and backgrounds, are not inherited by descendants of that element.

Important Declarations - !important

An Important Declaration is one which has the string !important inserted before the terminating semi-colon of the declaration.
Example: #main {color: black !important;}
An Important Declaration has the highest weight among CSS declarations. An Important Declaration will outweigh inline style declarations and internal stylesheet declarations too.
If more than one Important Declaration targets a particular element, then the more specific selector will be applied.

Selector Specificity

When two or more CSS rules target the same (X)HTML document element, the style that is applied to the element is determined by a system called selector specificity. Selector specificity is just a system to calculate how specific a particular CSS selector is. Among two or more CSS selectors, the most specific selector is the one that is applied to the element.

Calculating Specificity

Inline styles have the highest specificity. Second highest in specificity are ID selectors, third are Class selectors, Pseudo-Class selectors and Attribute selectors and last are Element Type selectors and Pseudo-Element selectors.
A selector chain with more than one selector of a specific kind is more specific than a selector chain that has only one or fewer selectors of that kind. An example will make this clear. Assume that the following two CSS selector chains target the same (X)HTML element:
img { float: right; }
div p img { float: left; }
The second CSS rule is more specific because it has more Element Type selectors. Therefore, the second CSS rule will be applied to the element.
When determining the specificity of CSS selectors, it is convenient to represent the specificity as four comma separated numbers - 0,0,0,0 . Each number represents one kind of selector - starting from the left and with the highest specificity - inline styles, and next, ID selectors, and next, Class, Pseudo-Class Selectors and Attribute selectors, and last, with the lowest specificity, Element Type selectors and Pseudo-Element selectors. Each instance of a particular kind of selector is calculated as one point.
Example:
#menu ul li a:link
The selector has one ID selector - #menu, therefore 1 should be added to the third digit (from the right) - 0,1,0,0 . The selector has one Pseudo-Class selector - :link, therefore 1 should be added to the second digit (from the right) - 0,1,1,0 . The selector has three Element Type selectors - ul li a , therefore 3 should be added to the first digit (from the right) - 0,1,1,3 . The element does not have any inline styles therefore the last digit is zero.
The universal selector (*) has a specificity of zero, but this does not mean it has no specificity. Combinators - the space character, the greater-than symbol, the tilde and the plus sign - have no effect on specificity.

Pseudo-Element and Pseudo-Class Selectors

There are some selectors that are not names of (X)HTML elements. They are not classes or ID's either nor are they attribute names or attribute values. These selectors are pseudo-element selectors and pseudo-class selectors.

Pseudo-element selectors

These are CSS selectors that target "virtual elements" - smaller parts of elements. In CSS2, pseudo-element selectors begin with a colon (:). In CSS3, pseudo-element selectors begin with two colons (::). These are the pseudo-elements: :first-letter , :first-line , :before , :after and ::selection . Pseudo-elements should always appear at the end of a selector chain. Therefore, there can be only one pseudo-element in a selector.

Pseudo-class selectors

These are CSS selectors that target parts of an (X)HTML element based on its dynamic state, language or position in the (X)HTML tree. Unlike pseudo-elements, pseudo-classes can appear anywhere in the selector chain. Pseudo-classes begin with a colon (:). These are the widely supported pseudo-classes:
:link , :visited , :focus , :hover , :active , :lang() and :first-child .