CSS: overriding inline styles

Overriding inline styles is quite simple. Let's say that you have a paragraph like this:

<p style="color: red;">Test</p>

and a style rule like:

p {
  color: blue;
}

The paragraph's text is still red because of the specificity of an inline style rule. CSS specifications say that this kind of CSS rules have an higher priority than other rules. So if you want to override it, you have to use the !important statement, like so:

p {
  color: blue !important;
}

Is this tip useful? Well, imagine the case of a Blogger gadget, where most of the styles are inline. If you take a look at the source code of your page, you'll probably find out all the elements affected by inline styles. By using the !important statement, you can easily override them and get the visual effect that you want.

Leave a Reply

Note: Only a member of this blog may post a comment.