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 <span style="color: #ff0000;">!Important</span>; } h1 { color: #000000; } |
By adding the !Important declaration, you force the first style to be applied even though the style below should overwrite it.
I have seen this in CSS but I never knew what it was for. Thanks for the explanation.
Good to know. Thanks.
You’ve correctly described this feature of CSS. However, I would recommend that it is a good practice to not be too reliant on it. Discovering a conflict in a CSS file is a good opportunity to ‘clean up’ your CSS by finding the conflict and improving the structure and specificity of your CSS rules.
I totally agree. I always use the W3C CSS validator to go over my CSS.
Thanks for good articles.