CSS Variables
Lesson 1 of 2
  1. 1
    Imagine that you have just finished the final version of a large client website. Everything looks great and you are happy with its layout and design. But when you show your client the finished site…
  2. 2
    CSS Variables are defined the same way as any other CSS declaration, making them syntactically convenient and easy to remember. Each variable declaration must begin with a double hyphen (–) follo…
  3. 3
    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 doe…
  4. 4
    Like other CSS properties, when we define a CSS variable, we are also giving that variable a set scope. In CSS, the scope is what determines where a variable will work based on where it is declar…
  5. 5
    Just as CSS variables are subjected to local and global scope, they also follow standard CSS inheritance. If a variable is not explicitly defined on a child element, the value of its parent variabl…
  6. 6
    Sometimes there are reasons why a given variable may be invalid when the webpage renders. For example, the variable could have been set improperly—a variable with a value of 20px could mistak…
  7. 7
    So far, we have seen how CSS variables make it easier to reuse and read CSS code. But variables are also extremely powerful when used with media queries to create responsive designs. By using vari…
  8. 8
    In this lesson, we learned how to used CSS variables to make property values more legible and easily replaced. We also learned about the power of scoping, overriding variables, and fallback values….

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo