The importance of !important

So what’s so important about the !important directive? Whatever has the !important directive gets priority when rendering the page.

When a browser reads CSS, it reads it from the top down. So if you have two background color’s for the same div, the last background declaration is rendered.

#content
{
    background:#000000;
    background:#FFFFFF;
}

In this case, the background of the div “content” will be white, #FFFFFF.

However, if !important is added to the first background declaration, then that color gets priority and is rendered no matter what comes after.

#content
{
    background:#000000 !important;
    background:#FFFFFF;
}

So in this case, “content” will end up having a black, #000000, background.

This example isn’t really a practical use of !important though. I mean, if you wanted the background to be black, just take out the white declaration.

But, if you had a specific page with a “content” div that you wanted to be white while the rest of the page is rendered regularly, then you could use another CSS file. In this SECOND CSS file, this is where you put:

#content
{
    background:#FFFFFF !important;
}

This way, white gets priority when rendering the page. *Remember to still include the first CSS file*

This can be useful sometimes, but I don’t really use it too often because IE6 and lower sometimes ignores this. So in IE6, if you used that second CSS file, it wouldn’t render “content” with a white background.

What we can do is use this as another hack for IE6.

If you haven’t noticed, there are sometimes some pixel differences in positioning, padding, etc between IE and the rest of the browsers. To solve this, you could apply the !important directive to the properties that you don’t want IE to see.

But be careful of this hack because, like the *html hack, IE7 recognizes this.