Cascade, inheritance, and specificity

The cascade is CSS conflict resolution. If two rules match the same element and set the same property, the browser needs a winner.

button {
  color: gray;
}

.primary-action {
  color: white;
}

If a button has class="primary-action", both rules match. The cascade decides which color applies.

The practical cascade order

For author CSS, think in this order:

1. importance: normal declarations vs !important
2. cascade layer: later layers beat earlier layers for normal declarations
3. specificity: stronger selectors beat weaker selectors inside the winning layer
4. source order: later rules win when specificity ties

This order matters. Specificity does not beat a later cascade layer. Source order matters only after earlier cascade steps tie.

Specificity

Specificity is the selector’s weight.

Common weights:

• type selector: low
• class, attribute, pseudo-class: medium
• id selector: high
• inline style: very high within author styles

p {
  color: black;
}

.intro {
  color: darkgreen;
}

#lead {
  color: purple;
}

If one paragraph matches all three, the ID selector wins because it has higher specificity.

Source order

When specificity ties, the later rule wins:

.notice {
  color: blue;
}

.notice {
  color: darkred;
}

The text becomes dark red.

Inheritance

Some properties inherit from ancestors. Text-related properties often inherit:

body {
  color: rgb(30 34 40);
  font-family: system-ui, sans-serif;
}

Most descendants inherit that text color and font family unless another rule changes them.

Box properties usually do not inherit:

main {
  padding: 2rem;
}

Children inside main do not automatically get the same padding.

CSS-wide keywords

Every property accepts these useful keywords:

.example {
  color: inherit;
  border-color: currentColor;
  padding: initial;
  font-size: unset;
  display: revert;
}

Use them by meaning:

• inherit: use the parent value
• initial: use the property’s initial value
• unset: inherit if the property normally inherits, otherwise initial
• revert: roll back to the previous cascade origin, often browser/user defaults
• revert-layer: roll back declarations from the current cascade layer

Use !important with restraint

!important changes cascade priority:

.button {
  color: red !important;
}

This is useful for user styles, emergency overrides, and rare utility rules. It is a bad everyday escape hatch because it makes future overrides harder.

What to carry forward

• cascade decides which matching declaration wins
• importance, layers, specificity, and source order are separate steps
• inheritance passes some values from parent to child
• revert-layer matters when using cascade layers
• low-specificity CSS is usually easier to maintain

The next lesson turns that cascade knowledge into maintainable selector habits.