Cascade

CSS Cascade Summary

The cascade is the browser’s process for deciding which CSS value wins when more than one rule tries to style the same thing.

CSS often has several rules that could apply to one element. The cascade compares those rules so the browser can choose one final value for each property.

p {
	color: blue;
}

p {
	color: green;
}

Both rules target paragraphs. Because they have the same strength, the later rule wins and the paragraph text becomes green.

Later Rules Can Override Earlier Rules

When two matching rules have the same specificity, the rule written later in the CSS wins.

.notice {
	background: yellow;
}

.notice {
	background: lightblue;
}

The notice background becomes light blue because that declaration comes later.

More Specific Selectors Can Win

Specificity is how strongly a selector points to an element. A class selector is more specific than an element selector.

p {
	color: blue;
}

.intro {
	color: red;
}

A paragraph with class="intro" becomes red because the class selector is more specific than the plain p selector.

Some Values Are Inherited

Inheritance means some styles pass from a parent element to the elements inside it. Text properties such as color and font-family commonly inherit.

main {
	color: navy;
}

Paragraphs inside main can become navy even if no rule targets the paragraphs directly.

Use The Cascade Deliberately

When a style does not appear, check whether another rule is more specific, written later, or inherited from a parent. The CSS Selectors lesson explains the selector side of this problem.