---
title: "CSS !important"
description: "> ## 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…"
url: "https://apprentice.mn/docs/css-important/"
updated: "2021-05-11"
category: CSS
---

# 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!

Let us look at an example:

### 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.

##  

## 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:

     `#myid {
  background-color: blue !important;
}

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

p {
  background-color: red !important;
}`

**Tip:** It is good to know about the `!important` rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to.

##  

## 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:

### Example

     `.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 gets in conflict. Here is an example of this:

### Example

      `.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:

### Example

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

#myDiv a {
  color: red;
  background-color: yellow;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-important%2F&linkname=CSS%20%21important](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-important%2F&linkname=CSS%20%21important)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-important%2F&linkname=CSS%20%21important](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-important%2F&linkname=CSS%20%21important)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-important%2F&linkname=CSS%20%21important](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-important%2F&linkname=CSS%20%21important)[https://www.addtoany.com/share](https://www.addtoany.com/share)