Cascade Basics

CSS · Reference cheat sheet

📋 Overview

The cascade decides which CSS rule wins when several apply to the same element. Browsers combine origin, importance, specificity, and source order. Understanding this stops “why didn’t my style apply?” frustration.

🔧 Core concepts

When two class selectors conflict, the one that appears last in the CSS usually wins.

💡 Examples

Source order:

.title {
  color: blue;
}
.title {
  color: crimson; /* wins */
}

Specificity sketch:

p {
  color: black;
} /* type: low */
.note {
  color: green;
} /* class: medium */
#intro {
  color: purple;
} /* id: high */

<p id="intro" class="note">Which color?</p>
<!-- purple — id wins -->

Inheritance:

article {
  color: #334155;
  font-family: Georgia, serif;
}
/* paragraphs inside article inherit color/font unless overridden */

Equal specificity — last wins:

.btn {
  background: gray;
}
.btn {
  background: teal;
}

⚠️ Pitfalls

• Fighting with #id and !important creates unmaintainable CSS.
• Browser DevTools “Computed” panel shows the winner — use it.
• Not all properties inherit (margin does not).
• Linked stylesheets order in HTML matters for equal-specificity ties.

🔗 Related

• selectors_basics.md
• box_model_basics.md
• specificity.md
• cascade_layers.md