CSS Master Code Examples: Chapter 3 Custom Properties

Defining a custom property with a fallback value

The var() function accepts up to two arguments. The second one will be used if the first value is not defined. Toggle the checkbox to see this in action.

H in a Hexagon

:root {

}
svg {
    fill: var(--primary-color, hsl(280, 95%, 51%));
}