Importance of !important property in CSS.

I think in css most of the people don't have idea or complete idea on keyword called "!important".

It will be useful in many scenarios where we have plenty of style sheets and want to overwrite all the styles applied to an element with some other styles. We know that applying styles in HTML for controls hierarchy will be like this, Which styles are very close to the element those will apply finally. i.e. if we apply some styles for a division in css and if we write inline style for the same element, then always inline styles apply. That means the inline styles overwrites all other styles to that element. Like the same, in our css, if we apply different styles to an element in different places and finally if you want to overwrite the styles in a perticular section then you need to use this !important property at end of the style.

We have a scenario like where we need to overwrite all of the styles to a perticular control, there this property will help us.

Ex: .topNav

{

background-color:#990000;

}

.topNav {some other style….}

.topNav

{background-color:#818286 !important;

}

the last css declaration will overwrites all the topnav classes declared and finally it applies the background color of #818286 for top navigation.