Using CSS variables

Using variables in CSS can help track certain property values you want to keep the same in multiple different areas. It's especially useful for tracking colors, so you only need to reuse the variable instead of remembering the color code.

We define CSS variables above the other styles, with :root.

:root {
    --lavender: #bb81ea;
    --tangerine: #ff6e00;
}

Once they are defined, we can use them where needed:

strong {
    color:var(--lavender);
}
.panel {
    background-color:var(--tangerine);
}

When we need to update a color on our page that is used in many places, we only need to update it in one place now.

You can use variables for more than just colors. They can store pretty much any attribute, but they cannot be used to store @media query widths.

:root {
    --border: 1px solid #cccccc;
    --background:url('image.jpg');
}