Override All Other Styles by using Important in body css

HTML-CSS
1

Tell us what’s happening:

why am i not able to override all other styles by using !important in body css style selector?

Your code so far


<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green !important;
  }
  #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>
2

What color text are you expecting it to be?

3

This have precedence

4

sorry i forget to remove that, even if i remove !important in class .pink-text { color: pink !important; } iam not able to get body styles body{color: green !important;}

5

i am expecting green color. sorry i forget to remove !important in pink-text class,even though after removing !important in pink-text class iam not able to get green color.

6

It is a little weird but directly targeted elements take precedence over inherited styles.

The h1 is being directly targeted by the inline style so it takes precedence over the inherited style from the body. If you give the h1 its own selector the !important will work.

h1 {
    color: green !important;
  }
7

okay,so in that sense !important doesn’t work to override for inherited styles when the elements are directly targeted.i worked on it, I hope this program make sense

type or paste code here
<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green  !important;
  }
  h1{
    color:yellow;
  }
  #orange-text {
    color: orange ;
  }
  .pink-text {
    color: pink  !important;
  }
  .blue-text {
    color: blue ;
  }
  .teal-text{
    color:teal !important;
  }
  .red-text{
    color:red;
  }
  
  
</style>
<h1 id="orange-text" class="pink-text blue-text " style="color: white ;">Hello World!</h1>
<h1>Hello again</h1>
<h2 class="red-text teal-text">h2 element in teal</h2>
<h2>h2 element in green color</h2>