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
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
Everything was clear?