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
.
Instructions
Back in the .hero
selector ruleset, replace the value of the color
property with the --main-header-color
variable. Make sure to declare the variable as an argument inside the var()
function. The header’s title should have changed color!
Inside the .btn
selector ruleset, replace the color
property’s value with the the --button-text-color
variable.
Replace the font-size
property value, inside the .artist-description
selector ruleset, with the --description-font-size
variable created earlier.
Still inside of the .artist-description
selector ruleset, create a new variable called --custom-artist-color
and set its value to be #d6e9f5
.
Below the --custom-artist-color
variable declaration create a new variable called --description-text-color
and set its value to be the --custom-artist-color
variable.
Set the --description-text-color
variable to be the value of the color
property in .artist-description
selector ruleset.