CSS variables var( ) is a CSS function that can be used to insert the value of a custom property.
h2 {
border-bottom: 3px #00FFFF;
}
.container {
color: #00FFFF;
background-color: #00FFFF;
padding: 15px;
}
CSS Variables-values
Values
<custom-property-name>
A custom property’s name represented by an identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.
<declaration-value>
The custom property’s fallback value, which is used in case the custom property is invalid in the used context. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e. ), ], or }, top-level semicolons, or exclamation marks.
CSS Variable Function-syntax
The var() function is used to insert the value of a CSS variable.
| Value | Description |
|---|---|
| name | The variable name (must start with two dashes) |
| value | The fallback value (used if the variable is not found) |
.container {
color: var(--darkorchid);
background-color: var(--white);
padding: 17px;
}