Academy / Advanced Level: HTML and CSS

CSS Variables (Custom Properties)

Fallback Values for CSS Variables

CSS Variables allow you to specify fallback values in case the variable is not defined or fails to resolve. This ensures that your styles still render correctly even if a variable is missing.

Example of Fallback Values:

button {
  background-color: var(--button-bg, #3498db); /* Fallback to blue if --button-bg is not defined */
}

In this example, if the --button-bg variable is not set, the button will default to #3498db (blue).