The Cascade in CSS: Origin, Order and Importance

Understand how the browser decides which rule wins when several styles target the same element.

📘 Theory

Style origins: browser, author and inline styles

Not all rules begin with the same priority.

Browsers apply default user-agent styles before your own CSS enters the picture. Your author styles usually override those defaults.

Within author styles, external files and internal `` blocks compete through source order. Inline styles start with greater weight in the normal cascade, and `!important` changes the priority even further.

User-agent styles are the browser defaults.
Author styles include external and internal CSS.
Inline styles live in the HTML `style` attribute.

Order of appearance

If everything else is equal, the later rule wins.

Importance and practical discipline

`!important` should stay exceptional. If you reach for it constantly, the structure of your CSS is probably fighting you.

Before using it, review your stylesheet order, your component architecture and whether the selector itself is the right one.

1 Style origins: browser, author and inline styles 2 Order of appearance 3 Importance and practical discipline

🧭 Key visuals

Cascade decision flow

Use it as a mental checklist when two rules compete for the same element.

Diagram showing how the CSS cascade evaluates importance, specificity and source order.

🧪 Learn by doing

Example Interactive demo: source order Switch the rule order and watch which color wins.

⌄

🏁 Challenges

Challenge Challenge: style origin Compare an author rule against an inline style.

⌄

🧰 Resources

Useful links

web.dev - The cascade

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 04

Reset and Normalize: A Consistent Base for CSS

Lesson 06

CSS Specificity: How Selectors Win Conflicts

›