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.


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.