Tutorials Tonight
Follow Us

Variables in CSS


CSS variables are user-defined variables that can store any CSS values like numbers, strings, or color. It helps in maintaining consistency throughout the entire webpage. In this tutorial, we are going to learn the Basics of CSS Variable with various Examples.

CSS variables are used to store a value that can be used frequently in the HTML document.

The benefit of using CSS variables is that we can use the same variable in multiple places in the document. We can also change the value of the variable in one place and it will be reflected in all the places where the variable is used.

Set Variables

The variables are defined by a name preceded by a double dash and a value is assigned to the variable after a colon. Example: --nav-color: red

:root{
    --nav-color: red;
    --link-color: white;
}

Access Variables

variables can be accessed by var(--variable name) notation. Just prepend a specific variable name to var() function.

/* using variable inside a selector */
a {
    color: var(--link-color);
}

Let's see the following example to understand how CSS variable work.

Example

<style>
    :root{ --my-color: red; }
</style>

<p style="color: var(--my-color)">This paragraph is using the CSS variable.</p>
▶ Try it

CSS variable scope

Any variable that we define in CSS has a scope value. Beyond a variable's scope is not accessible.

You just can not define variables anywhere in their document. Based on its use you can define it in three ways global and local.


1. Global scope

A variable that is defined globally can be accessed anywhere in the linked document.

A global variable is defined inside :root selector.

Example

:root {
  --my-background: orange;
  --my-padding: 15px;
  --my-border: #ccc 2px solid;
}

.box {
  background-color: var(--my-background);
  padding: var(--my-padding);
}

p {
  padding: var(--my-padding);
  border: var(--my-border);
}
▶ Try it

2. Local scope

A variable is defined locally by defining it within the code block of a specific selector.

A local variable can only be used within the selector it is defined.

Example

.box{
    --my-background: orange;
    --my-padding: 15px;
    --my-margin: 10px;
    background-color: var(--my-background);
    padding: var(--my-padding);
    margin: var(--my-margin);
}
▶ Try it

CSS variable inheritance

When you define a variable inside a selector, the variable is accessible inside that selector and its child elements.

Let's see the following example to understand how CSS variable inheritance work.

Example

.box{
    --my-border: #ccc 2px solid;
    --my-padding: 15px;

    border: var(--my-border);
    padding: var(--my-padding);
}

.box p {
    border: var(--my-border);
    padding: var(--my-padding);
}
▶ Try it

CSS variable overriding

When you define a variable inside a selector, the variable is accessible inside that selector and its child elements. If you define a variable with the same name inside a child element, the variable will be overridden.

Overriding is the process of changing the value of a variable. It does not cause any error just the value of the variable is changed.

Let's look at the following example to understand how CSS variable overriding works.

Example

:root {
    --my-border: #ccc 2px solid;
    --my-padding: 15px;
}

div {
    border: var(--my-border);
    padding: var(--my-padding);
}

p {
    --my-border: red 2px solid;
    --my-padding: 10px;

    border: var(--my-border);
    padding: var(--my-padding);
}
▶ Try it