To use a custom property, you substitute a regular CSS property’s value with a CSS variable based on that custom property. You create that variable by using the var() function:

[var]property[/var]: var(--[var]custom-property-name[/var] [, [var]fallback-value[/var]]);

property—The name of the CSS property you want to modify.
custom-property-name—The name of the custom CSS property you defined earlier, preceded by the leading dashes (--).
fallback-value—An optional value that the browser will apply if, for some reason, it can’t use the custom property (for example, if the custom property name is misspelled).

For example, recall my --accent-color custom property from the previous section:

:root {
     --accent-color: hsl(102, 37%, 75%);
 }

I can now replace each instance of hsl(102, 37%, 75%) in my stylesheet with a CSS variable:

header {
     background-color: var(--accent-color, orangered);
}
nav {
    color: var(--accent-color, orangered);
}
button {
    background-color: var(--accent-color, orangered);
}
aside {
    border-left: 1px solid var(--accent-color, orangered);
}
footer {
    background-color: var(--accent-color, orangered);
}

Tip: You might be tempted to use the original property value as the fallback. That’s fine, but a better strategy is to use a wildly different value (such as the orangered fallback color in the above code). That way, if you see the crazy value applied on your page, then you know you have a problem with your CSS variable.

I've added these declarations to the CSS Editor. Try changing the value of the --accent-color custom property to see for yourself the power and convenience of CSS variables.