Posts tagged: override

  • 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.

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