Inheritance, Specificity & Cascade

CSS Inheritance

Some CSS properties pass down from parent elements to their child elements.

Mostly text styles like, color, font-family, font-size, line-height etc.

Example:

body {
  color: blue;
}
p {
  /* p will be blue because it inherits from body */
}

Note: Not all CSS properties inherit. If you want to force inheritance, then you can use:

p {
  background: inherit;
}

Why it matters

Inheritance helps you write less code by applying styles to parent elements and letting children automatically follow. It keeps CSS clean and DRY (Don’t Repeat Yourself).

CSS Specificity (Which rule is stronger?)

When many CSS rules apply to the same element, specificity decides who wins.

Specificity Levels:

Example:

If you write:

<h1 id="title" class="title">Hello</h1>

#title {
  color: red; /* strong */
}
.title {
  color: green; /* medium */
}
h1 {
  color: blue; /* weak */
}

The color will be red (because ID is stronger).

Important:

• If two selectors are equal → last one wins.

Example:

.title {
  color: red;
}
.title {
  color: green;
}

The color will be green.

• !important will always win.

Example:

.title {
  color: red !important;
}
.title {
  color: green;
}

The color will be red.

Why it matters

Specificity helps you control which styles apply when multiple rules target the same element. Without understanding specificity, your CSS might not work as expected and you'll get confused when styles don't apply.

CSS Cascade (Which rule gets applied finally?)

The Cascade decides the final CSS by checking:

• Important rules (!important first)
• Source type (browser default, user styles, your CSS)
• Specificity (strongest selector wins)
• Order in code (last rule wins if tie)

Example:

p {
  color: green; /* normal */
}
p {
  color: red !important; /* important */
}

The color will be red.

Why it matters

The cascade is what makes CSS stand for "Cascading Style Sheets". It decides which rule actually gets applied when there are conflicts. Without it, browsers wouldn't know which style to show.

Quick Summary