!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.

Practice

1. What does the !important declaration do in CSS?

easy

A. It makes the style apply only on hover.

B. It comments out the CSS rule.

C. It disables the CSS rule.

D. It forces a style to override other conflicting styles.

Solution

1. Step 1: Understand the role of !important

   The !important declaration is used to make a CSS rule stronger than others that might conflict.

2. Step 2: Compare with other options

   Options A, B, and D describe unrelated CSS behaviors like hover effects, commenting out the CSS rule, or disabling, which !important does not do.

3. Final Answer:

   It forces a style to override other conflicting styles. -> Option D

4. Quick Check:

   !important = override styles [OK]

Hint: Remember: !important beats other styles [OK]

Common Mistakes:

• Thinking it comments out CSS
• Confusing it with pseudo-classes like :hover
• Believing it disables styles

2. Which of the following is the correct syntax to make a CSS color red with !important?

easy

A. !important color: red;

B. color: !important red;

C. color: red !important;

D. color: red important!;

Solution

1. Step 1: Recall correct !important syntax

   The !important keyword comes immediately after the value and before the semicolon, like color: red !important;.

2. Step 2: Check each option

   Options B, C, and D place !important incorrectly or miss the exclamation mark, making them invalid CSS syntax.

3. Final Answer:

   color: red !important; -> Option C

4. Quick Check:

   Correct syntax = value + !important [OK]

Hint: Put !important right after the value [OK]

Common Mistakes:

• Placing !important before the property
• Missing the exclamation mark
• Putting !important after the semicolon

3. Given the CSS below, what color will the paragraph text be?

p { color: blue; }
p { color: red !important; }

medium

A. Blue

B. Red

C. Default browser color

D. No color applied

Solution

1. Step 1: Identify conflicting styles

   There are two rules for p: one sets color to blue, the other to red with !important.

2. Step 2: Apply !important precedence

   The rule with !important overrides the other, so the paragraph text color will be red.

3. Final Answer:

   Red -> Option B

4. Quick Check:

   !important beats normal styles [OK]

Hint: Styles with !important override others [OK]

Common Mistakes:

• Ignoring !important and picking first style
• Thinking both colors apply simultaneously
• Assuming default browser color applies

4. Why does this CSS not make the text green?

p { color: green; }
p.special { color: red !important; }

HTML:

<p class="special">Hello</p>

medium

A. Because p.special has higher specificity and uses !important.

B. Because color: green; has !important missing.

C. Because the HTML class is misspelled.

D. Because !important only works on IDs.

Solution

1. Step 1: Analyze selector specificity and !important

   The selector p.special is more specific than just p, and it uses !important, so it overrides the green color.

2. Step 2: Check other options for errors

   The class name matches the HTML, and !important works on any selector, not just IDs.

3. Final Answer:

   Because p.special has higher specificity and uses !important. -> Option A

4. Quick Check:

   Specificity + !important = override [OK]

Hint: Higher specificity + !important wins [OK]

Common Mistakes:

• Thinking !important only works on IDs
• Ignoring selector specificity
• Assuming class name typo without checking

5. You want to override a third-party CSS library's button color which uses .btn { color: blue !important; }. Which CSS rule will successfully change the button text color to green?

hard

A. .btn { color: green !important; }

B. #btn { color: green !important; }

C. .btn { color: green; }

D. button { color: green !important; }

Solution

1. Step 1: Understand !important override rules

   To override a style with !important, your rule must also use !important and have equal or higher specificity (or same specificity but appear later).

2. Step 2: Compare selector specificity

   The library uses class selector .btn with !important. .btn { color: green !important; } uses the same selector and !important, overriding if your CSS loads later. A (#btn) has higher specificity but targets id="btn", not class="btn". C lacks !important. D (button) has lower specificity (1 vs 10).

3. Final Answer:

   .btn { color: green !important; } -> Option A

4. Quick Check:

   Matching selector + !important wins [OK]

Hint: Use !important with matching selector to override [OK]

Common Mistakes:

• Not using !important when overriding another !important
• Using lower specificity selectors
• Confusing class and ID selectors