Web Analytics

CSS Overrides: It’s !Important

by Jason Unger, Founder

Let me first apologize for the lame title of this post. There must be something that all journalism students gradually pick up over the four years of their studies at college where we naturally come up with dumb, punny titles for the articles we write.

Anyway.

I want to talk a bit about CSS. It’s not something we normally delve too much into, but given that it’s the basis for the formatting of almost every web site on the Internet, it’s worth discussing. If you’re unfamiliar with CSS, you’re not going to learn about it in this post. Instead, go read the Wikipedia entry and then do the tutorials at W3Schools.

What we’re going to talk about is the use of !important.

If you’ve ever written, edited or hacked around with CSS before, you’ve likely seen the !important declaration. Essentially, !important overrules a declaration adjusting the same property, even if it is declared earlier in your CSS file.

Here’s an example. If we were to set two body fonts in a normal fashion, the last one declared would be the one your browser uses.

body {
font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, serif;
}

Your page would use the Georgia font, and ignore the Arial font declaration.

But if we wanted to ensure that Arial was used, we could force the browser to use that font by adding !important to the end of the line, as so …

body {
font-family: Arial, Helvetica, sans-serif !important;
font-family: Georgia, serif;
}

This way, Arial will be your font, and Georgia will be ignored.

Why Would You Do This? And What Does it Have to Do With WordPress?

Now, the obvious question with the example above: why not simply delete the declaration of the Georgia font? Yes, in that example, that’s what you should do.

But in some cases, you may not be able (or want) to simply delete the styles you aren’t using.

If you’re using multiple stylesheets, and for whatever reason you can’t adjust a stylesheet that is being called AFTER your main stylesheet, you can use !important to be sure your style is applied. Oftentimes, with WordPress, this happens with plugins; if you’re loading a plugin that has a stylesheet attached to it and you want to change the visual appearance of whatever that plugin does (but the plugin’s CSS file is loaded after yours), you should use !important to lock in your styles.

It’s not the prettiest solution, but it’s better than updating the plugin’s files (which could easily be adjusted or have changes undone when it’s upgraded).

Here’s a couple of other tidbits about !important:

  • If you have more than one !important declaration on a particular element, the last one called will be the one applied
  • !important has no affect on styles applied to content brought in via an iframe — you can’t overwrite those formatting options without going straight to the iframe source styles

The general rule of thumb is that, if you can avoid using !important, do it. But if it’s potentially going to break your upgrades, or you have no other choice, then use it.

Avatar photo
About Jason Unger

Jason Unger is the Founder of Digital Ink. He built his first website on Geocities, and hasn't looked back since. Digital Ink tells stories for forward-thinking businesses, mission-driven organizations, and marketing and technology agencies in need of a creative and digital partner.

Other Stories You May Like

What’s your story?

Let’s share it with the world.

Let’s Do This

Close Window
All the Cool Kids are Doing it

Sign Up for the Digital Ink Newsletter

All the cool kids are doing it.