Sam's infrequently-updated cabinet of curiosities
Wednesday, 12 July 2006

!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!