Css variable exercise :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css navabar</title>
</head>
<style>
:root{
--background-color : gray;
--color: black;
--border-color:yellow;
--border:1px solid var(--border-color);
--li-padding:14px;
--li-margin:14px;
--background-color:white;
}
*{
margin: 0;
padding: 0;
}
.container{
color: var(--color);
background-color: green;
}
ul{
display: flex;
padding: 23px 23px;
}
ul li{
list-style: none;
}
ul li a{
color: var(--color);
text-decoration: none;
border: var(--border);
padding: var(--li-padding);
margin: var(--li-margin);
border-radius: 3px;
background-color: var(--background-color);
}
</style>
<body>
<div class="container">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.