What is !important?

In CSS, you can override a style on a class simply by declaring a new style further down the page

i.e.

p {
    padding-top:5px;
}

p.custom {
    padding:10px;
}

Basically the above code sets the padding-top on all paragraphs to 5px, but sets the padding to 10px on paragraphs with the "custom" class. So we are overriding padding on our custom class.

However, you can actually prevent an attribute's style from being overridden if for some reason you really really don't want the padding to change in your design. Perhaps you are working with multiple people and you really don't want someone to accidentally override your design. Perhaps you just want to ensure your padding-top is always 5px even if padding is reset somewhere else.

In order to do this we use !important.

p {
    padding-top:5px !important;
}

p.custom {
    padding:10px;
}

In this case, the padding-top on a paragraph will always stay at 5px regardless of whether or not it has a "custom" class. It will also stay at 5px if you do the following...

p {
    padding-top:5px !important;
}

p.custom {
    padding:10px;
    padding-top:10px;
}

However all is not lost. Let's say you have imported someone else's CSS library and you want to tweak it but you find that they have used !important on the one style you want to update? Just use !important yourself...

p {
    padding-top:5px !important;
}

p.custom {
    padding:10px !important;
}

Yay! You can play in God mode too!

Of course in general it's best to avoid !important in every day situations. It's not really best practice, but it's there should you need it...