GeezerVison

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

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.

CSS Declare a Variable

CSS variables can have a global or local scope.

Global variables can be accessed through the entire document, while local variables can be used only inside the selector where it is declared.

To create a global variable, declare it inside the :root selector. The :root selector matches the document's root element.

To create a local variable, declare it inside the selector that is going to use it.

A CSS variable name must begin with two dashes (--) and is case sensitive!

Syntax

:root {
--primary-bg-color: green; /* global scope */
}

.note {
--note-bg: yellow; /* local scope */
}

The CSS var() Function

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

Syntax

var(--name, value)

Value	Description
name	Required. The variable name (must start with two dashes)
value	Optional. The fallback value (used if the variable is not found)

Advantages of using var() are:

Makes the code easier to maintain (simplifies updates)
Makes the code easier to read (more understandable)
Makes it easier to change the color values for the entire page

CSS Variables Example

Here, we declare two global variables (--primary-bg-color and --primary-color).

Then, we use the var() function to insert the value of the variables later in the style sheet:

Example

:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}

body {
background-color: var(--primary-bg-color);
}

.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}

.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
border: 1px solid var(--primary-bg-color);
padding: 10px;
}

Try it Yourself »

To change the look of the page, you just need to change the two variable values:

Example

:root {
--primary-bg-color: #8FBC8F;
--primary-color: #FFFAF0;
}

body {
background-color: var(--primary-bg-color);
}

.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}

.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
border: 1px solid var(--primary-bg-color);
padding: 10px;
}

Try it Yourself »

CSS var() Function

Function	Description
var()	Inserts the value of a CSS variable

❮ Previous Next ❯

★ +1

W3Schools Full Access - your next career move

REMOVE ADS

Learn more about Adventure Mode›

Free account

Track your progress

XP earned 0 Day streak 0 Spaces 0 League —

New

Learn in Adventure Mode W3Schools Adventure App

Coding fundamentals as bite-sized lessons and challenges.

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

   

FORUM ABOUT CAMPUS

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

CSS Tutorial

CSS Advanced

CSS Flexbox

CSS Grid

CSS Responsive

CSS Cert

CSS SASS

CSS Examples

CSS References

CSS Variables - var() Function

CSS Variables

CSS Declare a Variable

Syntax

The CSS var() Function

Syntax

CSS Variables Example

Example

Example

CSS var() Function

Track your progress

Learn in Adventure Mode W3Schools Adventure App

Contact Sales

Report Error

Top Tutorials

Top References

Top Examples

Get Certified