CSS var() Function

What does it take to change a site's main color from blue to red? If the color is written out in twenty rules, you edit twenty rules and hope you found them all. With a custom property, you edit one line.

A custom property is a property whose name starts with two hyphens, such as --accent. The browser stores its value on the element and passes it down to the element's children, but it draws nothing with it. The var() function reads the value back and puts it into a normal property. Custom properties are often called CSS variables.