Override All Other Styles by using !Important in the body style

HTML-CSS
1

Tell us what’s happening:

Hi,

Does anyone know why !important doesn’t work when placed in the body style? It works in the h1 style.

Thanks.

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>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/override-all-other-styles-by-using-important

2

I think this is what you are asking about

1 Like
3

Thanks - makes sense in that the !important will only work in directly targeted styles?

4

Well !important does work, but any directly targeted element styles will take precedence.

directly targeted element will always take precedence over inherited styles

1 Like
5

Thanks - I’m just trying to replicate a scenario where !important works on the body style color but with no luck

6

I just mean that technically it does work, it just doesn’t really do anything, if you get my point. The body is the directly targeted element and !important does work on it but any other element that has styles applied to it will just not “care” and their directly applied styles will take precedence.

You are right in your initial assumption. I didn’t mean to be confusing, sorry.

1 Like
7

Nope you’re making sense, kinda what I thought - thanks for clarifying