CSS Variables

CSS Custom Properties (Variables)

The var() function can be used to insert the value of a custom property.

The var() Function

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

The variable name must begin with two dashes (--) and is case sensitive!

The syntax of the var() function is as follows:

var(custom-name, value)

Example :

:root {
    --main-bg-color: coral; }

#div1 {
    background-color: var(--main-bg-color); }

#div2 {
    background-color: var(--main-bg-color);}

---------------

Example :

:root {
    --main-bg-color: coral;
    --main-txt-color: blue; 
    --main-padding: 15px; }

#div1 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: var(--main-padding);}

#div2 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: var(--main-padding);}

CSS var() Function