Styling foundations · Lesson 2 of 17

Cascade and specificity

Understand why one declaration wins.

8 minutes2 games

When declarations compete, the cascade resolves them. Origin, importance and layers come before specificity; source order resolves a tie. Within the same context, an id outweighs a class, which outweighs an element selector. Some properties such as color inherit; margin does not inherit by default.

HTML

<style>
  p { color: green; }
  .message { color: blue; }
  .message { color: purple; }
</style>
<p class="message">Which rule wins?</p>

Origin, importance and layer

Specificity

Source order on a tie

Quick question

What is the final color in the example?

Exercise

Use .note to make the paragraph blue despite the red p rule.

HTML

<style>p { color: red; }
/* add a rule */
</style>
<p class="note">Note</p>

Learn more from

Played 0 of 2 games

CSS

Styling foundations · Lesson 2 of 17

Cascade and specificity

Understand why one declaration wins.

8 minutes2 games

HTML

<style>
  p { color: green; }
  .message { color: blue; }
  .message { color: purple; }
</style>
<p class="message">Which rule wins?</p>

Origin, importance and layer

Specificity

Source order on a tie

Quick question

What is the final color in the example?

Exercise

Use .note to make the paragraph blue despite the red p rule.

HTML

<style>p { color: red; }
/* add a rule */
</style>
<p class="note">Note</p>

Learn more from

Played 0 of 2 games