The Cascade In Full: Origin, Layer, Specificity, Source Order

"The cascade isn't a free-for-all. It's a four-step algorithm the browser walks every time two rules want the same property."

The Cascade Is An Algorithm

When two declarations target the same element and property, the browser picks a winner by walking this list and stopping at the first decisive comparison:

1. Origin and importance — who wrote the rule (UA, user, author) and whether it's marked !important.
2. Cascade layer — which named layer the rule belongs to.
3. Specificity — the (a,b,c,d) score from the previous lesson.
4. Source order — which rule was declared later.

This lesson is about steps 1 and 4 — the framing that wraps specificity. Step 2 (cascade layers) gets its own lesson in Track 7 because it's the modern tool that solves most of the pain.

The Three Origins

• User-Agent (UA) stylesheet — the browser's built-in defaults. h1 is bold and 2em. a is blue and underlined. button has padding and a border. Every site starts from this baseline.
• User stylesheet — installed by the user via browser settings, a userstyles.world script, or a browser extension. Used for personal accessibility overrides (larger font, higher contrast).
• Author stylesheet — your CSS. The site's CSS.

The Tiered Cascade Order

The full origin-and-importance order, from weakest to strongest, is:

1. UA-default normal
2. User normal
3. Author normal
4. Author !important
5. User !important
6. UA !important

Notice the reversal at !important: in the normal tier, author beats user beats UA; in the !important tier, the order flips so user-important beats author-important. This is intentional — it ensures users with accessibility needs can override even !important author rules.

Animations And Transitions In The Cascade

CSS animations and transitions have their own slot:

• Animation declarations (the rules inside @keyframes) override author-normal rules but lose to author-!important.
• Transition declarations (the in-flight value during a CSS transition) beat all author rules including !important, but only while the transition is running.

That's why you sometimes see a property visibly animate even though you set !important elsewhere — the transition's interpolated value is winning during the animation window.

Source Order: The Final Tiebreaker

When everything else ties — same origin, same layer, same specificity — the rule declared later in source wins. This includes:

• Rules in the same <style> tag, evaluated top-to-bottom.
• Rules across multiple stylesheets, evaluated in document load order (later <link> wins).
• Rules from @import — counted as part of the file they're imported in, in the position of the @import statement.

This is why Tailwind works: every utility class is (0,0,1,0), so the order of class names in the HTML doesn't matter — what matters is the order Tailwind emits them in the CSS file, and Tailwind enforces a deterministic order.

Cascade Origin In Real Code: Resets

A CSS reset (or modern equivalent like Eric Meyer's reset, normalize.css, or a project-specific small reset) is author-origin CSS that zeros out UA defaults so the site starts from a consistent baseline. Modern resets are small — they normalize box-sizing, remove default margins, and standardize a few inconsistent defaults. They aren't a fight with the browser, just an explicit baseline.

Inspecting The Cascade In DevTools

Chrome DevTools → Elements → Styles tab shows every rule that matches the selected element, in cascade order, with overridden declarations struck through. Hovering each one tells you origin ("user agent stylesheet" vs your file). This is how you debug "why is the browser default still showing?" in seconds.

Pippa's Note