Hi dear welcome to "CodePrime" Blog . In this post you are going to learn how to use root and variables css property . First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>root and variable css by code prime</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, et officia! Odio dolores doloremque quis suscipit ducimus quas ut fuga? Voluptates, quo. Illo sint deserunt hic exercitationem laborum, earum iure.</p>
<div class="btn-1">CodePrime-1</div>
<div class="btn-2">CodePrime-1</div>
<div class="btn-3">CodePrime-1</div>
<div class="btn-4">CodePrime-1</div>
</body>
</html>
CSS CODE
:root{
--bg-color:blue;
--text-color:red;
--text-size:3rem;
--pad:10px;
}
p{
padding: 10px;
background-color: var(--bg-color);
width: 80%;
margin: 10px 0;
font-size:var(--text-size);
color: var(--text-color);
}
.btn-1{
padding: 10px;
background-color: var(--bg-color);
margin: 10px 0;
font-size:var(--text-size);
color: var(--text-color);
}
.btn-2{
padding: 10px;
background-color: var(--bg-color);
margin: 10px 0;
font-size: 2rem;
color: var(--text-color);
}
.btn-3{
padding: 10px;
background-color: var(--bg-color);
margin: 10px 0;
font-size: 2rem;
color: var(--text-color);
}
.btn-4{
padding: 10px;
background-color: var(--bg-color);
margin: 10px 0;
font-size: 2rem;
color: var(--text-color);
}
body{
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
align-items: center;
background: linear-gradient(45deg,blue,white);
}
0 Comments