CSS Variable

By Xah Lee. Date: . Last updated: .

CSS allows you you use variable. This is called CSS custom property.

Declare variable like a property, but with the property name with prefix of 2 hyphens, like this:

--xx: red

Then, use it like this:

color: var(--xx)

Here's example.

<div class="xyz">something</div>
:root {
 --xx: pink;
 --yy: 2rem;
 --zz: solid thin red;

color: var(--xx);
font-size: var(--yy);
border: var(--zz);

The :root means root of the HTML or XML. You can also use html, but :root is better because in XML (e.g. SVG), the root is not html.

There must be no space after var.

Technically, CSS variable is called a CSS custom property. You should think of it as custom property, because, it is used just like properties, with the same cascading precedence for their scope, and overwriting a value is also the same as CSS cascade.

Browser Support

CSS custom property is supported by all major browsers since 2017 Jan, except Internet Explorer.

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog