0
0
CSSmarkup~5 mins

!important usage in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The !important rule in CSS helps you make a style stronger so it always applies, even if other styles try to change it.

You want to make sure a button always stays red, no matter what other styles say.
You need to fix a style quickly without changing many other CSS rules.
You want to override styles coming from third-party libraries or frameworks.
You want to force a style on a specific element when many styles conflict.
You want to test how a style looks by forcing it temporarily.
Syntax
CSS
property: value !important;

The !important goes right after the value, before the semicolon.

It makes this style stronger than normal styles, even if they have higher specificity.

Examples
This makes the text color red and forces it to apply over other color rules.
CSS
color: red !important;
This forces the background color to be yellow, ignoring other background-color styles.
CSS
background-color: yellow !important;
This forces the font size to be 2rem units, even if other font-size rules exist.
CSS
font-size: 2rem !important;
Sample Program

The first paragraph is blue because of the normal style. The second paragraph has a class with color: red !important;, so it stays red even though the normal style says blue.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>!important Example</title>
  <style>
    p {
      color: blue;
    }
    .override {
      color: red !important;
    }
  </style>
</head>
<body>
  <p>This text is blue because of normal style.</p>
  <p class="override">This text is red because of !important.</p>
</body>
</html>
OutputSuccess
Important Notes

Use !important sparingly because it can make your CSS hard to manage.

Try to solve style conflicts with normal CSS rules before using !important.

Remember that inline styles with !important have the highest priority.

Summary

!important makes a CSS style stronger and forces it to apply.

It is useful to fix style conflicts or override other styles quickly.

Use it carefully to keep your CSS clean and easy to understand.