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;

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#, ASP.net, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

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 )

Facebook photo

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

Connecting to %s