What is the CSS cascade, and in what order does it resolve conflicting rules?

The cascade is the rule set CSS uses to pick a winner when several conflicting declarations target the same element; it weighs them by importance, then specificity, then source order.

When two rules disagree (say both set color), the browser does not pick at random — it resolves the conflict from highest priority to lowest:

1. Importance — a declaration flagged !important outranks normal ones.
2. Specificity — otherwise the more specific selector wins. Roughly: an id beats a class, which beats a tag (id → class → tag, from high weight to low).
3. Source order — if importance and specificity tie, the rule written later in the stylesheet wins.

A worked example, all targeting the same paragraph:

p     { color: blue; }   /* tag - lowest weight */
.text { color: green; }  /* class - beats the tag */
#intro { color: red; }   /* id - beats the class -> text is red */

A practical warning: it is tempting to "win" a stubborn conflict by slapping !important on a rule, but doing so repeatedly makes a stylesheet almost impossible to reason about, because the normal specificity logic no longer predicts the outcome. The maintainable fix is to raise specificity deliberately (e.g. add a class) instead.

Go deeper:

• Introduction to the CSS cascade (MDN) — the full ordering, including stylesheet origin and @layer, which sit above specificity.
• Cascading Style Sheets (Wikipedia) — background on the cascade and specificity, with worked examples.