CSS !important

What is !important?

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

Example:

	background-color:  blue;  
}  
  
.myclass {  
	background-color:  gray;  
}  
  
p {  
	background-color:  red  !important;  
}

Explanation: In the example above. all three paragraphs will get a red background color, even though the ID selector and the class selector has a higher specificity. The !important rule overrides the background-color property in both cases.

Important about !important

The only way to override an !important rule is to include another !important rule on a declaration with the same (or higher) specificity in the source code - and here the problem starts! This makes the CSS code confusing and the debugging will be hard, especially if you have a large style sheet!

Here we have created a simple example. It is not very clear, when you look at the CSS source code, which color is considered most important:

	background-color:  blue  !important;  
}  
  
.myclass {  
	background-color:  gray  !important;  
}  
  
p {  
	background-color:  red  !important;  
}

Maybe One or Two Fair Uses of !important

One way to use !important is if you have to override a style that cannot be overridden in any other way. This could be if you are working on a Content Management System (CMS) and cannot edit the CSS code. Then you can set some custom styles to override some of the CMS styles.

Another way to use !important is: Assume you want a special look for all buttons on a page. Here, buttons are styled with a gray background color, white text, and some padding and border:

.button {  
	background-color:  #8c8c8c;  
	color:  white;  
	padding:  5px;  
	border:  1px solid black;  
}

The look of a button can sometimes change if we put it inside another element with higher specificity, and the properties get in conflict. Here is an example of this:

.button {  
	background-color:  #8c8c8c;  
	color:  white;  
	padding:  5px;  
	border:  1px solid black;  
}  
  
	color:  red;  
	background-color:  yellow;  
}

To "force" all buttons to have the same look, no matter what, we can add the !important rule to the properties of the button, like this:

.button {  
	background-color:  #8c8c8c  !important;  
	color:  white  !important;  
	padding:  5px  !important;  
	border:  1px solid black  !important;  
}  
  
	color:  red;  
	background-color:  yellow;  
}