Variables

CSS variables (custom properties) let you store reusable values, making your styles easier to update and maintain.

Declare variables in the :root selector and prefix them with --:

:root {
  --blue-color: #3f42f3;
}

Once we have declared a variable, we can apply it to any CSS property using the var() function. For instance, to assign the color property of an <h1> element the value of our --blue-color variable, we can write:

h1 {
  color: var(--blue-color);
}

Let's combine the knowledge of variable declaration and usage in the following example:

In this example, several variables control the card's colors. Updating a single variable updates the styles everywhere it's used.

Overriding Properties

To change specific styles within a component, redefine the same property inside a more specific selector.

Example (traffic light):

The base .signal class holds shared styles, while .stop, .slow-down, and .proceed override individual colors.