CSS Cascade Order: User Agent, User, and Author

The CSS Cascade is the core algorithm browsers use to resolve conflicting property declarations, primarily sorting them by declaration origin and importance before evaluating specificity or source order. This article breaks down how the cascade processes styles across the three primary origins—User Agent, User, and Author—and explains how the !important flag alters their precedence to ensure accessibility and design control.

The Three Origins of CSS Declarations

Every CSS declaration that a browser processes originates from one of three distinct sources:

  1. User Agent (UA): These are the default base styles provided by the browser itself. They ensure that unstyled HTML elements have basic readability and predictable behavior (such as setting display: block for <div> tags or applying default margins to <p> elements).
  2. User: These are custom styles defined by the person viewing the website. They typically stem from browser preferences, custom user stylesheets, or accessibility extensions designed to enforce high contrast, larger font sizes, or specific color schemes.
  3. Author: These are the styles written by the web developer or designer who created the site. Author styles represent the majority of CSS delivered via external stylesheets, <style> tags, and inline styles.

The Cascade Order for Normal Declarations

When declarations compete for the same element and property without any special flags, the cascade prioritizes author design over default settings. Normal declarations are evaluated in the following ascending order of precedence (lowest priority to highest):

  1. User Agent declarations (normal): Browser defaults serve as the baseline and carry the least weight.
  2. User declarations (normal): General user preferences override standard browser defaults.
  3. Author declarations (normal): Web developer styles override both normal user preferences and normal browser defaults, ensuring the website appears as designed.

The Inversion of Priority with !important

When the !important annotation is appended to a declaration, it drastically reorders the hierarchy. The CSS specification intentionally inverts the precedence of origins for !important declarations to protect user accessibility, ensuring that a user’s explicit requirements can override author choices.

The complete origin-and-importance priority ladder, from lowest precedence to highest precedence, is structured as follows:

  1. User Agent normal: Base browser defaults.
  2. User normal: Standard user stylesheets.
  3. Author normal: Standard developer stylesheets.
  4. CSS Animations: Keyframe animation values take precedence over normal author styles.
  5. Author !important: Developer overrides that bypass normal author rules.
  6. User !important: Crucial user accessibility rules that override any author styles.
  7. User Agent !important: Critical browser configurations, reserved for settings that must never be modified.
  8. CSS Transitions: Actively transitioning property values take absolute priority over all other declarations.

Breaking Ties Within the Same Origin

If multiple declarations targeting the same element and property share the exact same origin and importance level, the cascade moves down its resolution checklist:

  • Cascade Layers: Declarations in later-defined layers take precedence for normal styles, while declarations in earlier layers take precedence for !important styles.
  • Specificity: Selectors with higher specificity (e.g., ID selectors versus class selectors) override less specific ones.
  • Order of Appearance: If specificity is identical, the declaration that appears latest in the source code wins.