Cascade, Specificity and Inheritance

It's not just proximity of the declaration of a style to its application that plays a role in the cascade. Although proximity is very important, specificity and inheritance also play important roles. Specificity is in many ways the underpinning of everything that is CSS. It seems simple-- a basic numeric mechanism for determining which selectors are more specific than others-- but upon a little digging, it soon becomes apparent that specificity is not only fraught with unexpected complications, it's also one of the least-understood aspects of CSS.

When styling rules or different styling sources are in conflict, CSS weighs the value of the applied rules to determine which has priority through an ordering process. Becoming aware of how cascade works will allow you to predict and control the interaction of styles on the final rendering.

• Calculating Specificity
• The Cascade Ordering Process
  • Cascade Example 1
  • Cascade Example 2
  • Cascade Example 3
• Inheritance
• Why hyperlinks don't inherit color from their ancestor elements
• Definitions and Notes
• Resources