We take pride in your success. We let our positivity drive us, day in and out. Talk to us at Mindfire to know us more.

Software Technology Tips

Home » Tips » HTML/CSS » Applying multiple styles HTML elements and significance of "!important " attribute in forcing styles
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>


Related Tags:
CSS, HTML

Author: Sumit Dhal

top

HTML/CSS

Let us Connect!

privacy

copyright (c) Mindfire Solutions 2007-2012. Login