Open In App

CSS Variables

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The variables in CSS are just like simple variables of any other programming language. These variables are used to store values and have a scope in which the variables can be used. A variable is defined by using two dashes(–) at the beginning and then the name which is case-sensitive. The benefit of variables is that it allows the same values to be reused at multiple places and updated/modified from one place. Also, the variable names are easier to understand and use, as compared to the values of colors, as it avoids of being copying & pasting the value of the colors over and over again.

Syntax:

var( --custom-name, value );

The var() function can be used to take the values of the variables in CSS.

Parameters: The variable var() accepts two parameters which are listed below:

  • –custom-name: It is a required parameter that accepts the custom property name starting with two dashes.
  • value: It is an optional parameter. It accepts a fallback value which is used when a custom property is invalid.

Working of CSS var() function: The scope of the variables in CSS can either be local or global. We can utilize the global variables in the entire document whereas the local variable can only be used inside the selector where the variable is declared, within the scope. For creating the variables with global scope, we need to declare the variable inside the :root selector, where it compares for the document’s root element. For creating the variable in the local scope, we can declare the variable inside the selector where it can be used within the scope.

We will understand the above concepts through the examples.

Example 1: This example illustrates the use of the var() function to declare & access the variable globally, inside the :root selector.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS Variables</title>
    <style>
    :root {
        --bg-color: green;
        --txt-color: white;
    }
    /* var() function used here */
     
    body {
        background-color: var(--bg-color);
    }
     
    h1 {
        color: var(--txt-color);
    }
     
    div {
        color: var(--txt-color);
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <div> A computer science portal for geeks </div>
</body>
</html>


Output:

CSSVariable

Example 2: This example illustrates the use of the CSS variables for declaring the variable name, instead of copying and pasting the same colors multiple times.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS Variables</title>
    <style>
    :root {
        --bg-color: green;
    }
    /* var() function used here */
     
    body {
        background-color: var(--bg-color);
    }
     
    h1 {
        color: var(--txt-color, white);
    }
     
    div {
        color: var(--txt-color, white);
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <div> A computer science portal for geeks </div>
</body>
</html>


Output:

Supported Browsers: The browser supported by CSS variables are listed below:

  • Google Chrome 49.0
  • Microsoft Edge 15.0
  • Firefox 31.0
  • Safari 9.1
  • opera 36.0


Last Updated : 21 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads