Css variable :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css variable </title>
</head>
<style>
/* global variable in css ... isme aap opacity padding saab store karke rakh sakte hai ...*/
:root{
--main_color:red;
--second_color :blue;
--opacity_test : 0.4;
}
ul li {
/* var likhkar aap ikso access kar sakte hai .... aur isme second parameter me aap fallback bhi likh sakte hai .... blue deffault ayenga agar isko --main_color varaible na mila to ye blue le lenga */
background-color: var(--main_color,blue);
/* aap local variable bhi bana sakte hai ... niche jaise kiya hai usko local variable kahte hai */
--second_color :green;
color: var(--second_color,red);
}
</style>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit eaque earum, molestias reprehenderit modi enim quaerat suscipit placeat dolor, nisi, quibusdam velit. Itaque est doloribus eius, nulla eaque sint incidunt.
</p>
</nav>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.