CSS: Override Inline Styles from Stylesheet

Normally inline styles within your html markup is a way to override more global stayles which you have set within your stylesheets. Well if you have been developing within 3rd party CMS systems or 3rd party controls for any length of time you must have run into a situation where styles exists which you cannot alter because they are wrapped up in the 3rd party markup. In cases like this there is a very useful CSS option we have which allows us to do the exact opposite, we can actually set styles in our stylesheets which will override the more specific inline styles. 

This is done by adding some extra info to our CSS selectors. We simply add the [style] psuedo selector to our CSS class within the stylesheet. See the example below.


This inline style now gives us a blue rectangle with red text. Which is extremely hard to read.

With the use of the psuedo selector we can now override the inline style with this.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s