The CSS Cascade: Importance, Specificity, Source Order & Inheritance

When multiple CSS rules target the same element with conflicting values, the browser needs a system to decide which one wins. That system is the cascade, and it resolves conflicts in this order:

Importance — declarations marked !important win over everything else (used sparingly, since it breaks the normal cascade and makes future overrides harder).
Specificity — a more specific selector beats a less specific one (covered in detail on the next page).
Source order — if specificity is equal, whichever rule appears later in the CSS wins.

p { color: blue; }
p { color: green; } /* This wins — same specificity, appears later */

p { color: blue !important; }
p { color: green; } /* Loses — blue wins due to !important */

Inheritance is a separate but related concept: some CSS properties automatically pass down from parent to child elements unless overridden.

body {
  font-family: sans-serif; /* inherited by every element inside <body> */
  color: #333;              /* also inherited */
}

.card {
  border: 1px solid #ccc;   /* NOT inherited — box-model properties never are */
}

Text-related properties (color, font-family, line-height, text-align) typically inherit; box-model and layout properties (border, margin, padding, display) typically don't — this distinction usually matches intuition (you want text styling to flow naturally through nested content, but not have every nested <div> accidentally inherit a parent's border).

The keyword inherit can force any property to inherit explicitly, and initial resets a property back to its default browser value regardless of any inherited or cascaded value.