Skip to main content
X

Explore your training options in 10 minutes

CSS !important Rule: When to Use it

Christina Kopecky - July 02, 2020


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>

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content