Skip to main content

CSS Variables

Variables CSS

The var() function is used to insert the value of a CSS variable.​

CSS variables have access to the DOM, which means you can create variables with local or global scope, modify variables with JavaScript, and modify variables based on media queries.

A good way to use CSS variables is when it comes to the colors in your design. Instead of copying and pasting the same colors repeatedly, you can store them in variables.

The Traditional Way​

The following example shows the traditional way to define some colors in a stylesheet (defining the colors to use for each specific element):

Example​

CSS
body {
  background-color: #1e90ff;
}

h2 {
  border-bottom: 2px solid #1e90ff;
}

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Syntax of the var() function​

The var() function is used to insert the value of a CSS variable.

The syntax of the var() function is as follows:

##var(--name, value)

  • name: Required. The name of the variable (must begin with two hyphens).

  • value: Optional. Alternative value (used if the variable is not found).

NOTE

The variable name must begin with two hyphens (--) and is case-sensitive.

How var() Works​

First, CSS variables can have global or local scope.

Global variables can be accessed/used throughout the entire document, while local variables can only be used within the selector where they are declared.

To create a variable with global scope, declare it within the selector.:rootThe selector:rootIt matches the document's root element.

To create a local variable, declare it within the selector that will use it.

The following example is the same as the previous one, but here we use the var() function.

First, we declare two global variables (--blue and --white). Then, we use the var() function to insert the variable values later in the stylesheet:

Example​

CSS
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

The advantages of using var() are:​

  • It makes the code easier to read (more understandable).

  • It makes changing color values much easier.

To change the blue and white color to a softer blue and white, you only need to change the two variable values:

Example​

CSS
:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Browser Support​

The numbers in the table specify the first browser version fully compatible with the var() function.

CSS Var() Browser Support
Resources
Exercises

💻Get your hands dirty with this challenge: