!important

This issue was fixed in the second Internet Explorer 7 beta 2 release.

No, I am not telling you that you must read this, I am talking about the !important CSS priority. This is essentially a shortcut to increase the specificity of any declaration. If that all just sounded like gibberish to you, don't worry, I will explain. You open a page that uses a really ugly or inaccessible set of styles, that makes it very hard to read. You have a few choices. You can either disable styles (good luck doing this in IE - it is a registry hack), manually edit the source (no, not possible in IE either), use a user stylesheet, or just live with it the way it is.

Yes, like the other browsers, IE allows you to make user stylesheets. You make your own stylesheet, tell the browser to use it, and it will apply it to every page you visit. Great. Except you may not know the structure of all the pages. You might put
* { color: #000; }
but what if the page uses
div p { color: red; }
Well, you can get lost in an endless struggle to find exactly what each page is using to target its contents, and you can try using more specific styles. But the idea is to make the pages more accessible, not to force yourself to work twice as hard and waste large amounts of your time to see the pages. Every other browser allows you to use a simple alternative; !important. This tells the browser that you don't care what the page author said. You want it to listen to you, and apply this rule in preference to all the others, no matter how specifically they target the contents.
* { color: #000 !important; }

I hope I haven't misled you here. User stylesheets is not the only thing that this can be used for. Say, for example, that you use a main stylesheet for many pages on your site. Now say you have to make one page different. You still want to use most of the main styles, but you want to tailor just a few to suit this page. Unfortunately, the main stylesheet is a couple of hundred lines long, and fairly specific, so you keep finding that even though you try to target the elements correctly, you are finding it difficult to target just the ones you want, because the main stylesheet keeps overriding you. The easy thing to do is to use !important priority to force your new styles to be the ones that are used.

Yes, it is that easy. Or at least it should be, but IE will completely misinterpret the statement, either by ignoring it or applying the wrong one (the one without the !important priority). Great. Nice effect. Oh well, who wants to be nice to disabled users? Who wants to make it easier to combine stylesheets, but ensure a good effect? According to IE, none of us do, even though this priority has been in the CSS standard since before IE 4.

Demo:

These two paragraphs should be written with the same font and styling as each other.

These two paragraphs should be written with the same font and styling as each other.

Workaround: For user stylesheets, there is very little you can do except try to make your element selectors as specific as possible. For combining stylesheets, you will simply have to examine the main stylesheet file, and work out which styles will cause problems with all the possible combinations and permutations of your document, then make your selectors more specific to match. Or if you want to make it really difficult to maintain, litter your code with inline style attributes, that force the elements to use the correct style - too bad if there are hundreds of them.

Don't click this link unless you want to be banned from our site.