Important

Name: Learn CSS: Introduction
Rating: 4.741400000000000000 (642 reviews)

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;
4}

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.

Instructions

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;
3}

Already have an account?

Course content