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.
.DivStyle{color: Green;}
This is content in the div.
– The following block of code will display the line in Red, because of the inline style attribute dominates the CSS class.
.DivStyle{color: Green;}
This is content in the 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.
.DivStyle{color: Green !important; }
This is content in the div.