— the quiet algorithm behind every style

CSS looks simple on the surface:
we write a rule,
the browser applies it.

But underneath that simplicity
is a small, steady →decision‑making process
called the 'cascade'.

The cascade is how CSS →answers the following question:

“When multiple rules
want to style the 'same thing',
which rule
should CSS listen to?”

— Everything in CSS flows from this question.

When two or more rules apply to the same element,
CSS evaluates them in a specific order:

1. Where the rule came from
   (browser → user → author → important)
2. How specific the selector is
   (element < class < id < inline < important)
3. Which rule appears last
   (later wins over earlier)

That’s it.

Three quiet forces
deciding which instruction wins.

This is why AI sometimes
generates CSS that “does nothing”
—the cascade silently overrides it.

Once we understand this,
we can guide AI:

“Increase specificity.”

“Avoid using IDs.”

“Make this rule win without using !important.”

 “Place this rule after the others.”

CSS is literally named after this idea:
Cascading Style Sheets.

Styles flow downward, like water:

• from the browser’s defaults
• to the user’s preferences
• to our local stylesheet
• to the last rule that applies
  probably in the HTML code itself.

Each layer can override the one above it.

This is why the cascade feels natural once we see it
— it behaves like gravity.

Let's imagine a waterfall
with several tiers.

Water flows downward. So do styles.

If two streams collide, the one lower in the waterfall wins —
unless a higher stream has more force (specificity).

This analogy is enough
to understand 90% of CSS behavior.

We don’t need to remember:

• the exact specificity formula
• the order of origins
• the weight of inline styles
• the details of !important

We only need to remember the shape:

Origin → Specificity → Order

Whenever something “doesn’t work,”
one of these three forces is deciding against us.

And once we know that, we can ask AI:

“Why is this rule losing the cascade?”

“Which selector is more specific?”

“Rewrite this rule so it wins without !important.”

We’re not fighting CSS — we’re collaborating with it.

We've already introduced the five forces:

• cascade
• specificity
• inheritance
• flow
• context

The cascade is the first because it’s the referee.
It decides which rule even gets a chance to apply.

Everything else
— layout, inheritance, context —
only matters after the cascade chooses the winning rule.

This is why understanding the cascade
is the first step
to writing CSS with confidence
and guiding AI with clarity.

CSS is always deciding which instruction to listen to.
The cascade is how it makes that decision.

Once we see this, CSS stops feeling random.
It becomes a conversation we can participate in —
and guide AI through — with calm and intention.

• Suggested Next Reading: Specificity — The Weight of a Selector

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←