Override in-line CSS styles using the !important keyword

May 4, 2012 - 1 minute read -
css styling inline important inheritance cascade override

It’s possible to override in-line CSS with CSS from a user style sheet. By default, CSS styling set in a HTML document takes precedence over a user style sheet. However, we can overcome this by using the !important keyword.

The following HTML example has a in-line CSS style to set the width to 100px.

<table class="MyTable" style="width: 100px;">

Normally to style the table element, we’d use the following:

.MyTable {
    width: 200px;

However, as the style is set in-line, the in-line CSS style takes precedence over our style sheet.
We can get around this by using !important keyword, as follows:

.MyTable {
    width: 200px !important;

This now tells CSS that our ‘width’ rule takes precedence over the in-line defined style.

More information on the !important keyword and CSS inheritance can be found in the W3 CSS Specification.