CSS resolves conflicting rules through three mechanisms, checked in this order:
!important declaration beats a normal one, regardless of specificity.<link>/<style> tag) wins.p { color: blue; }
p { color: green; } /* same specificity, comes later — green wins */
Inheritance is a separate mechanism: some properties (mostly text-related ones — color, font-family, font-size, line-height, text-align) automatically pass down from parent to descendant unless overridden, while most others (border, margin, padding, background, width) do not. This is deliberate: it would be unhelpful if every child <div> inherited its parent's border, but genuinely convenient that setting font-family once on <body> applies everywhere.
Three keywords let you explicitly control inheritance on any property:
.reset-color {
color: inherit; /* explicitly take the parent's computed value, even for non-inherited properties */
}
.reset-border {
border: initial; /* reset to the property's specification default, ignoring the cascade entirely */
}
.reset-anything {
all: unset; /* inherited properties act like `inherit`, non-inherited ones act like `initial` */
}
!important overrides normal specificity entirely — which is exactly why relying on it tends to cause more problems than it solves: the next override then also needs !important too, and there's no way to out-specificity an !important rule short of another, more specific !important (or one that appears later, if specificity is tied). Treat it as an escape hatch for overriding third-party CSS you can't otherwise edit, not a normal tool for your own stylesheets.