CSS Variables

The CSS variables are used to add the values of custom property to our web page. The custom properties are sometimes referred to as cascading variables or CSS variables. The authors define these entities that contain specific values and can be reused throughout the document. These entities are set using the custom property notation and can be accessed by using the var() function.

The variables store the values and have a scope in which they can be used.

CSS variables are advantageous because they allow us to reuse the same value at multiple places. The name of the variable is easy to understand and use, as compared to the color values.

A variable in CSS is defined by using the two dashes (--) at the beginning, followed by the name, which is case-sensitive.

In the above syntax, the element indicates the selector that specifies the scope of the custom property. If we define the custom properties on the :root pseudo-class, then it will be globally applied to our HTML document. The names of the custom properties are case-sensitive, i.e., --main-color and --Main-color will be treated as the separate custom properties.

The var() function

The var() function in CSS is used to insert the custom property value. The name of the variable can be passed as the argument to the var() function.

Syntax

Parameters

The var() function only allows two arguments that are defined as follows:

--custom-name: This parameter accepts the name of the custom property. It must begin with the two dashes (--). It is the required parameter.

value: It is an optional parameter and accepts the fallback value. It is used as the substitution when the custom property is invalid.

Fallback values are not used to fix the compatibility of the browser. The fallback value will not be useful when any browser does not support the custom properties. The fallback value works as the substitution for the browser that supports the CSS custom properties for choosing a different value if the variable has an invalid value or if the variable is not defined.

There are some of the valid and invalid ways to define the fallback value that are given as follows:

Now, let's understand the CSS variables by using some illustrations.

Example

Test it Now

Output

CSS Variables

In the above example, we have not used the fallback values. Now, in the next example we will use the fallback values.

Example

Test it Now

In this example, there is a CSS variable --text-color, which is not set so, the fallback value will be used as the substitution of the variable.

Output

CSS Variables

Use of calc() with the var()

We can use the calc() on the variable values. Let's see an example in which we are using the calc() function with the var() function.

In this example, we are using the calc() function with var() function to adjust the padding and font-size of the elements.

Example

Test it Now

Output

CSS Variables




Contact US

Email:[email protected]

CSS Variables
10/30