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.
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.
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.
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.