In the full name "Cascading Style Sheets", the word "Cascade" points straight at its core mechanism: when multiple rules apply to the same element at once, the browser needs an algorithm to decide which one wins. Understanding the cascade and inheritance is the fundamental skill for debugging "why is this style not taking effect".
The Three Dimensions of the Cascade
When the same property of the same element is hit by several rules, the browser settles the contest by the following dimensions in order:
Origin and importance — user-agent default styles < user styles < author styles < author !important < user !important; author styles are usually the ones you need to worry about most.
Selector specificity — when the origins match, the "precision" of the selectors is compared; see the specificity rules in the next section.
Source order — when both origin and specificity match, the rule declared later overrides the one declared earlier.
TipThis is why putting "reset styles" first and "override styles" last is a common convention — source order is the last, and most easily overlooked, link in the cascade algorithm.
Specificity at a Glance
Selector specificity can be roughly split into four tiers, commonly written as (a, b, c, d):
Tier
Includes
Example
a
Inline styles
style="..."
b
ID selectors
#header
c
Class / attribute / pseudo-class selectors
.btn、[type], :hover
d
Type / pseudo-element selectors
div、::before
Compare tier by tier, and only move to a lower tier when the higher ones tie; !important and inheritance take no part in this count, and the universal selector * has a specificity of 0. For more complete examples of compound selector specificity, see 2.2 Combinators and Specificity.
!important
.btn {
color: red !important;
}
Caution!important skips the normal specificity comparison and lifts the declaration straight to an "almost highest" position. Overusing it makes styles hard to override and maintain; in team work it is usually only permitted in rare cases, such as overriding third-party library styles.
Inheritance
Some CSS properties automatically "inherit" from parent elements to their children without being redeclared — these are usually properties related to text and typography, because it matches intuition: set a font on <body> and all the text on the page naturally uses it.
The non-inherited ones are mostly box model and layout properties — if margin could inherit, almost every layout would fall apart.
inherit / initial / unset / revert
Four generic keywords let you explicitly control where any property gets its value from:
Keyword
Effect
inherit
Forces inheritance from the parent element, even if the property does not inherit by default
initial
Resets to the initial value defined by the CSS specification (independent of inheritance)
unset
Acts like inherit if the property inherits by default, otherwise like initial
revert
Falls back to the value from the browser's default style sheet (or the user style sheet), ignoring author styles
.reset-all {
all: unset; /* all can apply to almost every property at once */
}
Common Pitfalls
Treating "rules written later always win" as the only rule — source order only decides when specificity ties; a more specific selector wins even if it is written first.
Assuming border and background inherit — they do not by default; children need their own declarations or an explicit inherit.
Using !important as a "quick fix" for cascade problems — this only postpones the problem, and every later style that wants to override it must add !important too, starting a specificity arms race.