CSS !important

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS !important

What is important?

The important rule in CSS gives more importance to a property/value than normal.

Using the important rule, override ALL previous styling rules for that specific property on that element.

Let us look at an example.

HTML
				
					<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
CSS
				
					#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: pink
  !important;
}

Output

css !important

Example Explained

In the example above. all three paragraphs have a red background color, even though the ID selector and the class selector have a higher specificity. The! The important rule takes over the background-color property in both cases.

About !important

The only way to override an! important rule is to include another ! important rule on a declaration with the same specificity in the source code –  but this results in making the CSS code confusing and the debugging will be hard, especially if you are using a large style sheet!

HTML

				
					<p>This is some text in a para.</p>
<p class="myclass">This is some text in a para.</p>
<p id="myid">This is some text in a para.</p>
CSS
				
					#myid {
  background-color: blue !important;
}

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

p {
  background-color: pink !important;
}

Output

using !important