meet it

When two rules disagree, the later one wins.

The browser reads rules from top to bottom. If two rules set the same property on the same element, the later one wins and overrides the first. This settling is called the .

Rules only clash over the same property. If one rule sets color and a later one sets background-color, there is no clash. The element gets both.

This explains a common puzzle: you change a colour and nothing happens. Look further down, because a later rule may be overriding yours.

<p>Which colour am I?</p>

p {
  color: blue;
}
p {
  color: red;
}

Press show my page to see it here.

Swap the two rules round and run it again to see blue win instead.

guess first

Two rules, two properties. What do you get?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<h1>Rainy day</h1>

h1 {
  color: white;
  background-color: gray;
}
h1 {
  background-color: navy;
}

your turn

Your turn. Have the last word.

Fill in a second rule for p that sets color to anything except orange. Because it comes later, it should win.

the page you’re styling

<p>My favourite colour changes every day.</p>

your css

Your code

Press show my page to see it here.

the words are no longer orangenot checked yet

fix it

Why will the heading not turn green? Fix it!

the page you’re styling

<h1>Go green</h1>

your css

Broken code to fix

Press show my page to see it here.

the heading is greennot checked yet

The first rule says green. Is there another rule further down?
The later rule sets color too, so it overrides the green.
Delete the second rule, then press run.

nailed it

you settled your first rule clash. :D

When rules clash, the later one overrides the earlier one.
Rules that set different properties combine instead of clashing.
Nothing changed? Look further down for a later rule.

new words in your collection

override
cascade

This lesson isn’t saved. A free account remembers every lesson you finish.