How to Override !important?

While styling the websites, developers can apply various CSS declarations to one or multiple elements. In this scenario, the browser determines which declaration is the most important to an element. Usually, the use of “!important” is avoided as it interferes with the stylesheet’s usual cascade and complicates troubleshooting. However, it can be utilized and overridden when necessary. When two declarations along an !important rule conflict with the same element, the declaration with the highest level of specificity is used.

This tutorial will examine:

• What is Override !important?
• Method 1: How to Override !important in HTML?
• Method 2: How to Override !important in CSS?

What is Override !important?

It is a CSS “!important” rule that is utilized to emphasize a property or its relevant value more than normal. This rule overrides all earlier style rules for that particular property on that element when applied.

How to Override !important in HTML?

To use the override !important property, look at the given instructions.

Step 1: Make a div Container

Initially, create a div container with the help of “<div>”. Then, insert a class attribute and set a specific name according to your preferences.

Step 2: Create a Nested div

Next, create a nested or child div between the first “<div>” tag. Then:

• Add the “id” and “class” elements with a particular name according to your preference.
• Insert the “style” attribute and allocate a particular value to this. For instance, “background-color” will set the background color of the created container.
• Also, “!important” value is utilized for overriding:

Output

How to Override !important in CSS?

To override “!important” in CSS, follow the stated instructions.

Step 1: Add Nested div Containers

Create the first container inside the first one and make another container by utilizing the same procedure mentioned in the above section. Then, add “class” and “id” attributes with the specific names:

Output

Step 2: Apply !important to Main div Class

Access the main div class by using the “.main-div” and apply the CSS properties listed below:

Here:

• “font-size” property is utilized for specifying the size of the font.
• “margin-top” adds a space at the top outside of the element.
• “text-align” is utilized for setting the alignment of the text in the defined element.
• “color” property defines the text color inside the element.
• “font-weight” property is used for showing how thin or thick alphabets in the text can be displayed.
• “background-color” is used for setting the color at the backside of the element.

Step 3: Apply !important to Main div Class and id

Now, access the class attribute of the first div container and the id attribute of the second div container:

Then, apply the “background-color” property and “!important” rule. It will override the above-applied background color.

Output

That was all about overriding the !important property in CSS.

Conclusion

To override !important, the user can utilize the “!important” rule with the attributes in HTML and also, use the CSS properties. For instance, access the main div and apply the “!important” rule on the “background-color”. Then, access both div containers and again apply !important rule on the same property. As a result, the second applied “!important” rule overrides the first. This post demonstrated the method to override !important in both HTML and CSS.