How does CSS inheritance and the cascade work?

Short answer

Inheritance passes certain property values from parent to child elements automatically. The cascade resolves conflicting declarations using origin, importance, specificity, and source order.

How it works

• Inheritance: Properties like color, font-family, and line-height flow down the DOM tree. You can force inheritance with the inherit keyword or prevent it with initial and unset.
• Cascade: When multiple rules target the same property on the same element, the browser sorts them by: 1. Origin and importance (user agent, user, author, !important) 2. Specificity 3. Source order (last one wins)

Example

body {
  color: #333;
  font-family: system-ui, sans-serif;
}

a {
  color: inherit; /* uses parent's color instead of browser default */
}

.highlight {
  color: crimson !important; /* overrides cascade */
}

Tips

• Avoid overusing !important; it breaks the cascade and makes debugging harder.
• Use all: unset to strip inherited and default styles from a component root.
• Understand that layout properties (width, margin, display) are generally not inherited.