Question Regarding !important tag

Question Regarding !important tag
0

#1

I’m currently working on the Tribute Page project and I ran into a weird situation that I don’t quite understand.

Here’s the link to my project: https://codepen.io/mjohns09/full/rYVqGQ.

I was attempting to change the font color of my h1 element to white and I was forced to add the !important tag. And quite, honestly, I’m not quite sure why.

I’m glad I was able to change the font color but I really want to understand why.

Hope someone can enlighten me!

Thanks!


#2

I believe because jumbtron has a predefined color. You have to make sure to override it with !important.

And just for clarification, all of that stuff in your <style> tags should be in the css pane - that is how codepen does it. And bootstrap should be loaded through settings/css/quick-add.

I think fonts are loaded in your css pane with:

@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

Codepen is a little odd. In your html, there should only be what would ordinarily be in the <body> tag, with out the tags surrounding it.

In a way it’s a good thing because it teaches you to separate your concerns.


#3

jumbotron class overrides the h1 color property with “inherit” value … which then takes the body tag color to be also the text color for h1 inside the jumbotron class – thus the gray color.

If your H1 wasn’t inside the jumbotron, then you won’t even need the !important modifier. So by using !important, you’re overridding the “inherit” value for color, and instead substituting your own value.


#4

It’s a matter of specificity.

Bootstrap has this inside it:

.jumbotron h1,.jumbotron .h1{
   color:inherit
}

If you do

h1{
  color: white;
}

It’s not as specific so it doesn’t apply.

.jumbotron h1{
   color: white;
}

would work without using !important because it’s the same specificity but it occurs in a later stylesheet.


#5

Not an answer per se, but a suggestion. If you want to find more about an element you can find in the Debugging window, in the elements tab. Just navigate through the code displayed on the right until you get to the element (h2 in this case) and then on the right window you will find a style tab that shows what style settings the element has and, important in this case, what styles are overridden (they are struck through).
Here is a presentation of this feature.
That is not going to work for code in Codepen (and you should not be writing code in Codepen to begin with) and JS files might make the situation more complicated if you are changing styles with JS or JQuery, but it is still pretty useful.