CSS VARIABLE
CSS variables are used to store a value that can be used frequently in the HTML document.
The variables are defined by a name preceded by double dash and value is assigned to the variable after a colon. Example: --my-color: teal;
:root{
--my-color: teal;
}
The variable is defined in a way mentioned above.
Now, to access the variable and to use it in the HTML document we use var() function. Example: color: var(--my-color);
p {
color: var(--my-color);
}
Working example:-
<!DOCTYPE html>
<html>
<head>
<style>
:root{ --my-color: teal; }
</style>
</head>
<body>
<h2>Learning about CSS variables.</p>
<p style="color: var(--my-color)">This paragraph is using the CSS variable.</p>
</body>
</html>
▶ Run the code
CSS variable scope
Any variable that we define in CSS has a scope value. Beyond a variable's scope is not accessible.
We have two type of scope :
- Global scope
- Local scope
1.) Global scope
A variable which is defined globally can be accessed anywhere in the linked document.
A global variable is defined inside :root selector.
:root{
--my-background: orange;
--my-padding: 15px;
--my-margin: 10px;
}
.box{
background-color: var(--my-background);
padding: var(--my-padding);
margin: var(--my-margin);
}
▶ Run the code
2.) Local scope
A variable is defined locally by defining it within the code block of a specific selector.
A local variable can only be used within the selector it is defined.
.box{
--my-background: orange;
--my-padding: 15px;
--my-margin: 10px;
background-color: var(--my-background);
padding: var(--my-padding);
margin: var(--my-margin);
}
▶ Run the code