The Cascade - Specificity and Inheritance

on

 🎨 CSS Cascade Cheatsheet



1. What is CSS Cascade?

The cascade determines which CSS rule wins when multiple rules target the same element.

2. Cascade Priorities (High → Low)

🔹 Categories of Importance

  1. !important → Always wins, overrides everything.

  2. Type of CSS

    • Inline > Internal > External

  3. Specificity

    • ID > Attribute > Class > Element

  4. Position (Order in file)

    • The rule written later overrides earlier rules.

3. Specificity Order

  • Element Selector → p {} → Lowest

  • Class Selector → .btn {}

  • Attribute Selector → input[type="text"] {}

  • ID Selector → #header {} → Highest

Final Order:
ID > Attribute > Class > Element

4. Type Order

  • Inline → <h1 style="color:red;">

  • Internal → <style> h1 { color: red; } </style>

  • External → styles.css

Final Order:
Inline > Internal > External

5. Position (Order in File)

Later rules replace earlier ones if they have the same specificity and type.

p { color: red; }
p { color: blue; }   /* This wins */

6. !important Rule

Overrides all other rules.

p { color: red !important; }

Even if another inline or ID rule sets a color, !important will win.

7. Quick Decision Flow

When CSS conflicts → check in this order:

  1. Does any rule have !important?

  2. If not, check Type (Inline > Internal > External).

  3. If same type, check Specificity (ID > Attribute > Class > Element).

  4. If still same, check Position (Later in file wins).

Comments

Post a Comment