In this tutorial, you’re going to learn the basics of CSS variables, a relatively new addition to CSS that allows you to speed up and simplify your web development workflow. Now this video is going to walk you through a simple example where you’ll use a CSS variable to change and synchronize the color value of three different elements in your design from a single line of code.

Like so. Now here’s a URL to a project on CodePen for you to follow along with, and this link is also available in the Resources section for this video. Now, the first thing to note is the term CSS variables are sometimes referred to as CSS custom properties. I’m going to explain this further in just a bit, but just know that for now, these two terms are often used interchangeably.

Now in your code, you’ve got a color value that is defined in three different places. The first is on line 27 as the border of the card class. The second time is on line 55 as the border of the card-image class, and then the last line is the card-cta style, which is on line 84, and is the background-color of the contact button.

So three different style rules that all have the same color value. Now, if you wanted a different color for all three instances, you would have to update your style sheet in each of these three different locations. So this leads us to our Big Idea: Using a CSS variable allows you to define a CSS value in one place and then reuse it multiple times.

Another way to look at this is through the lens of something called the DRY principle. And this stands for, Don’t Repeat Yourself. And one of the main goals of DRY is to reduce the repetition of information in your code. So let’s take a look at how to do this using CSS variables. If you go toward the top of your style sheet, you want to type the following:

:root {
  --accentcolor:  hsl(220, 45%, 22%);
}

Now here (in :root) the colon indicates that this is a pseudo-class and root refers to the top level of the document. In other words, it’s targeting the HTML element itself and therefore will affect everything on your page. Now, earlier I mentioned that CSS variables are also referred to as CSS custom properties.

The reason why is because this syntax here is called, you guessed it at custom property and it’s composed of two parts. You’ve got your double dash syntax here, and then a name that you get to choose, and that’s the custom part. So I chose –accentcolor, but again, you could call this anything. It’s up to you. Just make sure you use a good name.

Once you’ve assigned a value to --accentcolor, you can retrieve it just like any other standard CSS property value. If you want to save yourself some time, go ahead and copy the custom property syntax like so: --accentcolor Then locate the border-style in the card class. Highlight the HSL value type var, add a parenthesis, and then paste --accentcolor here.

For example:

.card {
  border: 0.3rem solid var(--accentcolor);
}

So, as you might have guessed, var stands for variable, and this entire syntax is known as the variable function. Now if you’re using a browser that supports CSS variables, you should see no change on your screen. The border of the card remains exactly the same. Perfect. Now you’re going to use the variable two more times.

Copy the variable function and first replace the HSL color value for the card-image border, and then scroll down and do the same thing for the card-cta style and replace this background-color. Again, absolutely no change, which doesn’t seem very exciting, but here is the fun part. Since all three styles are referring back to your custom property in the :root.

When you update that hue value, let’s say to 190 and then the lightness value to 50% they will all change at once. Very cool, but we do need to have a small talk about browser compatibility on, caniuse.com we can see there’s excellent support across modern browsers for CSS variables, 93% at the time of this recording.

The real problem is that in non-supported browsers, you’re going to lose a lot of styles. So here’s what this page will look like in IE11 for example, really not a great look. So we don’t have the time to explore fallback strategies here, but they do exist. For example, if you need to support IE11 specifically, there is a polyfill that exists for it.

But again, check out our Resources section for links to articles on how to help you do it. That’s it. I hope this helped, and if you liked this video, be sure to check out all our other Take 5 videos as well as the entire course catalog at Gymnasium.