Selectors and combinators
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.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 Chapter2</title>
</head>
<body>
<header>
<h1>Quora
<button id="login">Log in</button>
<button id="signup">Sign up</button>
</h1>
<div>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</div>
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/following">Following</a></li>
<li><a href="/answer">Answer</a></li>
<li><a href="/spaces">Spaces</a></li>
</ul>
</nav>
<hr>
</header>
<main>
<p class="post">
Adam
<a class="follow" href="/adam">Follow /abc</a></span>
</p>
<h3>What is the highest salary for a spacex engineer?</h3>
<span>
<button>+upvote</button>
<button>answer</button>
</span>
<hr />
<p class="post">
Bob
<a class="follow" href="/bob">Follow xyz</a>
</p>
<h3>What is the syllabus for JEE 2024?</h3>
<span>
<button>+upvote</button>
<button>answer</button>
</span>
<hr />
<p class="post">
Catlyn
<a class="follow" href="/catlyn">Follow pqr</a>
</p>
<h3>Why is the sky blue?</h3>
<span>
<button>+upvote</button>
<button>answer</button>
</span>
<hr />
<p class="post">
Dan
<a class="follow" href="/dan">Follow pqr</a>
</p>
<h3>Why is the sky blue?</h3>
<span>
<button>+upvote</button>
<button>answer</button>
</span>
<hr />
</main>
</body>
</html>
CSS
/* UNIVERSAL SELECTOR */
* {
background-color: antiquewhite;
}
/* ELEMENT SELECTOR */
h1,
h3 {
color: #b92b27;
font-family: Arial, Helvetica, sans-serif;
}
/* ID SELECTOR */
#login {
color: rgb(3, 3, 3);
font-family: "Lucida Sans", "Lucida Sans Regular";
}
#signup {
color: #b92b27;
background-color: wheat;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* CLASS SELECTOR */
/* .follow{
font-family: 'Courier New', Courier, monospace;
color:blue;
} */
/* DESCENDANT SELECTOR */
span button {
color: aliceblue;
background-color: black;
}
.post a {
color: violet;
}
nav ul li a {
color: darkcyan;
}
/* ATTRIBUTE SELECTOR */
input[type="text"] {
color: red;
}
input[type="password"] {
color: brown;
}
input[type] {
background-color: aquamarine;
}
/* COMBINATORS */
/*ADJACENT SIBLINGS COMBINATOR */
p+h3{
text-decoration: underline;
text-transform: capitalize;
}
/* CHILD COMBINATOR */
h1> #login{
background-color:aliceblue;
}
span> button{
color:wheat;}
Comments
Post a Comment