---
id: bad87fee1348bd8aedf06756
title: Override Class Declarations by Styling ID Attributes
challengeType: 0
videoUrl: 'https://scrimba.com/c/cRkpDhB'
---
## Description
We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put blue-text
before pink-text
in our h1
element's classes, it would still look at the declaration order and not the order of their use!
But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?
Let's override your pink-text
and blue-text
classes, and make your h1
element orange, by giving the h1
element an id and then styling that id.
## Instructions
Give your h1
element the id
attribute of orange-text
. Remember, id styles look like this:
<h1 id="orange-text">
Leave the blue-text
and pink-text
classes on your h1
element.
Create a CSS declaration for your orange-text
id in your style
element. Here's an example of what this looks like:
#brown-text {
color: brown;
}
Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
## Tests
```yml
tests:
- text: Your h1
element should have the class pink-text
.
testString: assert($("h1").hasClass("pink-text"), 'Your h1
element should have the class pink-text
.');
- text: Your h1
element should have the class blue-text
.
testString: assert($("h1").hasClass("blue-text"), 'Your h1
element should have the class blue-text
.');
- text: Give your h1
element the id of orange-text
.
testString: assert($("h1").attr("id") === "orange-text", 'Give your h1
element the id of orange-text
.');
- text: There should be only one h1
element.
testString: assert(($("h1").length === 1), 'There should be only one h1
element.');
- text: Create a CSS declaration for your orange-text
id
testString: assert(code.match(/#orange-text\s*{/gi), 'Create a CSS declaration for your orange-text
id');
- text: Do not give your h1
any style
attributes.
testString: assert(!code.match(//gi), 'Do not give your h1
any style
attributes.');
- text: Your h1
element should be orange.
testString: assert($("h1").css("color") === "rgb(255, 165, 0)", 'Your h1
element should be orange.');
```
## Challenge Seed
## Solution