Published by Jayesh on Jan 09, 2024

5-minute read

Intended Audience

This article is for web designers and developers who are comfortable with the fundamental CSS concepts such as CSS Syntax, CSS Selectors, and CSS Properties.

A Beginner's Guide to CSS Variables

This article is a beginner-friendly introduction to an advanced Cascading Style Sheets (CSS) concept— CSS variables. CSS variables make your CSS code cleaner and easier to maintain. This article will focus on the following four topics:

Declaring a CSS variable.
Using a CSS variable.
Global and local scopes of CSS variables.
Overriding a global CSS variable with a local CSS variable.

Declaring a CSS variable

To declare a CSS variable, use <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code> followed by a variable name inside a CSS selector.

selector {
 --background-light: #FAFAFA;
}

In the above code, <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">background-light</code> is the variable name, <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code> is the CSS variable, and <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">#FAFAFA</code> is the value assigned to the CSS variable.

Note: CSS variables are case-sensitive. This means <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code> and <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--Background-light</code> are two different CSS variables.

Using a CSS variable

To use the above declared CSS variable, <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code> , insert it inside the <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">var()</code> function of a CSS selector.

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

In the above code, the <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">background-color</code> property of the body element takes the value of <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code> variable using the <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">var()</code> function. In simpler terms, the background color of the body element will be set to <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">#FAFAFA</code>.

Global and local scopes of CSS variables

A global CSS variable is declared inside the <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">:root</code> pseudo-selector and can be used throughout the stylesheet document. A local CSS variable is declared inside a particular CSS selector and can be used only inside that selector.

The following code demonstrates the declaration of the global variable, <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code> , inside the <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">:root</code> pseudo-selector. It is then used inside the <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">body</code> selector:

/* Declaring a global CSS variable */
:root {
 --background-light: #FAFAFA;  
}

/* Using the global CSS variable */
body {
 background-color: var(--background-light);  
}

The following example demonstrates the declaration and usage of the local variable, <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code>:

/* Declaring and using a local CSS variable */
body {
 --background-light: #FAFAFA;
 background-color: var(--background-light);  
}

Overriding a global CSS variable with a local CSS variable

Override a global CSS variable with a local CSS variable by re-declaring the CSS variable within a specific selector you want modified.

The following example demonstrates the overriding of a global CSS variable <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">--background-light</code> inside the <code class = "code__text" style = "background-color: var(--light--code-block); color: var(--light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">button</code> selector:

:root {
 --background-light: #FAFAFA;  
}

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

button {
 --background-light: #D5D5D5;  /* local CSS variable overrides global CSS variable */
 background-color: var(--background-light);
 color: #141414;
 padding: 1rem;  
}

Go beyond the basics

The following links are some excellent resources to learn more about CSS variables.