!important and inline styles

More for the “yet another thing I would’ve already known if I’d bothered to read the spec” file: you can override inline styling — including <font> tags — from a CSS stylesheet.

A rule’s precedence is determined by its specificity, and an inline style’s specificity is very high. But !important rules take precedence over everything.

If stuck with HTML like this, for example:

<p style="font-color: pink;">I love pink!</p>

It’s still possible to override it with an !important rule:

p {
    /* I hate pink. */
    color: black !important;
}

And yes, it even works with <font> elements. If faced by some ghastly, antediluvian monstrosity of a web-page, a hideous Lovecraftian twisting-together of content and presentation newly crawled from a dark pit at the far edge of the Web –

<p><font color="pink">Pink! And Ponies!</font></p>

– it can be easily dealt with:

font {
    color: black !important;
}

Or, with a browser capable of more advanced selections…

font[color="pink"] {
    color: black !important;
}

It doesn’t seem like a particularly useful thing to know, but it’s a godsend for styling other people’s nasty HTML. In my case, the particular problem was that LiveJournal’s dynamically-generated quick-reply form contains this:

<table style="border: 1px solid black;">

Dealing with S2 is bad enough without further frustration on the CSS front, and I really hated that border. Hooray for !important!

   
This entry was posted on Wednesday, July 12th, 2006, in the categories “design”, “CSS”, “s2” and “LiveJournal”.

Thus far, one response.

Considered Russell:

Wow. Here I a stopped by to see about the little diff system you cooked up for the versioning plugin and low and behold I actually learn something new about CSS! Personally, that’s why I never read the specs. People like you do and then blog about it ;) All hail sloth!

Leave a Reply