CSS Fundamentals: The Cascade, Specificity, and Inheritance
How CSS decides what wins
Cascade basics
When multiple CSS rules target the same element, the browser resolves conflicts using origin, importance, specificity, and source order. This is the cascade, and understanding it is essential for debugging styling issues.
Specificity mental model
Inline styles generally outrank selectors, IDs outrank classes, classes outrank element selectors, and later rules can win when specificity ties.
Inheritance and defaults
Inherited vs non-inherited properties
Some properties such as and inherit from parent elements, while others like and usually do not. Browsers also apply default styles, so a reset or normalization strategy can help create a consistent baseline.
Selector strategy
Prefer selectors that are simple, reusable, and easy to override. Heavy reliance on IDs and deeply nested selectors often creates brittle code and makes component styling harder to manage.
Which rule usually has higher specificity?
A class selector is more specific than an element selector or the universal selector.
Correct answer: A class selector
What does CSS inheritance mean?
Inheritance helps reduce repetition for naturally inherited properties like typography.
Correct answer: Child elements can receive certain property values from their parent elements unless they are overridden.
Debugging tip
When a style seems ignored, inspect specificity and source order before assuming the property is invalid.
Name one property that commonly inherits from a parent.
Text color is a classic inherited property.
Correct answer: color