Custom Properties
With CSS custom properties (often called CSS variables), we have a way to store a value for use in several CSS declarations. We can change this value as we like.
The syntax for a CSS custom property is a name prefixed with two dashes (--). We can then use the value stored in the property with the CSS var function. Here is an example of some CSS custom properties in use:
<style>
:root {
--dark-text-color: #131313;
--light-text-color: #cfcfcf;
}
p.dark {
color: var(--dark-text-color);
}
p.light {
color: var(--light-text-color);
}
</style>
The following screenshot shows the result of applying the preceding style rules to one paragraph element with the dark class attribute applied and one paragraph element with the light class attribute applied. The color variables we have created...