Inline styles have the highest specificity. The value of the specificity for these inline styles is 1000. All other selectors have a lower value of specificity, such as an id selector has a specificity of 100, a class selector has a specificity of 10, and so on.
Because of the highest specificity, the inline styles always override the CSS styles applied to the element using external CSS even if you have applied them using an id selector.
However, we can override the inline styles with external CSS too. The one and the only way to override inline styles with external CSS is to use the !important keyword beside the property value that you want to override.
See this working example:
Example:
p{
background-color: yellow !important;
/* This rule will be applied */
}
<p style="background-color: red;">
The background color will be yellow.
</p>
Can You Override Inline Styles Already Having !important?
The !important keyword can not only used with external CSS, but you can also use it with the inline CSS.
So, can you overide the inline CSS that already has the !important keyword?
The answer is no. If the !important keyword is used with the inline styles, you cannot override it with the external CSS. There is no way to do this.
This is because when we use !important keyword with the inline styles, they get the highest value of the specificity. Therefore, they can’t be overridden.
Here is a working example:
Example:
p{
background-color: yellow !important;
/* This will be overriden by inline CSS */
}
<p style="background-color: red !important;">
The background color will remain red only.
</p>
Should You use !important?
We recommend you not to use the !important keyword until unless it is very much needed.
Using the !important is not considered as a good programming practice because it forcefully overrides all other CSS rules applied to that element. This might break some of the working functionality and the things that used to work might not work now.
So, always avoid using the !important with your CSS rule.
Thanks for reading.
