curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md
The !important keyword in CSS is used to give a style rule the highest priority, allowing it to override any other declarations for a property.
When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors.
Let's say you have an HTML paragraph element with inline styles like this:
:::interactive_editor
<p class="para" style="background-color: lightblue; color: black;">
This is a paragraph.
</p>
:::
In this example, the paragraph element has a background color set to lightblue and a text color set to black.
The CSS file applies the following styles to the paragraph element:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p class="para" style="background-color: lightblue; color: black;">
This is a paragraph.
</p>
.para {
background-color: black;
color: white;
}
:::
Since inline styles have a higher precedence than class, ID and type selectors, the black background color and white text color will not be applied to that paragraph element.
To override those inline styles, you can use the !important keyword like this:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p class="para" style="background-color: lightblue; color: black;">
This is a paragraph.
</p>
.para {
background-color: black !important;
color: white !important;
}
:::
The !important keyword is used after the CSS value and before the semicolon.
Now the paragraph element will have those black and white colors applied because the inline styles are being overridden with the use of the !important keyword.
The !important keyword in CSS is used to give a style rule the highest priority, effectively overriding other declarations, including those with higher specificity and inline styles.
However, the !important keyword does not change the specificity of the CSS selector itself. It simply ensures that the rule with !important is applied, even if there are other conflicting rules with higher specificity.
Another appropriate use case for the !important keyword is to override styles from third-party libraries or frameworks when you do not have control over the original CSS.
However, overusing the !important keyword can lead to difficulties in maintaining and debugging your CSS, as it breaks the natural cascading of styles and can lead to unintended consequences.
So, it is best to use the !important keyword sparingly.
What does the !important keyword do in CSS?
It increases the specificity value of a selector.
This keyword forces a style to be applied.
It applies a style regardless of other rules' specificity.
It decreases the specificity value of a selector.
This keyword forces a style to be applied.
It overrides only inline styles.
This keyword forces a style to be applied.
2
When should the !important keyword be used?
As the primary method for styling elements.
Think about maintainability and debugging.
To override third-party styles or as a temporary fix.
In every CSS rule for consistency.
Think about maintainability and debugging.
To increase specificity.
Think about maintainability and debugging.
2
Given the following CSS, what will be the color of the text?
<head>
<style>
p {
color: blue;
}
.highlight {
color: green !important;
}
#unique {
color: purple;
}
</style>
</head>
<body>
<p id="unique" class="highlight">This text</p>
</body>
blue
Consider the impact of the !important keyword.
green
purple
Consider the impact of the !important keyword.
red
Consider the impact of the !important keyword.
2