0:00 A really quick primer on CSS variables because this knowledge is essential to our theming strategy. You can define a CSS variable with dash dash and the variable name that you want and then assign a value to it. You can then consume that variable by using the var function and the variable name inside of it.

0:16 Note that our variable name here will be available within the scope to which it's been defined. Here we're using the root scope, which is the entire document. It's available everywhere. A great feature of CSS variables is they can be redefined within any CSS selector. Here I'm going to redefine the variable name to the deep pink color within the button pink selector.

0:38 Now in the button class here, the variable name consumed here will still hold a value defined as the root scope. Inside a button pink class the variable name color will have been updated. Here's a little challenge for you. We've got these two shapes here. The first one with a class of square and the second one with a class of square but also square dash dash pink.

0:58 Your job is to make the second square, well, pink. We're defining this dash dash color variable at the root scope where we use that teal color. Then in the square class below here we consume that color to apply it to the background color property. Now your job is to redefine this CSS variable inside the square pink class to make the second square here pink.