Override Inline Styles

Why would you want to overwrite in-line styles? The most common reason I can think of is when a CMS or plugin automatically posts in-line styles to it's output.

Previously, I blogged about CSS Specificity, where I mentioned in-line styles will take priority over all other CSS. However, there is a way to overwrite in-line styles, which I’ll talk about in this article.

Why would you want to overwrite in-line styles? The most common reason I can think of is when a CMS or plugin automatically posts in-line styles to it’s output.

Overwriting an in-line style is really easy look at this example:

div[style] {
   color: red !important;
}

The [style] will grab and overwrite the inline styles. Note this trick doesn’t work with IE6.

Reference

• CSS Tricks - Override In-line Styles with CSS
• Natalie Jost - Override Inline Styles
• Sohtanaka - Override inline styles