CSS Cascade Summary

The CSS cascade is the system the browser uses to decide which style applies when more than one rule targets the same element.

.box {
	background: lightblue;
}

.box {
	background: blue;
}

Both rules target the same element with the same strength, so the later rule wins.

More Than One Rule Can Match

An element can be targeted by several CSS rules at the same time.

p {
	color: black;
}

.message {
	color: blue;
}

#warning {
	color: red;
}

A paragraph with the class message and the ID warning matches all three rules. The cascade compares the rules and decides which one wins.

Later Rules Win When Strength Is Equal

When two rules have the same specificity, the rule that appears later in the CSS wins.

.card {
	background: lightblue;
}

.card {
	background: blue;
}

The second rule appears later, so the card has a blue background.

This is called source order. It is one of the simplest parts of the cascade.

Specificity Measures Selector Strength

Specificity is the strength of a selector. A more specific selector usually wins over a less specific selector, even when the less specific rule appears later.

div {
	background: lightblue;
}

.card {
	background: blue;
}

The class selector .card is more specific than the element selector div, so the class rule wins.

The CSS selectors lesson explains how selectors target HTML elements.

A Simple Specificity Order

For beginner CSS, this order explains most conflicts:

Element selectors such as p or div.
Class selectors such as .card.
ID selectors such as #featured.
Inline styles written directly in the HTML.

Each step is generally stronger than the one before it. When selectors have the same strength, source order decides the winner.

ID Selectors Are Strong

An ID selector is more specific than a class selector.

.card {
	background: blue;
}

#featured {
	background: navy;
}

If the same element has the class card and the ID featured, the ID rule wins.

Strong selectors can make CSS harder to override. Classes are usually easier to reuse and maintain than IDs.

More Specific Selectors Can Combine Parts

A selector becomes more specific when it includes more information about the target.

.card p {
	color: blue;
}

.card .warning {
	color: red;
}

The second selector targets an element with the class warning inside an element with the class card. It is more specific than the first selector.

Inline Styles Usually Win

An inline style is written directly inside an HTML element’s style attribute.

<p class="message" style="color: red;">Important message</p>

The inline color usually wins over normal rules in a stylesheet. Inline styles are difficult to reuse and override, so most site styling should remain in CSS files.

Some Properties Are Inherited

Inheritance lets some CSS properties pass from a parent element to the elements inside it.

.card {
	color: blue;
}

Text inside the card may inherit the blue color when no more direct color rule targets it.

.card {
	color: blue;
}

.card p {
	color: black;
}

The paragraph uses black because a direct rule overrides the inherited color.

Properties related to text, such as color and font-family, are often inherited. Properties such as margin, padding, borders, and backgrounds usually are not.

Important Overrides Normal Rules

The !important keyword gives a declaration more priority than normal declarations.

.message {
	color: red !important;
}

This can solve an immediate conflict, but it often creates a harder conflict later. Use !important only when you understand why the normal cascade is not sufficient.

How To Find The Winning Rule

When a style is not applying, check the matching selectors in this order:

Confirm that the selector matches the element.
Look for a more specific selector.
Look for another rule later in the stylesheet.
Check for an inline style.
Check whether !important is being used.

Browser developer tools can show which rules matched, which declarations were crossed out, and which declaration won.

Keep The Cascade Simple

The cascade is easier to manage when selectors remain simple and related rules stay close together.

Prefer reusable classes, avoid unnecessary IDs and inline styles, and add !important only when there is a clear reason.

Cascade