CSS variables are employed to incorporate custom property values into our webpage. These custom properties, also known as cascading variables or CSS variables, are defined by authors to store particular values that can be repeated across the document. They are established using custom property notation and can be retrieved using the var function.
The variables hold data values and are limited to a specific scope where they are accessible.
CSS variables provide a beneficial feature by enabling the reuse of a single value across various sections. The variable's name is straightforward and user-friendly, unlike traditional color values.
element {
--main-color: brown;
}
A CSS variable is declared by starting with two dashes (--) at the start, then specifying the case-sensitive name.
In the provided syntax, the element represents the selector defining the range of the custom property. When custom properties are declared on the :root pseudo-class, they are applied universally across the HTML document. It's important to note that the names of custom properties are case-sensitive, meaning --main-color and --Main-color are recognized as distinct custom properties.
The var function
The var function within CSS is employed to inject the value of a custom property. You can provide the variable name as an argument to the var function.
Syntax
var( --custom-name, value )
Parameters
The var function restricts the input to a maximum of two arguments, which must be specified as outlined below:
--custom-name: This argument allows the specification of the custom attribute name. It needs to start with a double hyphen (--). This is a mandatory parameter.
value: This parameter is not mandatory and allows for the inclusion of a fallback value. It serves as the replacement when the custom property is deemed invalid.
Fallback values are not employed to address browser compatibility issues. When a browser does not support custom properties, the fallback value becomes ineffective. It serves as a replacement for browsers that do support CSS custom properties, allowing for an alternate value to be chosen in cases where the variable is invalid or undefined.
There are various acceptable and unacceptable methods to specify the fallback value, outlined as follows:
element {
color: var(--main-color, orange); /* orange if --main-color is not defined */
}
element {
background-color: var(--main-color, var(--main-background, blue)); /* blue if --main-color and --main-background are not defined */
}
element {
background-color: var(--main-color, --main-background, gray); /* Invalid*/
}
Now, let's explore CSS variables with the help of visual aids.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables</title>
<style>
:root {
--bg-color: lightgreen;
--text-color: red;
}
/* var() function used here */
body {
background-color: var(--bg-color);
text-align: center;
}
h1 {
color: var(--text-color);
}
div {
color: var(--text-color);
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to the C# Tutorial</h1>
<div>
This is an example of CSS variables
<h3>--bg-color: lightgreen;</h3>
<h3>--text-color: red;</h3>
</div>
</body>
</html>
Output
In the previous illustration, we did not utilize the default values. In the upcoming example, we will demonstrate the usage of fallback values.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables</title>
<style>
:root {
--bg-color: lightgreen;
}
body {
background-color: var(--bg-color);
text-align: center;
}
h1 {
color: var(--text-color, blue); /* --text-color is not set, so the fallback value 'blue' will be used */
}
div {
color: var(--text-color, blue);
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to the C# Tutorial</h1>
<div>
This is an example of CSS variables
<h3>--bg-color: lightgreen;</h3>
</div>
</body>
</html>
In this instance, a CSS variable named --text-color is left unset, resulting in the utilization of the fallback value as a replacement for the variable.
Output
Use of calc with the var
We have the ability to apply the calc function to manipulate variable values. Let's explore an instance where we utilize the calc function in conjunction with the var function.
In this instance, we are employing the calc function along with the var function to modify the padding and font size of the elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables</title>
<style>
:root {
--bg-color: lightgreen;
--extra-padding: 1.2em;
--txt-size: 90px;
}
body {
background-color: var(--bg-color);
text-align: center;
}
h1 {
color: var(--text-color, blue); /* --text-color is not set, so the fallback value 'blue' will be used */
font-size: calc(var(--txt-size) - 20px);
}
div {
color: var(--text-color, blue);
font-size: 30px;
border: 8px ridge red;
padding: calc(var(--extra-padding) + 20px);
}
</style>
</head>
<body>
<h1>Welcome to the C# Tutorial</h1>
<div>
This is an example of using the calc() function with the var() function
</div>
</body>
</html>
Output