CSS Variables
CSS variables, also known as custom properties, are used to store reusable values in a CSS document. Defined with two dashes (–), these variables enhance code efficiency and readability by allowing centralized updates of values such as colors and sizes. This article explores the syntax, usage, and benefits of CSS variables, illustrating their scope through practical examples to help you streamline your web design process.
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.
CSS Variables Examples
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.
<!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>w3wiki</h1>
<div> A computer science portal for Beginner </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.
<!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>w3wiki</h1>
<div> A computer science portal for Beginner </div>
</body>
</html>
Output:
CSS variables streamline the styling process by enabling reusable values and centralized updates. By understanding their scope—global with :root or local within specific selectors—developers can create more maintainable and efficient CSS code. Integrating CSS variables into your workflow enhances both the flexibility and manageability of your web design projects.
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
Contact Us