The CSS variables are just like simple variable of any 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, compared to the values of colors.
Syntax:
var( --custom-name, value )
Parameters: The variable var() accepts two parameters which are listed below:
- –custom-name It is a required parameter which accepts the custom property name.
- value: It is an optional parameter. It accepts fallback value which is used when custom property is invalid.
Example 1:
<!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:
<!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
- Internet Explorer 15.0
- Firefox 31.0
- Safari 9.1
- opera 36.0
Recommended Posts:
- ES6 | Variables
- R - Variables
- Python Variables
- Variables in TypeScript
- SASS | Variables
- NODE_ENV Variables and How to Use Them ?
- Perl | Variables
- How to pass JavaScript variables to PHP ?
- How to unset JavaScript variables?
- How to pass PHP Variables by reference ?
- How to define colors as variables in CSS ?
- Why do we need reference variables if we have pointers
- Environment Variables in ElectronJS
- Dummy Variables in R Programming
- Instance Variables in Ruby
- Special variables in Perl
- Global and Local variables in JavaScript
- Ruby | Class Method and Variables
- What are undeclared and undefined variables in JavaScript?
- How to use JavaScript variables in jQuery selectors ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
