Cascade & Specificity

The cascade is the algorithm browsers use to resolve conflicting CSS declarations. When two or more rules apply to the same element, the cascade determines which property value takes effect. Understanding this algorithm is essential for writing predictable, maintainable stylesheets.

The word "cascading" reflects how styles flow from multiple sources — user agent defaults, user stylesheets, and author stylesheets — with later sources overriding earlier ones. The cascade considers six factors in order of importance.

When specificity and origin are equal, source order decides: the last declaration in the stylesheet wins. This is the simplest tiebreaker and a common source of confusion.

Source order applies within each stylesheet, across multiple stylesheets (later <link> tags override earlier ones), and within a single declaration block (later properties override earlier ones for the same property).

Specificity is calculated as a four-column weight: (inline, IDs, classes, elements). Each selector type contributes to one column, and the comparison is made left-to-right — a single ID beats any number of classes.

Adding !important to a declaration elevates its priority above all normal declarations, regardless of specificity. It is a nuclear option that breaks the cascade and should be used as a last resort.

When two declarations both have !important, the cascade falls back to specificity and source order to resolve the conflict. So !important is not absolute — it just changes the game from "normal" to "important" contexts.

CSS has three origins: the browser's user-agent stylesheet, the author's stylesheet (your CSS), and the user's stylesheet (browser preferences). Each origin can have normal and important declarations. The browser resolves them in a strict priority order.

This means user stylesheets with !important can override author styles — a feature designed for accessibility. Users with visual impairments can force larger fonts or high-contrast colors via their browser settings.

Inheritance and the cascade are often confused but serve different purposes. Inheritance passes property values from parent to child elements automatically. The cascade resolves conflicts between declarations targeting the same element.

The cascade always wins over inheritance. If a parent has color: red (inherited by child) but a direct selector targets the child with color: blue, the child will be blue because the cascade applied the declaration directly to the child.

Cascade layers give authors explicit control over the cascade order, bypassing specificity and source order entirely. Layers are defined with the @layer at-rule, and styles in later layers override earlier layers regardless of specificity.