How and When to Use !important Rule in CSS
When you try to look at the Cascading Style Sheets (CSS) of a website, a line that states !important is one thing you will notice in the code. Such a term affects the processing priorities within the style sheet.
Cascading Style Sheets are cascading, which means they are located in a specific order. The styles are usually applied in the order the browser reads them. Apply the first style, then the second style, etc.
Therefore, if a style happens at the top of a style sheet and then is lower down in the file, then the second scenario of that style is the one applied in subsequent instances, not the first. Practically, the last one listed will be used if two styles define the same thing (which means they have the same level of specificity).
Let's imagine, for instance, that a style sheet contains the following styles:
p {
color: green;
}
p {
color: black;
}Although the green color is applied to the first paragraph, the paragraph text would be rendered in black. The reason for this is that the "black" value is applied second. Because CSS is read top-to-bottom, the concluding is "black", so it wins.
Below, we will discuss how the !important rule changes the priority.
How to Apply the !important Rule in CSS
The CSS !important rule adds more authority than any other property. In CSS, the !important means "this is important". All the consequent rules must be ignored, and the !important rule should be applied. This rule must be set at the end of the line, directly before the semicolon.
p {
color: green !important;
}However, for balance, an !important declaration takes priority over a normal declaration. The style sheets of both the author and user can contain !important declarations, and user !important rules override author !important rules. This feature improves accessibility of documents by providing special requirements (large fonts, color combinations, etc.) and control over presentation.
Declaring a shorthand property (e.g., color) to be !important is equivalent to declaring all its sub-properties to be !important. Hence, it is used for overriding the styles that are previously represented in other style origins, in order to produce a particular design.
Let’s see an example to have a clear image.
Example of using the !important rule:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
body {
background-color: #1c87c9 !important;
background-color: #ffcc00;
}
h2 {
color: #8ebf42;
}
h2 {
color: #eeeeee !important;
}
</style>
</head>
<body>
<h2>W3docs</h2>
<p>
W3docs provides free learning materials for programming languages like HTML, CSS, Java Script, PHP, etc.
</p>
</body>
</html>In the given example, the background color of the <body> is blue instead of yellow, and the heading is gray instead of green. This is because the !important rule is applied.
When to Use the !important Rule
When testing and debugging a website, the !important declaration is effective. If you are not sure why a style is not being applied, and you think it might be a conflict of specificity, add the !important declaration to your style to see whether that fixes it. If it does, change the order of selectors and remove the !important directives from your production code.
You will eventually have a style sheet littered with !important styles if you lean too heavily on the !important statement to achieve your desired styles. You will dramatically change the processing of the CSS page. This is a lazy practice from a long-term management point of view that is not useful.
Use the !important for checking out or, in some cases, whilst you simply need to override an inline style that is a part of a theme or template framework. Even in those instances, use this technique sparingly and as a substitute, write clean style sheets that honor the cascade.
Where to Use the !important Rule
There can be cases when is it okay to use the !important rule. These are the following cases:
- Overriding styles in a user stylesheet
Here is what !important was created for in the first point: to give the user an opportunity to override the styles of the website. It's used a lot by convenience tools such as screen readers, ad blockers, and more.
- Overriding 3rd party code and inline styles
You should aspire as a developer to have as much control over your code as possible, but there are cases where your hands are tied, and you just have to work with anything that is present. Use !important sparingly.
- Utility classes
Probably a good case is utility classes. Let’s consider the buttons. If you have a class name like .button on your website and whatever element you put it on, you want that element to appear like a button: exact font, rounded corners, special background and borders, anything. You can try the following.
Example of adding a button:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 1px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="button">BUTTON</a>
</body>
</html>Once that element has some other selector affecting it that has a higher specificity, you can have styling troubles like the following.
Example of adding a button without the !important rule:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 3px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a
<a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>We can see that the buttons for which we have a specific design have a dashed green bottom border, which is not what we expected. It's simple and often perfectly valid to set a CSS selector that has a higher specificity.
To make the button class not easily changeable, put !important rules on the values. Here goes the example where the button, with !important rules, is applied.
Example of adding a button with the !important rule:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 3px solid #666 !important;
text-decoration: none;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a
<a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>User Style Sheets
This directive was additionally put in place to help web page users cope with style sheets that make it hard for them to use or read pages.
If somebody defines a style sheet for viewing web pages, the style sheet will be overridden by the style sheet of the page author. If the user is marking a style like the !important, this style overrides the style sheet of the web page author, even if the author selects a rule like !important.
This structure is useful for users who somehow need to set styles. For example, a visually impaired reader may need to increase the default font sizes. By using the !important directive sparingly within the pages you build, you provide your users’ individual requirements.