• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS !important

← Previous Next →

🔹 What is CSS !important?

The !important declaration in CSS is used to force a style rule to be applied, even if other rules have higher specificity.

When you add !important to a property, that rule will override all other rules for that property, regardless of where it appears or its specificity.

🔸 Syntax:

selector {
  property: value !important;
}
Example:
p {
  color: red !important;
}

#main p {
  color: blue;
}

The paragraph will appear red because !important overrides the more specific selector.

🔸 Where and When to Use !important

✅ Use when:

  • You must override third-party CSS (e.g., Bootstrap)

  • Inline or high-specificity styles need to be overridden

  • Quick fixes are required temporarily

❌ Avoid when:

  • Writing scalable, maintainable CSS

  • You can use better selector specificity instead

🔸 Inline vs !important

<p style="color: blue;">This is a paragraph</p>

p {
  color: red !important;
}

Result: Red, because !important even overrides inline styles.

🔸 Conflicts Between Multiple !important Rules

If two !important rules apply, the one with higher specificity wins.

p {
  color: green !important;
}

#intro p {
  color: purple !important;
}

Final color: purple (because #intro p is more specific)

Practice Questions

Q1. Apply a red background to all paragraphs using !important.

Q2. Force font-size 18px on all buttons regardless of previous styles.

Q3. Override Bootstrap’s btn-primary color using !important.

Q4. Make all <h1> text uppercase using !important.

Q5. Use !important to set a 2px solid border on input fields.

Q6. Style all <a> links with orange color and override any hover effects.

Q7. Add padding to divs and make sure it applies despite inline styles.

Q8. Make text color black for .error class and override all other rules.

Q9. Style disabled buttons with grey background using !important.

Q10. Change list item marker style to square using !important.

CSS !important Quiz

Q1: What does !important do in CSS?

A. Applies hover style
B. Forces rule to override all others
C. Adds animation
D. Adds border

Q2: Which rule takes precedence if both use !important?

A. The first one
B. The one with higher specificity
C. Inline always wins
D. Random choice

Q3: How to override an inline style using CSS?

A. Use class selector
B. Use ID selector
C. Use !important
D. Use @override

Q4: Which of these declarations is correct?

A. color: red; !important;
B. color: red !important;
C. !important: color red;
D. color!important: red;

Q5: Should you overuse !important in large projects?

A. No, it reduces maintainability
B. Yes, always
C. Only in JavaScript
D. Not allowed

Q6: What happens if two rules with !important conflict?

A. Both apply
B. Neither apply
C. The one with higher specificity applies
D. The one written first wins

Q7: Which is more powerful?

A. color: red !important;
B. color: blue;
C. color: green;
D. None

Q8: Where can !important be used?

A. Only in external CSS
B. In any CSS rule
C. Only with inline styles
D. Only in <style> tag

Q9: What is the main drawback of using !important everywhere?

A. Increases load time
B. Makes debugging harder
C. Prevents JS from working
D. None

Q10: What’s the correct order of priority (lowest to highest)?

A. ID > class > element > !important
B. element < class < ID < inline < !important
C. !important < inline < ID
D. All are equal
← Previous Next →
Login
Go Back Top