Variables

CSS variables (also known as CSS custom properties) allow to define a set of values that can be reused throughout the CSS code. We can use them to create dynamic and flexible designs that are easy to maintain and update.

To apply a variable to the entire document, we need to add the :root pseudo-class at the top of the index.css file. We use the -- prefix followed by a variable name and value to create a custom variable.

As we have declared a variable, we can apply it as a value to any property. To do that, we use the keyword var(), and inside of the brackets (), we specify the variable name which we have in the :root. Let's say that the color property for the <h1> element supposed to be #3f42f3 (--blue-color variable).

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

Overriding of properties

Overriding of properties can be achieved by declaring a property with the same name as the one in the parent element and assigning a new value to it. Let's consider the next example