!important not overriding element declarations

Hello world!

Oops, I mean… Hello awesome community!

I finally gathered some courage to let my work aside a bit and dive in FreeCodeCamp again.

Well, revisiting the lesson “Basic CSS: Override All Other Styles by using !Important” — Finishing the lesson was no biggie, but I went a bit further and tried using !important at “body” element and it did not override the ID and classes declarations. Enlightenment, please?


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

Hello World!

'

Curiously, I also tried creating a new h1 declaration at the end of the CSS, and when using “!important”, it worked. I’d really want to know why.

I have this hunch that it is related to the code position, but I don’t think my guts can be trusted yet :sweat_smile:.

Because it is an inherited style.

Directly targeted elements vs. inherited styles

Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.

Short and objective, I like that. Thanks for taking your time.

A comment session inside the lessons would be awesome to provide additional info. Comments not upvoted or downvoted could be periodically removed by default.

On the one hand, I kind of like that idea, but it also goes against one of the core principles of not to “interrupt the flow”.

Writing instructions

Don’t use outbound links. These interrupt the flow. And campers should never have to google anything during these challenges. If there are resources you think campers would benefit from, add them to the challenge’s Guide-related article.

I guess it might be cool if after you had passed the challenge, it would show the top voted forum thread on the subject. But that would still potentially be disruptive and I’m not sure just how useful it would be.