Every so often I find myself dealing with a project which contains existing HTML which I have to style without being able to edit it. While that is already less than ideal, finding inline CSS in that HTML can become a real problem. Luckily there are several tricks you can use in cases like that.

Overwrite inline style

Overwriting inline style is a trick I have known and been using for a while. See the example below, add [style] to the selector and use !important.

<body>
<h1>Lorem ipsum</h1>
<p style=”color: white;”>Lorem ipsum dolor sit amet.</p>
</body>

p[style] {
color: black !important;
}

In the example above, the text will be displayed black despite the inline style.

Overwrite based on inline style

The following trick is new to me, but I have found it to be very useful already. If you add [style] to a selector and then also add the inline style you want to target, you can overwrite CSS more specific. Again, don’t forget to add !important too.

<body>
<h1>Lorem ipsum</h1>
<p style=”color: white;”>Lorem ipsum dolor sit amet.</p>
</body>

p[style=”color: white;”] {
color: black !important;
}

In the example above, the CSS will overwrite the HTML element only when it has the inline style.