The !important rule is used to override the styling of a webpage. In all honesty, there are more instances of why you shouldn’t use the !important rule vs why you should. Let’s discuss how it’s used and then why it should only be used sparingly.
Overriding user-agent stylesheets
When writing CSS, there will be some cases where you need to overwrite the stylesheet that is given. If using CSS frameworks like Bootstrap to get a project up and running, you may want to customize the styling that’s built into the framework.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Important Keyword: Overriding Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.container {
display: flex;
}
.nav {
color: black;
background-color: pink;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</nav>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
Don’t worry too much about understanding what’s going on in the code editor above. Hit the run button and take stock of the things you do know about. We have some HTML that looks like it has classes and/or ids, a link to a CSS stylesheet that indicates it may be from Bootstrap, and then some of our own styling in the <head> of the document that’s not being properly rendered.
In the .navbar selector, where it mentions background-color: pink;, type in
‘!important’. Include a space in between the color and the !important rule. Run the code again. Did it change the background color of the navbar?
This is the first use case of the !important rule. When given a user-agent stylesheet from a CSS framework or elsewhere, you can use the rule to override the styles that Bootstrap comes with.
Overriding inline-styles
Another use case is where we would need to override the inline styles of an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Important Keyword: Overriding Inline Styles</title>
<style>
.line-item:first-child{
color: purple;
}
.line-item:last-child {
color: crimson;
font-size: xx-large;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Doctor Who Characters</h1>
<ul>
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li>
<li class="line-item">Jackie Tyler</li>
<li class="line-item">Mickey</li>
<li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
</ul>
</body>
</html>
Notice that we have some inline styles in the body of the code and then some potential styling to override it in the <style> tag in the code editor above. Use the !important rule in the CSS to override the inline styles.
Please remember that the !important rule is not necessarily best practice and should be used relatively sparingly. It has the potential to lead to hard-to-find bugs later on down the road.
If you feel the need to use the !important rule and you are not using a framework, you can usually reorganize your selectors to better render what you would like to see.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
