Override Inline Styles with CSS (!important)

Ideally you shouldn’t use inline styles, If you’re faced with a situation where they exist and you’d like to override the inline css with that from a stylesheet you can do so using !important.

CSS:

#example p {
    color: blue !important;
}

HTML:

<div id="example">
  <p style="color:green;">This paragraph has an inline style</p>
</div>

In the above example, the paragraph will have blue text and not green as in the inline style because of the !important declaration in the CSS.

Note: Internet Explorer 6 will apply whatever the last style declared is, and takes no notice of !important declarations.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s