practice
HTML
<html lang="en">
<head>
<link rel="stylesheet" href="Practice.css">
<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 Assignment</title>
</head>
<body>
<h1 id="mainTopic">CSS Practice</h1>
<h3 >Let's learn about selector.</h3>
<!--Paragraph1-->
<p class="para">There are multiple selectors in css.</p>
<!--Paragraph2-->
<p class="para">Some of them include class selector,id selector etc.</p>
<!--Paragraph3-->
<p class="para">And we can also combine the set too.</p>
<div>
<h5>Did you like the practice set?</h5>
<input type="checkbox" id="yes" />
<label for="yes">Yes</label>
<br /><button>Learn next!</button>
</div>
</body>
</html>
CSS
/* SELECTORS */
#mainTopic {
color: blue;
}
* {
text-align: center;
}
h1,
h3,
h5 {
font-family: "Georgia";
}
.para {
color: white;
background-color: cornflowerblue;
}
div button {
color: azure;
background-color: purple;
}
/*PSEUDO CLASS AND ELEMENTS */
button:hover {
background-color: yellow;
color: blue;
}
p:nth-of-type(2n + 1) {
color: yellow;
}
h1::first-letter {
color: red;
}
input[type="checkbox"]:checked + label {
color: darkgreen;
}
Comments
Post a Comment