Override Inline Styles

Last Updated: Feb. 18th 2022 at 6:52pm Tags: blog css

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

Comments

You need to login to comment.