Subjects and lessons to explore.

Law

Web Development · Foundations

The CSS Cascade

10 min read 5 practice questions
6 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

The CSS is the rule system a browser uses when more than one CSS declaration could set the same property on the same element. First, a declaration must be relevant and match the element. Then CSS considers and !important, layer precedence, and later tie-breakers such as specificity and source order. The cascade is why two matching rules can produce one computed result instead of a contradiction.

Why this matters

The cascade turns a stylesheet from a list of guesses into a system you can inspect. In a course, it explains why an apparently correct declaration is crossed out in browser developer tools. In a project, it helps teams keep third-party styles, base styles, and local changes predictable. Knowing the order also discourages reflexive use of !important, which changes the normal precedence rules and can make future maintenance harder.

The college version

A decision process, not a selector

The cascade is CSS's method for choosing one value when multiple declarations could set the same property on an element. Consider two rules that both set a paragraph's color. CSS does not average the colors or report an error. It evaluates the declarations in an ordered process and selects a winning value. That process is central to the name Cascading Style Sheets.

The first question is . A declaration is not a candidate merely because it appears in a stylesheet. Its media or other conditional context must apply, and its selector must match the element. Selector matching belongs to the selectors topic: p.notice either identifies a particular element or it does not. Once more than one relevant declaration targets the same property, the cascade determines precedence. This distinction is useful in debugging. Ask “does this rule match?” before asking “why did it lose?”

The cascade's stages are ordered. Origin and importance are considered before specificity; source order is a later tie-breaker. Therefore “the more specific selector always wins” is not a sound rule. Specificity only compares declarations that survived the earlier decisions at the same applicable origin and importance level. A less-specific author declaration may defeat a more-specific user-agent declaration because origin precedence is evaluated first. This lesson uses specificity only to mark that boundary; calculating selector weights is a separate topic.

Origins and importance establish broad precedence

CSS declarations can come from several origins. A user agent—the browser—has default styles. A user can have user styles, and the page author provides author styles. For normal declarations, author styles outrank user styles, which outrank user-agent styles. This lets a page's stylesheet ordinarily override the browser's default presentation. Transitions and animations also have defined places in the cascade, but they are not needed to understand the everyday author-style example.

!important changes a declaration's importance, and important declarations use a reversed origin order. Important user-agent declarations outrank important user declarations, which outrank important author declarations. The reversal exists so a user or browser can preserve certain necessary preferences against ordinary author styling. It is not a general-purpose “make my rule win” button. An author who adds !important has moved a declaration into a different precedence category and may make a component difficult to override later.

Read origin and importance as a combined step, not as a contest between selector shapes. A highly specific selector in a lower-precedence origin does not leap ahead. Similarly, a normal declaration does not beat a relevant simply by being written later. Source order has no role until CSS has compared the earlier precedence dimensions.

Layers organize author styles without selector escalation

Cascade layers let an author place groups of declarations in a stated precedence order. They are created with @layer. Within one origin, normal declarations in layers have lower precedence than normal declarations written outside any layer. Among normal layers, a later layer has higher precedence than an earlier layer. This makes layers useful for giving a reset, a vendor package, or broad defaults a deliberate lower-priority place while leaving local unlayered rules able to override them without increasingly complicated selectors.

Important declarations reverse this layer order. For important declarations, an earlier layer has higher precedence than a later layer, and important declarations inside layers outrank important declarations outside layers. That reversal parallels the origin reversal for important declarations. It is a reason to use !important sparingly: a mental shortcut based on normal layer behavior becomes wrong as soon as importance changes.

After relevance, origin/importance, and layer precedence have narrowed the candidates, CSS can use specificity for a remaining conflict. If specificity is also tied, resolves it: the declaration that occurs last in document order wins. This familiar “later rule wins” statement is true only at that late stage. For example, two equal-specificity, normal, unlayered author rules for the same matching paragraph and property can be settled by their order. Moving the later rule to a lower-precedence layer changes the result because layer precedence is decided first.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Imagine several instruction cards trying to choose one shirt color for the same character in a game. The cascade is the referee. It first discards cards that are for a different character. Then it checks who wrote the card and whether the card has a special important stamp. It also checks which labeled stack of cards the card came from. Only after those checks does it use smaller tie-breakers, including which card appears last.

So CSS is not simply “last rule wins.” A late card can still lose if it comes from a lower-priority stack or is ordinary while another matching card is important. Selectors are how the referee knows which character a card concerns. Specificity is one later tie-breaker, but it does not decide every disagreement.

Picture it like this

The cascade is a referee using a written sequence of tie-breakers to select one instruction.

Where the picture stops working

A human referee may use judgment or negotiate. The CSS cascade follows specified precedence rules; it does not infer the author's preferred visual result.

Worked example

Suppose a paragraph matches these normal author declarations: p { color: navy; } in @layer base, then p { color: teal; } outside any layer. Both match, have the same origin and importance, and set the same property. The unlayered declaration wins before CSS needs source order, because normal unlayered author styles have higher layer precedence than normal layered styles. If both declarations were unlayered and had equal specificity, the one written later would win. Changing the first declaration to color: navy !important is not a casual override: important layer rules follow reversed layer precedence, so inspect origin, importance, and layers again rather than assuming the last line wins.

Key takeaway

The cascade is a sequence: establish relevance, compare origin and importance, account for layers, then use later tie-breakers. “Last rule wins” is only a narrow final case, not the whole model.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

What is the CSS cascade primarily for?

Choose an answer, then check it.
Question 2 of 3intermediate

Two equal-specificity, normal, unlayered author declarations match the same element and set color. What resolves the conflict?

Choose an answer, then check it.
Question 3 of 3intermediate

Within one origin, which statement about normal author declarations is correct?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define the CSS cascade as conflict resolution for declarations.
  • Identify relevance, origin, importance, layer precedence, and source order as cascade decisions.
  • Distinguish normal declarations from important declarations.
  • Explain the normal and important ordering of cascade layers.
  • Apply source order after earlier cascade tests leave declarations tied.

Common mistakes

  • Saying that the last matching declaration always wins.

    Source order is used only after relevance, origin/importance, layer precedence, and applicable tie-breakers leave a tie.

  • Treating selector specificity as the first cascade rule.

    A selector must match first, but origin and importance are considered before specificity.

  • Assuming !important simply adds strength to an ordinary declaration.

    It places the declaration in important precedence, where origin and layer orders reverse.

  • Assuming a normal rule in a layer overrides normal unlayered author CSS.

    Normal unlayered author declarations outrank normal layered author declarations.

Easily confused

selector matching vs. the cascade

Matching decides whether a declaration is a candidate; the cascade resolves competing candidates for a property.

normal declaration vs. important declaration

Normal and important declarations use different origin and layer precedence orders.

layer precedence vs. source order

Layer precedence is evaluated earlier; source order only resolves declarations that are otherwise tied.

Key vocabulary

cascade
The CSS process for choosing a value when relevant declarations compete for the same property on an element.
relevance
The requirement that a declaration's conditions apply and its selector matches the element before it can compete.
origin
The source category of a declaration, such as user-agent, user, or author styles.
important declaration
A declaration marked with !important, which uses important precedence rules.
cascade layer
A named or anonymous grouping of CSS declarations with an ordered precedence relationship.
order of appearance
The late cascade tie-breaker in which the last otherwise-tied declaration in document order wins.

Sources & references

  1. MDN Web Docs — Introduction to the CSS cascade — Mozilla / MDN Web Docs
  2. CSS Cascading and Inheritance Level 5 — W3C CSS Working Group

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.