Monday, April 27, 2009

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.

3 comments:

  1. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

    ReplyDelete
  2. Good to know, you like my blog and posts.
    Have a good day.

    ReplyDelete
  3. I would recommend *against* using !important in your style sheets. It can become a maintainability nightmare. Once you apply it in one place you may forget it's there and newer styles at a narrower scope won't work. At this point I have seen people repeat !important in that declaration just to get it to work.

    If you have complete control over the css I would really advise to never use !important. The only time I see it being useful is when dealing with third party css (i.e. a wordpress plugin).

    ReplyDelete