Skip to content

Instantly share code, notes, and snippets.

@ankitdevelops

ankitdevelops/index.html

Created November 14, 2022 13:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ankitdevelops/691be3d9177ae0cade5dddb6fc03f48d to your computer and use it in GitHub Desktop.
Save ankitdevelops/691be3d9177ae0cade5dddb6fc03f48d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>Learning CSS</title>
<style>
/*Universal Selector*/
/*
*{
color:#383CC1;
}
*/
/*Type Selector*/
/*
p{
color:#383CC1;
}
*/
/*Class Selector*/
/*
.primary-heading{
color:#3B71CA
}
.secondary-heading{
color:#9FA6B2;
}
.primary-text{
color:#3B71CA
}
.secondary-text{
color:#9FA6B2;
}
*/
/*ID Selector*/
/*
#btn-primary{
background-color: #3B71CA;
padding: 10px 20px;
font-size: 20px;
color: #fff;
}*/
/*new code */
/*List Selector*/
/*Without using list selector*/
/*
.primary-heading{
color:#3B71CA
}
.primary-text{
color:#3B71CA
}
*/
/*Without list selector*/
/*
.primary-heading, .primary-text {
color:#3B71CA
}
*/
/*Descendent Selector*/
/*
.primary-div p{
color:#3B71CA
}
*/
/*Direct Child Selector*/
/*
.primary-div > p{
color:#3B71CA
}
*/
/*General Sibling Selector*/
/*
.selected-sibling ~ p {
color:#3B71CA
}
.selected-sibling-item ~ li{
text-decoration: underline;
}
*/
/*Adjacent Sibling Selector*/
/*
.selected-sibling + p {
color:#3B71CA
}
.selected-sibling-item + li {
text-decoration: underline;
}
*/
/*Pseudo class Selector*/
/*
#btn-primary{
padding: 10px 20px;
font-size: 20px;
}
#btn-primary:hover{
background-color:#3B71CA ;
color: #fff;
cursor: pointer;
}
*/
/*Pseudo Element Selector*/
.pseudo-element-after::after{
content: ""; /*You can use any string as content - even an empty string*/
display: block;
height: 20px;
width: 20px;
background-color: #3B71CA;
}
.pseudo-element-before::before{
content: ""; /*You can use any string as content - even an empty string*/
display: block;
height: 20px;
width: 20px;
background-color: #9FA6B2;
}
</style>
</head>
<body>
<h1 class="primary-heading">Heading Level 1</h1>
<h2 class="secondary-heading">Heading Level 2</h2>
<h3>Heading Level 3</h3>
<div class="primary-div">
<p class="selected-sibling">1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, inventore.</p>
<p class="secondary-text">2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ab.</p>
<p class="primary-text">3. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores, cupiditate?</p>
<p class="secondary-text">4. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, cum?</p>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<a href="">Click Here</a>
<div>
<p>
Paragraph inside the div
</p>
</div>
</div>
<ul>
<li class="selected-sibling-item">item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5 </li>
</ul>
<button id="btn-primary">Button Test Hover Effect</button>
<p class="pseudo-element-before">
Paragraph to test '::before' pseudo element
</p>
<p class="pseudo-element-after">
Paragraph to test '::after' pseudo element
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment