CSS Variables

Custom properties (commonly known as CSS Variables) are a modern addition to CSS. If you’ve worked with programming languages such as JavaScript or Python, you’ll know that variables are extremely useful.

A variable is a name that refers to a value. By using variables in CSS, we greatly reduce code repetition and create style sheets that are much easier to maintain.

Defining a CSS variable

We define a variable by using a name that begins with a double hyphen followed by a colon and any valid CSS value. For example, we have the --primary-color: variable set to green in the code below:

:root {
  --primary-color: green;
}

The :root pseudo-class is a special selector that globally applies the HTML document’s style. More on this later!

The variable can be accessed like so:

p {
  color: var(--primary-color)
}

Defining variables in elements

We can define CSS Variables inside of an element, as demonstrated in the code snippet below:

:root {
  --default-padding: 30px 30px 20px 20px;
}

body {
  --primary-bg-color: brown;
}

p {
  --primary-color: yellow;
}

a:hover {
  --primary-color: red;
}

Variable scope

Each variable is only available to child elements of the selector defined in — this is the “scope.”

Let’s examine this in the context of our previous example using the :root selector:

:root {
  --primary-color: green;
}

The :root selector is a special setting that refers to the document root.

In an HTML document, :root refers to the HTML element. It has a higher specificity than HTML, so it always takes priority.

So, when a variable is applied to :root, it’s considered to have global scope and is available to all elements.

If we add a variable to a main element, it will only be available to children of the main element:

main {
  --primary-color: yellow;
}

If we attempt to use it outside of this element, it won’t work.

Here are our two variables:

:root {
  --primary-color: green;
}

main {
  --primary-color: yellow;
}

Our --primary-color will be green in our document, except for main and any of its child elements—they’ll be yellow.

Bonus tips

Case sensitivity

Case sensitivity applies to variables!

:root {
 --color: green;
 --COLOR: yellow;
}

So, --color and --COLOR are two separate variables.

Using variables in HTML

Variables can be used directly in HTML, as demonstrated in the code below:

<!--HTML-->
<html style="--size: 600px">

body {
  max-width: var(--size)
}

Using variables within variables

A variable can be used within another variable, as follows:

--base-red-color: #f00;
--background-gradient: linear-gradient(to bottom, var(--base-red-color), #333);

Using math

The calc() function can be used within variables to perform calculations:

--input-width: 500px;
max-width: calc(var(--input-width) / 2);

Using variables with media queries

We can make CSS variables only apply in certain situations in media queries.

For example, let’s set the padding to 5px on devices with a width that’s less than 500px:

:root {
	--padding: 15px 
}

@media screen and (max-width: 500px) {
	--padding: 5px
}

Setting a fallback value for the var() function

The var() function also lets us set a parameter that can be used in case a custom property isn’t found:

width: var(--custom-width, 33%);

A note on variables

CSS variables produce much cleaner and more concise code. They also make it much easier to manage your code across larger codebases. Also, if you define your variables in a separate CSS file (best practice), you won’t need to search through your entire code every time you need to change your variables!

Get hands-on with 1200+ tech skills courses.