Now that we know how to define and initialize CSS variables, let’s learn how to use them. As we saw in the last exercise, when we define variables in place of hardcoded properties, the variable does not immediately take the place of that property’s value.

To use CSS variables as values of properties, we must specify the variable’s name as an argument inside of the var() function. We will learn more about CSS functions in the next lesson.

The var() function allows the specified CSS variable to be used as a value of a property.

h1 {
  --main-background-color: #DADECC;
  background-color: var(--main-background-color);
}

To set the background color of the h1 selector, the --main-background-color variable was declared and given a value of #DADECC. Then on the next line, we use the variable as the value of the background-color property by passing --main-background-color as the argument of the var() function.

Another powerful way to use CSS variables is to create variables based on other variables. This can be useful for keeping track of color schemes and to keep CSS rules modular.

html {
  --custom-purple: #FF64ED;
  --main-color: var(--custom-purple);
}

body {
  background: var(--main-color);
}

In the example above, we first declared a variable called --custom-purple and gave it a value of #FF64ED. Then, we defined a variable called --main-color and set its value to be the --custom-purple variable defined above it. Now, instead of referring to --custom-purple in the html and body selectors, we are able to refer to --main-color to set the background color.

It is important to note that if we were to try to redefine the --custom-purple variable then no visual changes would happen.

html {
  --custom-purple: #FF64ED;
  --main-color: var(--custom-purple);
}

body {
  /*Trying to override the --custom-purple variable defined in the html selector rules*/
  --custom-purple: #FFFFF;
  background: var(--main-color);
}

In the modified CSS code above, the --custom-purple variable was overwritten in the body selector rules. But because --main-color was already set to the value of the --custom-purple variable defined in the html selector it doesn’t have any reference to the overwritten variable in body. Because of this, the body element’s background color will still be #FF64ED.