Overwrite Inline Styles with your CSS

Usually we think of inline styles as a way to overwrite styles we set up in the CSS file. 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 SugarCRM, WordPress, Joomla, there are inline styles on some markup that you absolutely can’t remove, but you need to overwrite 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 framework that you cannot control easily. In this case, we CAN overwrite inline styles directly from the stylesheet. Here’s an example:

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

You can write this style in .css file

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