CSS Variables
Clash Royale CLAN TAG#URR8PPP googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );
CSS Variables
❮ Previous
Next ❯
CSS Custom Properties (Variables)
The var() function can be used to insert the value of a custom property.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
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);
Try it Yourself »
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);
Try it Yourself »
CSS var() Function
| Property | Description |
|---|---|
| var() | Inserts the value of a custom property |
❮ Previous
Next ❯