Search⌘ K
AI Features
Home
Courses
Learn HTML, CSS, and JavaScript from Scratch

Introduction to the Cascade

Explore how CSS uses the cascade to manage conflicts when multiple style rules affect the same elements. Understand how rule order and hierarchy influence which styles are applied in web design.

We'll cover the following...

Cascading style sheets

What exactly does cascading mean? To answer this question, let’s start with an exercise.

Exercise

Add CSS, and write two rules:

  1. Select for p elements, and give the rule a color property with the value blue.
  2. For this rule, select for p elements again, and give it a color property with the value orange.

Take a moment and answer the following question before proceeding further.

With these rules in place, what color will p elements be?
  • HTML
html
Test your learning 
As shown by this example, order matters when creating CSS rules. If there are multiple CSS rules for the same element (and the same property), a hierarchical cascade is responsible for determining which one gets selected and applied to the element.


In the exercise you just did, the cascade selects the p element’s color based on the last rule present in the set of CSS rules. In other words, the second rule overwrites the first rule since they both select for the same element and the same property.


This cascade has a somewhat complex set of rules.


Test your understanding


1.
What will happen if we include a div and a p element on an HTML page with the following CSS rule definitions?


div {
  color: orange;
}

p {
  color: blue;
}



A.
Both div and p elements’ text will be blue since the cascade will select for the last rule present.


B.
Both div and p elements’ text will be orange since the cascade will select for the first rule present.


C.
The div element text will be colored orange and the p element text will be colored blue.


D.
Neither the div nor the p elements’ text will be colored since the CSS definitions are not correct.


1 / 2