Skip to content

Instantly share code, notes, and snippets.

@NimaBoscarino

NimaBoscarino/index.1.html

Created January 21, 2019 22:09
Show Gist options
  • Save NimaBoscarino/b953524a2f543994af391d6ed448c9c0 to your computer and use it in GitHub Desktop.
Save NimaBoscarino/b953524a2f543994af391d6ed448c9c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="main.1.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div>
</div>
<div>
</div>
<div class="special_div">
</div>
<div>
</div>
<div class="special_div_2">
<p>Heyooooo</p>
</div>
<div>
</div>
<div>
</div>
<div class="special_div_3">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
Raw
index.2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="main.2.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<h1>Heyo</h1>
<h2>How you doin</h2>
<h3>YEEZY</h3>
<div>
<section>
<div>
<p class="fuchsia-dog">HOT DOG</p>
</div>
</section>
</div>
<p>Cookie</p>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="main.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section>
<div>
<p>Heyooo</p>
<p class="bird">BIRD UP</p>
<p class="bird">BIRD UP</p>
<p class="bird">BIRD UP</p>
<p class="bird" id="steve">BIRD UP</p>
<h1>Woot woot</h1>
</div>
</section>
</body>
</html>
Raw
main.1.css
div {
height: 100px;
width: 100px;
display: inline-block;
margin: 5px;
background-color: blue;
}
.special_div {
background-color: red;
position: relative;
top: 10px;
left: 50px;
}
.special_div_2 {
background-color: yellow;
position: absolute;
top: 40px;
left: 50px;
}
.special_div_3 {
background-color: fuchsia;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
height: 50px;
}
p {
position: relative;
top: 100px;
left:73px;
}
Raw
main.2.css
h1, h2, .fuchsia-dog {
color: fuchsia;
}
/* P TAGS WITH DIV AS AN ANCESTOR */
div p {
}
/* P TAGS WITH DIV AS A PARENT */
div > p {
}
Raw
main.css
div p {
color: green;
}
p {
color: blue;
}
/* THREE TAGS > 2 > 1 */
/* 3 */
section div p {
color: yellow;
}
/* 100 */
#steve {
color: aquamarine !important;
}
/* 12 */
section div .bird {
color: purple !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment