CSS Variables Complete Guide - What, How & Where

The variable is a term that is used in every programming or designing or markup language. Variables are some text strings that can be used throughout our programs and can be changed according to the needs of the programmer.

CSS variables are variables that can be used in CSS style sheets. If you don't know what is CSS and what CSS stylesheets are then you should know it first, take help from google.

Like other programming languages in CSS, variables can be used locally and globally depending upon how they are defined.

If you define your CSS variable using root pseudo-class then you can use that CSS variable globally but if you define a CSS variable for a specific element then you can use that variable only in that element's style code.

Defining & Using CSS Variables:

To Define a CSS variable you simply have to put 2 dashes (--) before the variable name. For example ( --background: #fc801c ).

Here you can see clearly that --background is a variable and the hex color code is the value of that variable. If you see the variable name clearly then you will see that I have added 2 dashes (--) before the variable name.

So calling CSS variable you have to follow some rules and to use CSS variables anywhere you have to enter the variable name with dashes (--) inside var function ( var() ).

This function is used to call any variable at any place in the CSS style code. Below you can see examples of defining and using variables in CSS style sheets.

For Example : background: var(--background)

Assigning & Using CSS Variable Locally:

To use the CSS variable locally you have to see the example code provided below. In the example below, you can clearly see how I have used the CSS variable to use locally for the one-element style code.

/* Assigning & Using CSS Variables 
Locally for one element style. */

#MyID {
  --background: #fc801c;                /*    Defining Variable ( --background  ) with value    */
  background: var(--background);        /*    Calling Variable ( var(--background) )    */
}

In the example code above I have defined a variable --background locally and this variable cannot be used in any other elements style code.

Let's take a look at how we can define and use variables globally

Defining and Using CSS Variables Globally:

To use any CSS variable globally, you have to define inside CSS variables in :root pseudo-class selector in CSS.

Variables defined inside the :root pseudo-class selector in CSS can be used globally in any elements style code. Take a look at the example below.

/* Assigning & Using CSS Variables Globally. */

:root{
    --background: #fc801c;     		/* Defining Variable */
}

#MyID {
  background: var(--background);    /*Calling Variable*/
}

#MyID2 {
  background: var(--background);    /*Calling Variable*/
}

Conclusion:

This is how you can define and use CSS variables locally and globally I think it's clear to you how you can assign CSS variables in your stylesheets.