CSS Variables
Lesson 1 of 2
  1. 1
    Variables
    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…
    Start
  2. 2
    Defining Variables
    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…
    Start
  3. 3
    Using Variables
    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…
    Start
  4. 4
    Scoping Variables
    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…
    Start
  5. 5
    Inheriting and Overriding Variables
    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…
    Start
  6. 6
    Fallback Values
    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…
    Start
  7. 7
    Responsiveness
    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…
    Start
  8. 8
    Review
    In this lesson, we learned how to use CSS variables to make property values more legible and easily replaced. We also learned about the power of scoping, overriding variables, and fallback values. …
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

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