CSS Variables - GeeksforGeeks

21 Oct, 2021
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:
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
bhaskargeeksforgeeks
CSS-Basics
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?