Day 5
I covered video 17 and 18.
/* */ Anything in this is a comment in CSS, and I used it to explain the use of that part(anything I used). The link is below for this code as website, you can check it out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Selector</title>
<style>
/*Element selector */
div {
background-color: aquamarine;
}
/* class selector */
.one {
background-color: darkgreen;
}
/* Id selector */
#three {
background-color: blanchedalmond;
}
/* child selector */
div > p {
color: blueviolet;
}
/* descendant selector */
div p {
background-color: cyan;
}
/* universal selector */
* {
margin: 1px;
padding: 1px;
}
/* Pseudo selector */
a:visited {
color: yellow; /*After visited color change */
}
a:link {
color: green; /*If the site is not visited */
}
a:active {
background-color: red; /*When you click on it */
}
a:hover {
background-color:black; /*When move over it not click*/
}
p:first-child {
background-color: crimson; /*Only where p is first child*/
}
p::first-line{
background-color:antiquewhite;
}
</style>
</head>
<body>
<div class="one">Hi i'm one</div>
<div>
<p>First Child</p>
<p>I'm two. <br>This won't change because this is second line.</p>
<!--if this Element get in other then div then the background-color will be different for child selector -->
<article>
<p>Hii</p>
</article>
</div>
<div id="three">I'm three</div>
<nav>
<a href="https://www.bestudiouss.com">Studiouss</a>
<a href="https://www.google.com">Google</a>
</nav>
</body>
</html>
<!-- Total height = Height + Top Padding + Bottom Padding + Top Border + Bottom Border + Top Margin + Bottom Margin -->
<!-- Total width = Width + Left Padding + Right Padding + Left Border + Right Border + Left Margin + Right Margin -->