css - Variables - The var() Function Part 4: Using Fallback Values in var()

What Happens If a Variable Is Not Defined?

If a variable is not set, the var() function can use a fallback value.

Example 7: Using Fallback in var()

.box {

  background-color: var(--primary-color, orange);

}

Explanation:

If --primary-color is not defined, the background defaults to orange.

Example 8: Ensuring Safe Font Sizes

p {

  font-size: var(--custom-font-size, 14px);

}

Explanation:

This ensures that 14px is used if --custom-font-size is missing.