<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS Selectors</title>
<style>
/* element selector */
p {
border: 1px solid;
}
/* color selector for all paragraph */
p {
color: blue;
}
/* Id Selector */
#pink {
color: pink;
background-color: black;
}
/* Id selector */
#red {
color: red;
background: yellow;
}
/* Id selector */
#green {
color: white;
background-color: red;
}
/* Grouping selector */
footer,
span {
color: red;
background-color: yellow;
}
/* class selector */
.bgorange {
color: orange;
background-color: black;
}
</style>
</head>
<!-- Id is used for specific thing but class is used for multiple thing -->
<body>
<h3> CSS Selector</h3>
<p id="pink"> This is a simple paragraph to demonstrate css selectors</p>
<p id="red"> This is another simple paragraph to demonstrate css selectors</p>
<p id="green"> This is yet another simple paragraph inside div to demonstrate css selectors</p>
<p id="orange" class="bgorange"> This is again another paragraph</p>
<span>this is a span</span>
<footer>this is a footer</footer>
</body>
</html>
