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)
Value Description
custom-name Required. The custom property’s name (must start with two dashes)
value Optional. The fallback value (used if the custom property is invalid)

The following example first defines a global custom property named “–main-bg-color”, then it uses the var() function to insert the value of the custom property later in the style sheet:

Example

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

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

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

The following example uses the var() function to insert several custom property values:

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);
}