Normally I write my own tutorials, however, the purpose of declaring !important in CSS is a bit tricky to explain. Rather than writing my own confusing and vague explanation of it, I’ll let someone else do it better.

What does !important mean in CSS? from About.com

However, I will expand upon this article a bit as there is one thing that it fails to mention – how !important works with inline styles. Most of the default CSS on Subeta is defined in external stylesheets: separate documents for the CSS that are linked in each page. This makes overriding it with our own CSS fairly simple. Our CSS appears as an internal stylesheet, which for the most part takes precedence over the external ones. However, there are some instances of inline styles on Subeta. Pretty much the only way to override an inline style is by making use of !important, because inline styles take precedence over all other styles. The cascade works like this:

1. External stylesheets are linked near the very beginning of the HTML document. They are therefore the first styles to load.
2. Internal stylesheets are loaded directly after the external ones. Therefore they can override the external stylesheet.
3. Internal styles appear directly in the HTML. Since they appear last, they have the most importance and override everything else.

I’ll give you an example of this on Subeta. On pet profiles, there is an inline style that sets the height of the #content div. It appears directly in the HTML:

<div id="content" style="height: 1773px;">

That means that the only way to override that code with our own CSS is to add !important.

#content {
height: 500px !important;
}

I think there is a common misconception on Subeta that if a person’s CSS code isn’t working, adding !important to it will automatically make it work. That usually isn’t the case, and hopefully this post helps clear up some of that confusion about when to use it.

As always, comment on this post if you have any questions or comments!