Demo
Summary
You can override a declaration in another rule by using the !important keyword:
p {
color: red !important;
}Details
If you need to override a style in CSS, you can use the !important keyword. The !important keyword is placed after the value(s) and before the semi-colon, like this:
p {
color: red !important;
}
p {
color: blue;
}In the example above, the first rule will override the second and all of the paragraphs will be red. If the first rule did not have the !important keyword, the paragraphs would be blue.
In general, you should avoid using the !important keyword. You should first try overriding a style using a rule with a selector with a higher level of specificity, like a class or ID selector.
You have to use the !important keyword to override a declaration that is also using the !important keyword.
Exercises
First, recreate the CSS code in the embedded CodePen demo. Then try customizing the final color value.
References
Specificity on MDN