CSS !important Rule
Giving a CSS property top priority is the job of the !important rule.
For that property on that element, every earlier styling rule loses to it.
You write the keyword last in a CSS declaration, just ahead of the semicolon.
Syntax
selector {
property: value !important;
}
CSS !important Rule Example
The inline style, id selector, and class selector below all have a higher specificity than the plain paragraph rule, yet all three paragraphs turn out with a yellow background. For this property on these elements, !important beats every other styling rule.
Example
Here is how the rule behaves in practice:
p selector with background-color: yellow !important to override all of them, demonstrating that !important wins over inline styles, class selectors, and id selectors.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS !important Override</title>
<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>
Use !important Sparingly
An !important rule only loses to another !important rule, placed on a declaration of the same (or higher) specificity in the source code.
Once code is written this way, it gets confusing and difficult to debug, and a large style sheet makes that worse.
Example
Which of these colors counts as the most important is hard to tell here:
p selector, an #myid id selector, and a .myclass class selector, all using !important on background-color (red, blue, gray). Demonstrate that when multiple !important rules conflict, normal specificity determines the winner.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple !important Rules</title>
<style>
p {
background-color: red !important;
}
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>
</body>
</html>
A Few Fair Uses of !important
Even so, there are a few cases where the !important rule is useful:
1. Overriding a style you have no other way to override. A Content Management System (CMS) whose CSS code you cannot edit is one such situation: your custom styles can use the rule to win over some of the CMS styles.
2. Respecting user preferences. People with motion sensitivity may prefer sites with less animation. The prefers-reduced-motion feature of @media tells you whether someone has asked for reduced motion, such as animations or transitions. If they have activated this setting on their computer, !important can switch those effects off or tone them down.
3. Locking in a highly specific style for one kind of element. Say all link buttons on a page should share a special look. Placing one inside another element with higher specificity can make the properties conflict, so adding !important to the button properties forces the same look on all of them.
Media queries get their own chapter later on in the course.
Reduced motion example
@media (prefers-reduced-motion: reduce) rule that uses !important to disable all animations and transitions for users who prefer reduced motion. Include a simple animated element so the effect is visible.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reduced Motion with !important</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
from { margin-left: 0px; }
to { margin-left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h1>Prefers Reduced Motion</h1>
<p>The red box below will animate, unless the user has enabled "reduce motion" in their system settings.</p>
<div></div>
</body>
</html>
Link button basic
First, the link buttons: gray background color, white text, plus padding and a border:
a.button selector with a gray background (#8c8c8c), white text, 5px padding, 1px solid black border, and no text decoration.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button Styling</title>
<style>
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Link Button</h1>
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</body>
</html>
Link button conflict
Nest a link button in an element with higher specificity, and its properties can clash:
a.button (gray background, white text, 5px padding, 1px solid black border, no text decoration) placed inside a div with id "myDiv". Add a #myDiv a rule that sets color to red and background-color to yellow, demonstrating the specificity conflict.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button Specificity Conflict</title>
<style>
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Link Button Conflict</h1>
<div id="myDiv">
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</div>
</body>
</html>
Link button with !important
Marking the button's properties with !important keeps every button looking alike, whatever surrounds it:
a.button using !important on all properties (gray #8c8c8c background, white text, 5px padding, 1px solid black border, no text decoration) placed inside a div with id "myDiv". Add a #myDiv a rule with red color and yellow background to show that the !important button styles win.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button with !important</title>
<style>
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;
}
</style>
</head>
<body>
<h1>Link Button with !important</h1>
<div id="myDiv">
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</div>
</body>
</html>