How to overide inline styles

This is an old trick now but might still be useful for people that work on CMSs. There could be all sorts of CSS saved inline in the markup. This is how you tame it.

.targetElement[style] { font-weight:normal!important }

<p class="targetElement" style="font-weight:bold">This has a hardcoded inline style, making the font stuck in bold</p>

Inspect me

Inspect me

.targetElement { font-weight:normal }

Here the .targetElement { font-weight:normal } has less specificity than the inline style.

.targetElement[style] { font-weight:normal }

Adding the attribute selector [style] means target the class targetElement that has an inline style attribute. This makes the targetElement selector a slightly less specificity than the inline style, so the inline style still wins.

.targetElement[style] { font-weight:normal!important }

Adding !important means the version with [style] overwrites any other matching style, including the matching inline style, so it wins.

It isn't possible to overide inlines styles with !important without using JS.

I have used this in email development to serve basic styling inline to Outlook, then overide and have a mobile layout in a <style></style> block.