A user-origin stylesheet declares body { font-size: 20px !important } and the site's author stylesheet declares body { font-size: 12px !important }. Which declaration wins, and what cascade rule decides it?

## Two ladders, not one The first sort criterion of the cascade is "origin and importance", and the usual mental model — three origins in a line — is only half of it. There are three origins (**user-agent**, **user**, **author**) and each contributes two buckets, a normal one and an important one. Ordered weakest to strongest, the buckets are: ``` 1. user-agent normal 2. user normal 3. author normal 4. author !important 5. user !important 6. user-agent !important ``` The top half is the bottom half reversed. That is the whole answer to the question: both declarations are important, one is user-origin and one is author-origin, and in the important half user outranks author. `20px` wins, and no further step of the cascade is consulted. ## What `!important` actually is `!important` is a per-declaration flag written before the semicolon: `font-size: 20px !important;`. It applies to that one declaration, not to the rule; a rule can mix important and normal declarations freely. On a shorthand it marks every longhand the shorthand expands to. It is not a specificity value — it never appears in the specificity triple, and adding it cannot be "out-specificitied" by a longer selector, because importance is compared strictly before specificity. ## Why the inversion exists If `!important` simply meant "strongest", the author would always be able to have the last word, since authors write far more CSS than users do. The user origin exists so that a person can impose their own reading requirements: a minimum font size, a forced foreground/background pair, wider spacing, reduced decoration. Those overrides are worthless if the site can beat them. Inverting the important half gives the user a lever the page cannot take away — and gives the browser itself, at the top, a lever the user cannot accidentally destroy (user-agent important declarations are rare and are reserved for things the browser must guarantee). The same inversion principle appears elsewhere in the cascade — importance flips the *layer* order too — but the origin inversion is the original and the one interviewers ask about. ## Where user-origin styles actually come from In practice user-origin declarations reach the page through browser settings and user stylesheets. Firefox reads a `userContent.css` file from the profile's `chrome` directory as user-origin CSS, and browser accessibility settings (minimum font size, forced colours) act at this level too. Note that not everything a user *installs* is user-origin: styles injected by an extension's content script are typically author-origin unless the extension explicitly asks for the user origin, so an extension's `!important` may well lose to yours. ## What this means for you as an author First, stop treating `!important` as a hierarchy-free trump card in your own head; it is one bucket among six, and the only bucket you can write into is the weakest of the important half. Second, if a user override is beating your styles, that is the system working — do not hunt for a way around it, because there is none, and attempting one usually degrades the page for exactly the people the override protects. Third, and most useful day to day: because importance is compared before specificity, an author `!important` collides only with other author `!important` declarations. Inside that bucket the cascade keeps going — element-attached styles, then layers (in inverted order), then specificity, then source order. So a second `!important` in a more specific author rule *does* beat the first, which is how `!important` wars start and why they end with every rule in a file carrying the flag. ```css /* both important, both author: the cascade continues down the list */ .card p { color: #333 !important; } /* 0,2,0 */ p { color: #999 !important; } /* 0,0,1 — loses on specificity */ ``` ## Answering it well in an interview Say which one wins, then say *why* in terms of buckets rather than strength: `!important` relocates a declaration into the inverted half of the origin ordering. Naming the accessibility rationale unprompted is the part that separates a memorised answer from an understood one. And be ready for the obvious follow-up — what happens with a *normal* user declaration against a normal author one — where the ordinary, non-inverted order applies and the author wins.