!important usage in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the !important declaration do in CSS?

The !important declaration makes a CSS rule override other conflicting rules, no matter where they appear in the stylesheet.

beginner

How do you write a CSS rule with !important?

Place !important right after the value in a CSS property, like this: color: red !important;

intermediate

Why should you avoid overusing !important in your CSS?

Overusing !important makes your CSS hard to maintain and debug because it breaks the normal rules of style priority.

intermediate

Can !important override inline styles in HTML?

Yes, a CSS rule with !important can override inline styles unless the inline style also uses !important.

intermediate

What is a better alternative to using !important for fixing style conflicts?

Use more specific selectors or reorganize your CSS to avoid conflicts instead of relying on !important.

Where should you place !important in a CSS declaration?

A After the property value, before the semicolon

B Before the property name

C At the start of the CSS rule

D After the semicolon

!important goes right after the value, like color: blue !important;.

What happens if two CSS rules have !important and conflict?

A The first rule in the stylesheet wins

B Both rules are ignored

C The last rule in the stylesheet wins

D The rule with higher specificity wins

When both have !important, normal specificity rules decide which applies.

Which of these is NOT a good reason to use !important?

A Overriding third-party styles

B Quickly fixing a style conflict

C Making your CSS easier to maintain

D Temporarily testing a style change

!important usually makes CSS harder to maintain, so it is not a good reason.

Can !important override styles set in inline HTML attributes?

A Yes, unless inline styles also use <code>!important</code>

B No, never

C Only if the CSS is in a separate file

D Yes, always

!important in CSS overrides inline styles unless those inline styles also use !important.

What is a better practice than using !important to fix style issues?

A Use inline styles

B Increase selector specificity

C Add more <code>!important</code> declarations

D Use JavaScript to change styles

Increasing selector specificity helps fix conflicts without breaking CSS rules.

Explain what !important does in CSS and when you might use it.

Think about how CSS decides which style to apply.

Describe the risks of overusing !important and suggest better alternatives.

Consider how CSS rules normally work and how to keep styles clean.