YouTipCss Important
# CSS !important Rule
### What is !important
The !important rule in CSS is used to increase the weight of a style.
!important is not related to priority, but it is directly related to the final result. When an !important rule is used, this declaration will override any other declaration.
## Example
```css
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
[Try it »](#)
In the above example, although the ID selector and class selector have higher priority, the background color of all three paragraphs is displayed as red because the !important rule overrides the background-color property.
### Important Note
Using !important is a bad practice and should be avoided as much as possible, because it breaks the inherent cascade rules in stylesheets and makes debugging more difficult.
When two conflicting declarations with !important rules are applied to the same element, the declaration with the higher priority will be adopted.
In the following example, it's not very clear which color is most important when we look at the CSS source code:
## Example
```css
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
[Try it »](#)
**Recommendations:**
* **Always** prioritize using style rule priority to solve problems instead of `!important`
* **Only** use `!important` on specific pages where you need to override site-wide or external CSS
* **Never** use `!important` in your plugins
* **Never** use `!important` in site-wide CSS code
### When to Use !important
If you want to set a site-wide CSS style on your website, you can use !important.
For example, if we want all buttons on the website to have the same style:
## Example
```css
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
[Try it »](#)
If we place the button inside another element with higher priority, the button's appearance will change, and properties will conflict, as shown in the following example:
## Example
```css
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
[Try it »](#)
If you want all buttons to have the same appearance, you can add the !important rule to the button's style properties, as shown below:
## Example
```css
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
[Try it »](#)
[](#)(#)
(#)[](#)