Override Inline Styles with CSS

This damn juicy CSS trick has been around for a while now, but I wanted to make a special post sharing it again to spread the good word.
Often we think of inline styles as a way to override styles we set up in the CSS. 99% of the time, this is the case, and it's very handy. But there are some circumstances where you need to do it the other way around. As in, there are inline styles on some markup that you absolutely can't remove, but you need to override what those styles are. This could be markup that is being inserted onto the page from foreign JavaScript or perhaps generated from the bowels of a CMS that you cannot control easily.
Thank our lucky stars, we CAN override inline styles directly from the stylesheet. Take this example markup:

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

We can fight that with this:

div[style] {
   background: yellow !important;
}

from: http://css-tricks.com/override-inline-styles-with-css/