---
id: bad87fee1348bd9aedf07756
title: Override All Other Styles by using Important
challengeType: 0
videoUrl: 'https://scrimba.com/c/cm24rcp'
---
## Description
Yay! We just proved that inline styles will override all the CSS declarations in your style
element.
But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important
Let's go all the way back to our pink-text
class declaration. Remember that our pink-text
class was overridden by subsequent class declarations, id declarations, and inline styles.
## Instructions
Let's add the keyword !important
to your pink-text element's color declaration to make 100% sure that your h1
element will be pink.
An example of how to do this is:
color: red !important;
## 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: Your h1
element should have the id of orange-text
.
testString: assert($("h1").attr("id") === "orange-text", 'Your h1
element should have the id of orange-text
.');
- text: Your h1
element should have the inline style of color: white
.
testString: assert(code.match(/h1 element should have the inline style of color: white
.');
- text: Your pink-text
class declaration should have the !important
keyword to override all other declarations.
testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), 'Your pink-text
class declaration should have the !important
keyword to override all other declarations.');
- text: Your h1
element should be pink.
testString: assert($("h1").css("color") === "rgb(255, 192, 203)", 'Your h1
element should be pink.');
```
## Challenge Seed
## Solution
```js
// solution required
```