How to Use the Important Declaration in CSS

Sometimes when you are messing around with CSS, you can’t figure out why certain styles won’t stick. Most of the time, it’s because you are obviously doing something wrong, but other times you might just be missing the fact that your CSS is being overwritten somewhere else down the line. Remember, CSS stands for Cascading Style Sheets, so styles you set further down will overwrite styles that are above.

You have probably come across the solution several times when looking over CSS and you just might not have know that it was there.
The !Important declaration
Placing the !Important declaration after a style is a way to force that style to be applied even if they may be contradicted further down in your CSS.
Examples:

h1 { color: #ff0000; }
h1 { color: #000000; }

In the above example, your H1 tags will be black.

h1 { color: #ff0000 !Important; }
h1 { color: #000000; }

By adding the !Important declaration, you force the first style to be applied even though the style below should overwrite it.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie