GeezerVison

In the following example, all three paragraphs will get a yellow background color, even though the inline style, id selector, and the class selector have a higher specificity. The !important rule overrides ALL styling rules for that specific property on that element!

Example

Using the !important rule:

<html>
<head>
<style>
p {
background-color: yellow !important;
}

#myid {
background-color: blue;
}

.myclass {
background-color: gray;
}

</style>
</head>
<body>

<p style="background-color:orange;">This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>

</body>
</html>

Try it Yourself »

Use !important Sparingly

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!

The CSS code will be confusing and the debugging will be hard! Especially if you have a large style sheet!

In the following example, it is not very clear which color is considered most important:

Example

p {
background-color: red !important;
}

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

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

Try it Yourself »

A Few Fair Uses of !important

The !important rule can be useful in some cases, like:

1. To override a style that cannot be overridden in any other way. This could be if you are working in 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.

2. To respect user preferences. Some users have motion sensitivity and prefer websites with less animation. CSS has a @media feature called prefers-reduced-motion that lets you check if a user has asked to reduce motion, such as animations or transitions. You can use !important to turn off, or tone down animations and transitions for the users who has activated this setting on their computer:

Example

@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}

Try it Yourself »

You will learn more about media queries in a later chapter.

3. To create a highly specific, unchangeable style for a specific element. Assume we want a special look for all link buttons on a page:

Example

Style link buttons with a gray background color, white text, and some padding and border:

a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}

Try it Yourself »

Now, if we put a link button inside another element with higher specificity, the properties might get in conflict. Here is an example of this:

Example

a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}

#myDiv a {
color: red;
background-color: yellow;
}

Try it Yourself »

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

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

#myDiv a {
color: red;
background-color: yellow;
}

Try it Yourself »

❮ Previous Next ❯

★ +1

W3Schools Full Access - your next career move

REMOVE ADS

Learn more about Adventure Mode›

Free account

Track your progress

XP earned 0 Day streak 0 Spaces 0 League —

New

Learn in Adventure Mode W3Schools Adventure App

Coding fundamentals as bite-sized lessons and challenges.

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

   

FORUM ABOUT CAMPUS

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

CSS Tutorial

CSS Advanced

CSS Flexbox

CSS Grid

CSS Responsive

CSS Cert

CSS SASS

CSS Examples

CSS References

CSS The !important Rule

CSS !important Rule

Syntax

CSS !important Rule Example

Example

Use !important Sparingly

Example

A Few Fair Uses of !important

Example

Example

Example

Example

Track your progress

Learn in Adventure Mode W3Schools Adventure App

Contact Sales

Report Error

Top Tutorials

Top References

Top Examples

Get Certified