!important usage in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does !important do in CSS?

Consider the CSS rule color: red !important;. What effect does !important have on this style declaration?

A It makes the style apply only when the user hovers over the element.

B It disables the style so it won't apply to the element.

C It only applies the style if the element has a class named <code>important</code>.

D It makes the style override other conflicting styles, even inline styles without <code>!important</code>.

💡 Hint

Think about how CSS decides which style wins when multiple rules apply.

The !important flag in CSS increases the priority of a style declaration. It overrides other declarations, including inline styles, unless those also have !important. This helps force a style to apply when normal specificity rules would not.

📝 Syntax

intermediate

Which CSS rule correctly uses !important?

Select the CSS rule that correctly applies !important to the background-color property.

A background-color: blue !important;

B background-color: !important blue;

C background-color !important: blue;

D background-color: blue important!;

💡 Hint

Remember the order: property, colon, value, then !important.

The correct syntax places !important immediately after the value, before the semicolon. Option A follows this rule.

❓ rendering

advanced

What color will the text be?

Given the HTML and CSS below, what color will the paragraph text appear as in the browser?

<style> p { color: green !important; } #special { color: red; } </style> <p id="special">Hello!</p>

CSS

<style>
p { color: green !important; }
#special { color: red; }
</style>
<p id="special">Hello!</p>

A Red

B Green

C Black (default)

D Blue

💡 Hint

Which rule has higher priority, the one with !important or the ID selector without it?

The p selector has color: green !important;, which overrides the #special ID selector's color: red; because !important increases priority beyond normal specificity.

❓ selector

advanced

Which selector's !important style applies?

Consider these CSS rules:

.box { border: 1px solid black !important; } #unique { border: 2px dashed red !important; }

Which border style will an element with class="box" and id="unique" have?

CSS

.box { border: 1px solid black !important; }
#unique { border: 2px dashed red !important; }

A No border because of conflicting !important rules

B 1px solid black border from .box

C 2px dashed red border from #unique

D Default border (none) because !important cancels out

💡 Hint

When multiple !important rules apply, which selector wins?

When multiple !important rules apply, normal specificity rules decide which wins. The ID selector #unique has higher specificity than the class selector .box, so its style applies.

❓ accessibility

expert

Why should !important be used carefully for accessibility?

Using !important can sometimes harm accessibility. Which reason below best explains why?

A It can override user styles or browser settings that help users with disabilities.

B It makes the page load slower, causing delays for screen readers.

C It disables keyboard navigation on the page.

D It hides content from assistive technologies.

💡 Hint

Think about how users might customize styles for better reading.

Using !important can block user or browser style overrides, such as high contrast modes or larger fonts, which assist users with disabilities. This reduces accessibility.