Code highlights logo


Visual Rules


Important is a shorthand CSS property that gives more specific importance to a CSS rule. It is a way to make sure that a particular style is always applied regardless of a conflict with other styles specified earlier.

1.example {
2 color: #ff0000;
3 font-size: 18px !important;

In the example above, the font-size property is marked as !important. This means that no matter what other CSS rules are present, the font size of 18 pixels will be used.

It is important to use !important sparingly. Overusing it can lead to confusion and difficulties in maintaining the codebase. Instead, it should be used only when necessary and as a last resort in cases where an essential style is not being applied due to conflicts with other styles.

Remember, !important is like a shout. Use it wisely and only when necessary.



Add a new CSS rule for a element that makes the color yellow.
Click the "Run" button, and look at the Greece, Italy and Spain links color, inside our top list.
Are they yellow?


Inside our new CSS rule let's add the !important property, like so:

1a {
2color: yellow !important;

Sign up to start coding

Already have an account?

Sign In

Course content