CSS !important Rule

In this chapter, we will learn about the !important rule in CSS. The !important rule is used to increase the specificity of a CSS declaration, making it override any other declarations, regardless of their specificity.

We will cover:

• Introduction to the !important Rule
• Syntax of the !important Rule
• Using !important with CSS Properties
• Overriding !important Declarations
• When to Use and Avoid !important
• Examples of Using the !important Rule

Introduction to the !important Rule

The !important rule in CSS is used that forces a specific declaration to take precedence over other conflicting declarations. It is used to override styles that are applied with higher specificity or from external stylesheets.

Syntax of the !important Rule

To apply the !important rule to a CSS property, simply add !important after the property value.

Syntax

selector {
  property: value !important;
}

Using !important with CSS Properties

The !important rule can be used with any CSS property to ensure that the specified style is applied, regardless of other styles that might conflict.

Example

p {
  color: blue !important;
}

HTML

<p>This text will be blue, regardless of other styles.</p>

In this example, the text within the <p> element will be blue, even if there are other conflicting styles applied to it.

Overriding !important Declarations

To override a declaration that uses the !important rule, you need to apply another declaration with !important and ensure it has higher specificity or is placed later in the stylesheet.

Example

/* First declaration with !important */
p {
  color: red !important;
}

/* Second declaration with !important */
p {
  color: green !important;
}

HTML

<p>This text will be green because the second declaration overrides the first one.</p>

In this example, the text within the <p> element will be green because the second !important declaration is applied later in the stylesheet.

When to Use and Avoid !important

When to Use !important

• When you need to override inline styles or styles from external libraries.
• When you want to apply critical styles that should not be overridden by other styles.

When to Avoid !important

• When it can be avoided by increasing the specificity of your selectors.
• When it makes your CSS harder to maintain and debug.
• When it leads to conflicts with other !important declarations.

Examples of Using the !important Rule

Example 1: Overriding External Styles

/* External stylesheet */
.external-class {
  background-color: yellow;
}

/* Internal stylesheet with !important */
.external-class {
  background-color: lightblue !important;
}

HTML

<div class="external-class">This background will be light blue.</div>

In this example, the internal stylesheet overrides the background color from the external stylesheet using the !important rule.

Example 2: Forcing a Style

/* General styles */
p {
  font-size: 14px;
}

/* Specific style with !important */
p.special {
  font-size: 18px !important;
}

HTML

<p class="special">This text will always be 18px, regardless of other styles.</p>

In this example, the special class forces the text to be 18px, overriding any other font-size declarations.

Conclusion

In this chapter, you learned about the !important rule in CSS, including its syntax, how to use it with CSS properties, and how to override !important declarations. You also learned when to use and avoid the !important rule. Understanding the proper use of !important is essential for managing CSS specificity and ensuring that your styles are applied as intended.