CSS !Important: What It is and When to Use it

Last Updated on September 12, 2022 by 3 Comments

CSS !Important: What It is and When to Use it
Blog / Design / CSS !Important: What It is and When to Use it

One of the most useful and contentious elements of CSS is the !important property. Every designer will come across the tag in CSS code at some point. The real question and dilemma that comes up when that happens is “was it used correctly?” Because CSS !important is such a powerful tool, developers and designers need to be aware of best practices when using it. CSS !important can lead to all kinds of spaghetti code, and that’s not good for anyone.

What is CSS Important?

The !important property in CSS indicates that whatever rule to which it is attached takes precedent over other rules. It is the top priority for the element and selector its used with, and therefore lets developers and designers have specific control over styling for individual parts of the site. In most cases, that means overriding the default styling for the site that’s contained in styles.css or custom.css.

Each instance of !important only applies to the specific line on which it appears. So you can use the property on some, but not all, parts of a snippet. The CSS code for !important looks like this:

.example-class {

The primary thing to remember with !important is two-fold:

  1. the word important must always be preceded by an exclamation mark (!)
  2. the semicolon must always be at the end of the line, after the !important declaration

!important can even be used on a page-by-page or module-by-module basis (in the case of page builders like Divi), if you want — though that’s how you get into the spaghetti code of what’s overriding which element on which page and in which order?

Every designer at some point or another will run across the CSS important tag and have to make a decision. Is this worth overriding the site’s default styling?

Sometimes, the answer is a resounding yes. Other times, it’s a hard and fast no. Let’s look at some best practices with CSS important to know when it probably won’t break anything, either now or in the future.

When to Use CSS Important

The primary (and most widely accepted) use of !important is when you want a class that interacts with a primary selector to be styled differently. Perhaps you want the title heading and meta information on your blogs to be a different font and color than you do the rest of your site. The default styling for these elements is inherited from the h1 and p selectors in your CSS files. Whatever you have set for the site defaults in either your .css files or the WordPress theme customizer will display.

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;

You can change the individual elements you want (blog post title and meta info) with the classes .entry-title and .post-meta. And since you want them to still inherit some of the styles from the parent h1 and p, you’ll use h1.entry-title and p.post-meta to call these specifically.

h1.entry-title, p.post-meta {
	color: white!important;

Having these snippets in the same stylesheet will cause the top code to take effect in all cases except for when Post Titles and Post Meta are displayed. The CSS important property overrides the default and lets you have fine control over it.

This kind of individual customization is the primary use of !important. But not the only one.

Use CSS Important to Protect Classes, IDs, and Elements

You can also use !important to future-proof various elements of your page, too, that further development on the site could tweak in unexpected ways. You could, for instance, develop a particular style for subscribe boxes or email opt-ins or YouTube embeds. Each one of these might inherit different styles from your stylesheets in different places. Using the !important tag can make it so that it takes a deliberate hand to change the styling of your forms or buttons.

Just name the element with a class or ID, and then put !important on each and every line.

.youtube-embed {
	font-weight: 700!important;

Voila! Future-proofed from regular changes in your stylesheets.

Using Inline Styles

This is one of those use cases that may or may not come up for many people. It used to be very common, but it has become less so as we’ve moved away from hand-coding our posts and pages. However, if you ever dig into the HTML of a Gutenberg block or the text view of the WordPress classic editor, you can absolutely use !important with in-line CSS styling.

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>

This is important for a couple of reasons. The first being that you can control any line of code in your page specifically by using style=”x:y!important;” and the second is that you can override any CSS already applied to that page. Even if that value has !important, too. For example:

	p { 


<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>

Even if there is embedded HTML styling using <style></style> that uses !important on the same selector, the in-line CSS that targets the specific paragraph will be the one that renders.

Beware of Stacking Important Tags

Let’s take those last couple of examples and issue a word of caution. These types of uses are fine in small doses. You can use them one-off situations, and no one will probably ever have an issue with it. Because, as a one-off, you have specifically used !important to style an individual element. Which is what it is intended for.

However, if you begin using !important as a crutch, as a way to avoid editing your stylesheets as often or as a quick-fix for multiple issues on the same site, that’s the beginning of spaghetti code. Especially for future devs that aren’t you. While you may have a hard time figuring out the order in which the !importants render, a future dev may find it impossible.

What happens eventually is that there are so many stacked !importants across the site that interact with multiple stylesheets, pages, and modules, that normal CSS rarely renders. And sometimes, even something flagged !important doesn’t render. Or worse, every change afterward has to be flagged !important just for it to show up, unless you want to tear down the site’s styling and build it up again.

Wrapping Up

CSS important is honestly one of the most powerful tools in a designer’s toolkit. You can easily adjust any element on your site without worry of affecting any subordinates or peers. But if you overuse it, the effects can cascade into a nightmare of pages and elements trying to override each other, and what was once important has become the default, but it can’t be set as the default. So try to use !important sparingly, so that when you do need something to stand out or be future-proofed, you’re doing it the right way.

How do you feel about using CSS !important in your projects?

Article featured image by wan wei / shutterstock.com


Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Premade Layouts

Check Out These Related Posts

What is AI Art? How Art Generators Work (2023)

What is AI Art? How Art Generators Work (2023)

Updated on August 9, 2023 in Design

If you’ve been paying attention to tech trends over the last few years, you’ve noticed an increase in artificial intelligence (AI) programs. One of the hottest new forms is AI art. In this post, we’ll break down what AI art is, how it works, and how you can use it to enhance your...

View Full Post
How to Make AI Art in 2023 (Detailed Tutorial)

How to Make AI Art in 2023 (Detailed Tutorial)

Updated on August 10, 2023 in Design

Artificial intelligence (AI) is blazing hot right now, and there are nearly endless tools available to create content and images. Each tool has its own features and benefits, so deciding which to learn can be confusing. We’ve been trailblazers of late, periodically releasing tutorials on how...

View Full Post
10 Best AI Avatar Generators in 2023 (Free & Paid)

10 Best AI Avatar Generators in 2023 (Free & Paid)

Updated on September 20, 2023 in Design

AI art is all the rage, and with good reason. With artificial intelligence (AI), you can create photos with only your imagination as the limit. Build extraordinary worlds or make a cat with feathers; AI art generators help you realize your design dreams. Previously, you would need quite a few...

View Full Post


  1. Well Explained about CSS, I always love to read from an elegant theme.

  2. Good article BJ. I’m wondering if there is a way to do the reverse (ie declare a current !important as non-!important) which would help to restack priorities?

    • Not that I am aware of. The only way I’ve ever been able to do it was either create a more specific !important (which is a bad idea) or to remove it entirely from the stylesheet somehow. Both create their own messes in their own ways, but it shouldn’t be a problem if you work on making your classes, IDs, and pseudo-elements more specific before removing the !important tag.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi