CSS Variables

CSS Variables can store a custom property as a value.

There are 2 steps in which variables are used –

Setting a custom property using the variable name. The variable name always starts with 2 hyphens and can store a CSS custom property. You must define the scope of the variable. For example, you can define this variable at the root level i.e. :root or body selector i.e body or universal selector i.e * or any other selector –

2. The variable name can be passed as an argument to the var() function. As the var() function stores a value so you can assign this value to a CSS property or a group of properties like –

border: var(--border-var);

The Syntax of var() function:

var(variable-name, fallback-value);

The fallback-value is optional. We will see one example of this before the end of this page.

so the above 2 steps are equivalent to –

border: 1px solid black;

To learn more about CSS Borders click here

Note The var() function is case sensitive and you must define the scope of this variable i.e. whether you can use it throughout the body or root or any specific tag etc.

Now, the advantage of using the variable is that you can insert this value anywhere in the code depending on where you want to set this custom border property.

Let us take some examples of CSS Variables –

Single Variable in the document

Let us take a basic example where we will use a single variable which will contain a custom property and we will use the same variable everywhere.

Example of CSS Variables Single Property

:root {
 --val-font-color: crimson;  
 }
 
ul {
 font-size:25px;
 color:var(--val-font-color);
}

Multiple Variables in the document

There is no limitation on the number of variables in the document. You can define either 1 variable or multiple variables depending upon your need and requirement.

Example of Multiple Variables

:root {
 --val-font-size: 25px;
 --val-font-color: crimson;
 --val-bg-color:black;
 --val-margin:15px;
 --val-padding:10px;
 --val-border:2px solid crimson;
}
 
ul {
 font-size:var(--val-font-size);
 color:var(--val-font-color);
 background:var(--val-bg-color);
 margin:var(--val-margin);
 padding:var(--val-padding);
 border:var(--val-border);
}

CSS Variables Fallback

Ideally, you should always define a fallback value.

Consider few scenarios like –

You are using a variable as arguments of the var() function but you did not define it
Another situation is like – you misspelled the name of the variable in the argument

In both these scenarios, you will run into issues as the variable will not store any custom property so the fix to this problem is a fallback value. This fallback value will be applicable only when the browser is not able to decide the value of the variable.

Example of Variable Fallback

:root {
 --val-font-size: 20px;
 --val-font-color: crimson;
 }
 
ul {
 font-size:var(--val-font-size, 30px);
 color:var(--vall-font-color, blue);
}

Scope of the Variable

The scope of the variable is important.

If you wish to use the variable anywhere in the document, then define it at the root level.

If you want to use the variable anywhere in the body, then define it under it

:root {
 --border-var: 1px solid black; /* at root level */
}

body {
 --text-color: red; /* to body selector */
}

* {
 --bg-color: gray; /* set to universal selector */
}

html {
 --var-padding: 2px; /* set to the html document */
}

If the same variable name is defined at the root level as well as in a particular tag level, then what is the priority?

The variable which is defined at the lower tag level will have a higher priority than the same variable name which is defined at root level or body selector or html selector or universal selector.

Similarly, if you define the same variable name inside the root level (:root), body selector(body), universal selector (*), the html document (html) or at any lower tag/id level, then the order of priority is as follows –

The id/class or lower tag selectors have highest priority compared to the below selectors
Universal selector (*) – Higher priority than the body selector but lower priority than the lower tag/id/class selectors
Body selector(body) – Lower priority than Universal selector but higher priority than the root level (:root) selector
root level (:root) selector – Lower priority than body selector (body) but higher priority than the html (html) selector
html document (html) selector – It has lower priority than these above selectors

Example to show the scope of the variable

* {
 --val-font-size: 30px;
 --val-font-color: orange;
 }
 
:root {
 --val-font-size: 15px;
 --val-font-color: green;
 --val-border:1px solid gray;
 --val-list-style-type: circle;
}
 
body {
 --val-font-size: 50px;
 --val-font-color: yellow;
 --val-border:4px solid green; 
}
 
html {
 --val-font-size: 30px;
 --val-font-color: purple;
 --val-border:1px solid blue;
 --val-list-style-type: square; 
}      
 
ul {
 font-size:var(--val-font-size, 30px);
 color:var(--val-font-color, blue);
 border:var(--val-border, aqua);
 list-style-type:var(--val-list-style-type);
}      
 
#id2 {
 --val-font-size: 40px;
 --val-font-color: blue;
 }

Scope of variable inside id or class

Sometimes we use the same name of the variable inside an id selector as well as class selector.

In this case, the custom property of id selector will have higher priority than the class selector.

Refer the example below –

Example of scope of variable inside id and class

ul {
 border:var(--val-border, aqua);
 list-style-type:var(--val-list-style-type, disc);
}

#id1 {
 --val-list-style-type: circle;
 --val-border: 7px double orange;
}  

.cls1 {
 --val-list-style-type: square;
 --val-border: 5px solid blue;
}