CSS variables are useful tools for modifying many CSS style properties at the same time, for example when trying different styles on multiple elements that share the same property value. They are more efficient than manually changing the values one by one every time.

CSS variables are created by declaring an identifier preceded by two hyphens and giving it a value. It is recommended to keep the variable names in lowercase to avoid typing errors. Only letters, numbers, underscore and hyphens are allowed. For example:

In order to use them, their name must be assigned as a value in other CSS properties, surrounded by parentheses and preceded by 'var'. CSS variables are case-sensitive so they need to be an exact match to their declaration in order to work. For example:

As with other CSS properties, it is optional to attach a fallback value (separated by a comma) that the browser will revert to if the variable is not set. This is useful for debugging but it isn't used to fix the browser compatibility. In the next examples, the value is used so that the browser has a color to display if the variable is not defined:

As shown above, if a second variable as a fallback is needed, the correct syntax is the one shown in the second example. The second argument "--background-2, blue" shown in the third example is invalid.

In the case of browsers that don't support CSS variables, since they can't parse the fallback value either, they will revert to the default value, which can cause problems. To solve this situation, it is recommended to provide another more widely supported value immediately before using the variable, so that older browsers have something to fall back on. Like this:

Like other properties, CSS Variables values of an element are inherited from its parent if no custom property is defined. Bear in mind that not all CSS properties are inherited by default.

It is useful to create variables in the :root pseudo-class selector and then over-write these variables by assigning new values within a specific element in CSS. For example:

When using variables in media queries, their value will be used when the media query takes effect.

The main points of this document are:

• You can create CSS variables by defining them like --variablename and assigning them a value;
• To use CSS variables you must use var(--variablename) as a value in the corresponding property;
• You can include a fallback value (separated by a comma) for the cases when the variable is not defined;
• You can add a fallback property right before using the variable so the browsers than can't read variables have something to use;
• Variables are inherited if the property can be inherited and is not overwritten;
• Variables are useful for media queries.

Here are the variables created for this page. You can clic on the buttons below to see the effect they make when their values are changed: