Override in-line CSS styles using the !important keyword

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;">
...
</table>

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.