Hi dear welcome to "CodePrime" Blog . In this post we are going to learn Types Of CSS Selectors and Explain how to use. 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
<!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>Css selector BY CODE PRIME</title>
</head>
<body>
<!-- CLASS SELECTOR -->
<div class="btn">CodePrime</div>
<!-- IDENTYFIRE selector -->
<div id="codeprime">Bangladesh</div>
<!-- COMPASION SELECTOR -->
<div class="box">
<div class="btn">
<div id="codeprime">Bangladesh</div>
</div>
</div>
</body>
</html>
CSS
/* UNIVERSEL SELECTOR */
*{
font-family: Arial, Helvetica, sans-serif;
}
.box .btn > #codeprime:hover{
background: red;
}
#codeprime{
padding: 10px 20px ;
background: #fff;
color: #000;
font-size: 2rem;
margin: 10px 0;
}
.btn{
padding: 10px 20px ;
background: #fff;
color: #000;
font-size: 2rem;
}
/* TAG SELECTOR */
body{
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
align-items: center;
justify-content: center;
background: linear-gradient(45deg,blue,white);
}
0 Comments