freeCodeCamp Challenge Guide: Override All Other Styles by using Important

Guide
1

Override All Other Styles by using Important

Problem Explanation

You can override all other styles in CSS by using !important.

This override is considered the most important and takes precedence over the rest.

The list of most important to least important is as follows:

  1. important (!important)
  2. inline styles
  3. id declarations
  4. class declarations

Here is an example of how to write/apply !important:

color: black !important;

To apply these in context and see !important take precedence, here is an example:

<style>
  body {
    font-family: Helvetica;
    color: purple;
  }
  #violet-text {
    color: violet;
  }
  .black-text {
    color: black !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="violet-text" class="black-text blue-text" style="color: black">Example Text</h1>

This result would end in Example Text being black because of !important added to color: black.

5 Likes
2

Hello

I have been working on this challenge (challenge 58) and it is saying that i have not done a step when i believe that i have

it is saying that i have not put in the !important after pink in pink-text

plz help

body { background-color: black; font-family: Monospace; color: green; } #orange-text { color: orange; } .pink-text { color : pink !important; } .blue-text { color: blue; }

Hello World!

5 Likes
3

i just put that in for mine & it works.

2 Likes
4

same problem any suggestions

5

That appears to be correct. Since we are modifying the class statement I would look at the class call in the h1 brackets for the error.

6

I have the same problem… with only some people having the problem I think its a spelling error. This program is very sensitive.

1 Like
7

I GOT IT!!! DO A LOWER CASE “I” Example: !important NOT !Important

8

Had the same problem. Do a small cap for “!important” and make sure there is no space between “!important” and the semi-colon. That should give you the swoosh

1 Like
9

**Just write it as it appears in the instruction, no space no Cap and it should be in the same line ! ** color:pink !important;

1 Like