Custom properties also adhere to the rules of the cascade. Their values can be overridden by subsequent rules:
:root {
–text-color: #190736; /* navy */
}
body {
–text-color: #333; /* dark gray */
}
body {
color: var(–text-color);
}
In the example above, our body text would be dark gray. We can also reset values on a per- selector basis. Let’s add a couple more rules to this CSS:
:root {
–text-color: #190736; /* navy */
}
body {
–text-color: #333; /* dark gray */
}
p {
–text-color: #f60; /* orange */
}
body {
color: var(–text-color);
}
p {
color: var(–text-color)
}
In this case, any text that’s wrapped in <p> element tags would be orange. But text within <div> or other elements would still be dark gray.
You can also set the value of a custom property using the style attribute—for example, styLe=”–brand-coLor: #9a09af” .
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.