CSS Custom Variables

Here’s how to use custom variables in CSS.

Step 1: Define your variables at the root level.

:root {
    --PhilMagenta:  #7E2452;
}

Step 2: Use it.

h1
{
    font-family: 'Segoe UI Semilight', 'Segoe UI', Arial;
    font-size: 20pt;
    color: var(--PhilMagenta);
}

[Source: W3Schools]