I am not able to use Important in h1

HTML-CSS
#1

Let me know how could i do this.

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
  .pink-text{color: pink !important}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/override-all-other-styles-by-using-important

#2

You’re super close with your solution. You’re adding the !important in the correct way but in the wrong place. Reset your code and take a look at the styles that were there previously. Where do you think the !important should go with just those styles?

#3 
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

this is the code now where i have to place this important…I am trying to placed it with pink text but code is not running.

#4

It now run successfully. Thanks for the help

1 Like
#5