Learn

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

1.

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!

2.

Inside the .btn selector ruleset, replace the color property’s value with the the --button-text-color variable.

3.

Replace the font-size property value, inside the .artist-description selector ruleset, with the --description-font-size variable created earlier.

4.

Still inside of the .artist-description selector ruleset, create a new variable called --custom-artist-color and set its value to be #d6e9f5.

5.

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.

6.

Set the --description-text-color variable to be the value of the color property in .artist-description selector ruleset.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?