CSS !important directive

9 Flares Twitter 0 Facebook 0 Google+ 9 LinkedIn 0 Filament.io 9 Flares ×

What is !important in CSS ? Let us try to learn that. CSS ( Cascading Style Sheets) cascade. Browser applies the styles in the order that they are read. Consider the case below

 

In this case, the text inside the span will have green color.  A rule that has the !important CSS directive will always be applied no matter where that rule appears in the CSS document.

 

Since we put the !important the span will have the color blue.  In simple sentence , !important gives more weight to a declaration than it naturally has. To understand this better let us look at order and importance of CSS rules

  1. Declarations specified by the user agent
  2. Declarations specified by the user
  3. Declarations specified by author
  4. Declarations from the author with !important added
  5. Declarations from the user with !important added

It is interesting to note that the user declarations has more weight than the author declarations ( both having !important).

 When to use !important

Ideally you should avoid using it. It breaks the natural cascading effect and can potentially create messy code. Naturally, CSS rules works with cascade and specificity. !important just breaks that natural working model.