Last night, I wrestled with my CSS and it won.
FAIL!
The solution was found in the so very important, !important.
Like most CSS, if you don’t use the rules right, it can turn a style-sheet into a nightmare. On the flip-side, if you follow the rules, your style-sheet is functional and works like a well oiled machine.
So what was my problem last night?
I didn’t fully understand the use of !important.
Once I was fed the correct piece of code this morning, my style-sheet was fixed!
Here is an example of how !important works and why you should be careful with it. It turns out, knowing about !important is important 😉
Let’s say you drop this into your style-sheet:
[cc lang=”css”]p {
color: red !important;
}
#something {
color: blue;
}[/cc]
And this into your HTML:
[cc lang=”html”]
This will be RED.
[/cc]
Even though the ID selector has higher specificity, the powerful !important rule overrides it. No matter what you do, you’re not going to make the text blue.
That’s how !important works.
It’s like a NUKE option. Place in the correct hands, it can turn a style-sheet into something magical. Left to a newbie hack – ahem – it can lead to late nights wresting with code.
I won’t name any names.
CSS-Tricks goes over some of the good and bad of !important. I recommend the read to those who are new to the very important !important.
[via CSS-Tricks | HT: Michael Novotny totally saved my bacon. This is why having a Support License on any 8BIT premium theme is so worth it!]
James Cooper says
Nice! I had to !important a font size today in a responsive design (to get the mobile design working properly). I do feel you need to do an evil laugh after using !important though…
Eric Dye says
😈 Mwah-ah-ah-aahhhhh!
Eric J says
I use the following to reset styles when people paste stuff from word in our CMS.
/* override inline styles */
span[style]{
color: inherit !important;
font-size: inherit !important;
}
p[style]{
color: inherit !important;
font-size: inherit !important;
}
div[style]{
color: inherit !important;
font-size: inherit !important;
}
Eric Dye says
That’s some good stuff, man! Thanks!
Ben says
You totally stole my article that I have had in “draft” for about three months now.
Thank you for posting this so I don’t have to worrying about finishing mine. 🙂 !important
Eric Dye says
😀