Question

How can you use CSS variables in your styles?

I'm trying to understand how to use CSS variables in my styles to make them more reusable and easier to maintain. I’ve seen examples of variables being defined and used, but I’m unsure how to properly declare them, apply them to elements, and override them when needed. Could someone explain the basics?

Answer 1

To define a CSS variable, use the -- prefix followed by a name of your choice, and assign it a value. You can reference the variable using the var() function.

Here's an example:

css

:root {
  /* Backgrounds */
  --primary-background: #faf8ef;

  /* Colors */
  --primary-text-color: #776e65;
}

In this example, CSS variables are defined inside the :root pseudo-class, making them globally accessible. Each variable begins with -- (e.g., --primary-background or --primary-text-color) and is assigned a value.

With this approach, you can easily update website colors by modifying the variable values.