There can be multiple CSS classes and inline style applied to a single html element. By the default CSS rule, if same style attribute is set with different values on top of a single element, the closest attribute value will dominate in the out put at the browser end. !important is a special attribute that can break the rule, and can force a particular style irrespective of the hierarchy of all the styles applied.

Here is the example, that makes it more clear.

– The following block of code will display the line in Green, due to the CSS class applied to it.

<style type="text/css">
    .DivStyle{color: Green;}
</style>
 
<div class="divStyle">
    This is content in the div.
</div>

– The following block of code will display the line in Red, because of the inline style attribute dominates the CSS class.

<style type="text/css">
 .DivStyle{color: Green;}
</style>

<div style="color: Red">
   This is content in the div.
</div>

– The following block of code will display the line in Green again, because the !important attribute added to the CSS class, dominate over the inline style.

<style type="text/css">
 .DivStyle{color: Green !important; }
</style>

<div style="color: Red">
   This is content in the div.
</div>