HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The !important rule in CSS is used to add more importance to a property/value than normal
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!
Let us look at an example:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Example Explained
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.
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:
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
!important
rule, you might see it in some CSS source code.
However, do not use it unless you absolutely have to.
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;
}
#myDiv a {
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;
}
#myDiv a {
color: red;
background-color: yellow;
}