What are CSS Variables?
- In CSS, instead of copying and pasting the same property values we can use CSS variables.
- CSS have the var() function which is used to insert the value of a CSS variable.
- We define our CSS variables within :root{ }
Advantages of using var() function in CSS
- CSS variable makes the code easy to read.
- Using CSS variables we can make changes easier in our large code base.
Syntax of var() function in CSS
In CSS, the var() function is used to insert the value of a CSS variable.
var (--name, value)
Code Described in the video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS Variabes </title>
<style>
:root {
--colorRed: rgb(0, 4, 245);
--colorGreen: rgb(82, 241, 82);
--primaryHeight: 200px;
--primaryWidth: 500px;
}
.unordered {
border: 2px solid var(--colorRed);
}
.unordered li {
color: var(--colorGreen);
}
ul li {
color: var(--colorGreen);
}
.border {
border: 2px solid var(--colorRed);
}
.card {
height: var(--primaryHeight);
width: var(--primaryWidth);
border: 2px solid var(--colorRed);
}
</style>
</head>
<body>
<ul class="unordered">
<li>This is a paragraph </li>
<li>This is another paragraph</li>
<li>This is third paragraph</li>
<li>This is fourth paragraph</li>
<li>This is fifth paragraph</li>
</ul>
<ul>
<li>This is a paragraph </li>
<li>This is another paragraph</li>
<li>This is third paragraph</li>
<li>This is fourth paragraph</li>
<li>This is fifth paragraph</li>
</ul>
<ol class="border">
<li>This is a paragraph </li>
<li>This is another paragraph</li>
<li>This is third paragraph</li>
<li>This is fourth paragraph</li>
<li>This is fifth paragraph</li>
</ol>
<div class="card"></div>
</body>
</html>
