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.