!important usage in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text color red using !important.

CSS

p { color: red[1]; }

Drag options to blanks, or click blank then click option'

Aimportant

B!important

C!important;

D!important !

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the semicolon after !important

Writing !important without the exclamation mark

The !important declaration must be followed by a semicolon to be valid CSS syntax.

2fill in blank

medium

Complete the code to override the background color with !important.

CSS

div { background-color: blue[1] }

Drag options to blanks, or click blank then click option'

A;

Bimportant;

C!important

D!important;

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the semicolon after !important

Writing important without the exclamation mark

Using !important; after the value ensures this style overrides others.

3fill in blank

hard

Fix the error in the CSS to correctly apply !important to font-size.

CSS

h1 { font-size: 2rem[1] }

Drag options to blanks, or click blank then click option'

A!important;

B!important

C;

Dimportant;

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out the semicolon after !important

Writing important without the exclamation mark

The !important keyword must be followed by a semicolon to be valid and override other styles.

4fill in blank

hard

Complete the code to make the paragraph text green and override other styles using !important.

CSS

p { color: green[1] ; }

Drag options to blanks, or click blank then click option'

A!important;

B;

C!important

Dimportant;

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the semicolon before !important

Writing !important with a semicolon attached

The !important keyword comes right after the value without a semicolon, followed by a semicolon to end the declaration.

5fill in blank

hard

Fill both blanks to set border width to 3px and make it important with correct syntax.

CSS

div { border-width: 3px[1] [2] ; }

Drag options to blanks, or click blank then click option'

Aimportant

B!important

C;

D!!important

Attempts:

3 left

💡 Hint

Common Mistakes

Writing !!important which is invalid

Omitting the semicolon at the end

The correct syntax is value !important;. The word important alone is invalid without the exclamation mark, but here it is part of the options pool and must be placed carefully. The semicolon ends the declaration.