The !important Use In CSS

Sometimes we must isolate out specific versions of IE that give us grief as developers. There have been many discovered avenues in isolating certain versions of IE out of our style scheme to give specific instructions to, but none are as subtle as the !important. That’s right the !important use is for IE related issues ONLY! Aside from the ridicules fact that we have a procedure to make this one browser obey our code, let’s look at how the !important procedure works and can help us.

!important is basically giving importance to a style over all other browsers except IE6 and below. IE6 and below can’t recognize it, therefore skips over our style and hunts for another of its kind. Again because we are giving our style importance, all other browser will do the opposite and only read our important style and skip over any others.

So let’s say we want all browsers except IE6 and below to give an element a width of 500 pixels, but in IE6 and below we want this same element to have a width of say 502 pixels. We would simply use the !important helper as follows:

#element {width:500px !important; width:502px;}

Simple as that folks, now everyone in browsers who are IE6 and above equivalence will see this element at a width of 500 pixels while IE6 and below will receive our 502 pixels.

That was painless right?

Devin R. Olsen