CSS Pseudo Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h2 class="heading">Welcome To CSS lorem100</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, ipsum!</p>
<input type="text" class="inp" placeholder="Enter Name">
<a href="#one">link1</a>
<a href="#two">link2</a>
<a href="#three">link3</a>
</div>
</body>
</html>
//CSS File
body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.content{
width: 200px;
margin: 20px auto;
}
.heading{
text-decoration: underline rgb(222, 255, 5) ;
}
.heading::first-letter{
color: rgb(0, 157, 255);
}
.heading::first-line{
color: blueviolet;
}
::selection{
background-color: black;
color: white;
}
.heading:hover{
text-decoration: underline blueviolet;
font-size: 100px;
}
.inp{
padding: 10px;
border-radius: 5px;
border: 1px solid black;
}
.inp:focus{
outline: none;
border: 1px solid orange;
}
a:visited{
color: rgb(0, 0, 0);
}
a:hover{
color:aqua
}
a:active{
color: green;
}
Output:-
Comments
Post a Comment