Created
April 8, 2016 00:07
-
-
Save JoeShep/f06831ae7c6736fdbaa92883736d2dd5 to your computer and use it in GitHub Desktop.
CSS101
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> <!-- tells browser what version--> | |
<html> | |
<head> <!-- header info, styles, meta etc--> | |
<meta charset="UTF-8"> <!-- define alphabet--> | |
<meta name="author" content="Joe Shepherd"> <!-- Define Page author --> | |
<title>Hi there</title> <!--tab title--> | |
<link rel="stylesheet" type="text/css" href="styles.css"> | |
</head> | |
<body><!-- displays the page--> | |
<nav> | |
<ul class="top-nav"> | |
<li>home</li> | |
<li>about us</li> | |
<li>contact us</li> | |
</ul> | |
</nav> | |
<div id="page-id" class="page-class">This is a page</div> <!-- block element--> | |
<p>Before the floated stuff</p> | |
<article class="left">A</article> | |
<article class="left">B</article> | |
<article class="right">C</article> | |
<article class="right">D</article> | |
<p class="floated-p">After the floated stuff</p> | |
<form action=""> | |
<fieldset> | |
<legend>My name</legend> | |
<label for="first">First Name</label> | |
<input type="text" placeholder="first name" name="first"> | |
<input type="email" placeholder="email address"> | |
<input type="password"> | |
<input type="radio"> | |
<input type="checkbox"> | |
<input type="range"> | |
</fieldset> | |
</form> | |
<div class="p-ancestor"> | |
<p>I am a direct child of the "p-ancestor" div</p> | |
<div> | |
<p>I am a grandchild of the "p-ancestor" div</p> | |
</div> | |
</div> | |
<ul class="top"> | |
<li class="block">1</li> | |
<li class="block">2</li> | |
<li class="block">3</li> | |
<li class="block">5</li> | |
</ul> | |
<span class="inline">X</span> | |
<span class="inline">Y</span> | |
<span class="inline">Z</span> | |
<article class="n-child"> | |
<section> A </section> | |
<div> X </div> | |
<div> X </div> | |
<section> B </section> | |
<section> C </section> | |
<section> D </section> | |
<section> E </section> | |
</article> | |
<article class="n-type"> | |
<section> A </section> | |
<section> B </section> | |
<aside> Aside </aside> | |
<aside> Aside </aside> | |
<aside> Aside </aside> | |
<aside> Aside </aside> | |
<section> C </section> | |
<section> D </section> | |
<section> E </section> | |
</article> | |
<article class="first-of-type"> | |
<section> A </section> | |
<section> B </section> | |
<aside> Aside 1 </aside> | |
<section> C </section> | |
<section> D </section> | |
<aside> Aside 2 </aside> | |
<section> E </section> | |
<footer>Footer</footer> | |
</article> | |
<article class="three"> | |
<section> A </section> | |
<section> B </section> | |
<aside> Aside </aside> | |
<section> C </section> | |
<section> D </section> | |
<section> E </section> | |
</article> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-size: 30px; | |
margin: 0; | |
padding: 0; | |
} | |
article { | |
border: 2px solid black; | |
} | |
label { | |
font-size: 16px; | |
} | |
.top-nav { | |
background-color: goldenrod; | |
height: 55px; | |
} | |
.top-nav li { | |
/*padding: 8px;*/ | |
/*margin: 8px;*/ | |
float: left; | |
list-style-type: none; | |
margin: 5px 15px 0 15px; | |
font-family: "Arial"; | |
cursor: pointer; | |
border: 1px solid rgba(0,0,0, .5); | |
/*border-width: 1px; | |
border-style: solid;*/ | |
/*border-color: black;*/ | |
border-radius: 10px; | |
/*border-bottom-width: 3px;*/ | |
padding: 5px; | |
} | |
.top-nav li:hover { | |
color: white; | |
} | |
.top-nav li:after { | |
content: '!'; | |
} | |
#page-id { | |
color: red; | |
} | |
.page-class { | |
color: green; | |
} | |
/* | |
.left { | |
float: left; | |
} | |
.right { | |
float: right; | |
} | |
.floated-p { | |
text-align: right; | |
}*/ | |
.p-ancestor > p { | |
color: orange; | |
} | |
ul > li { | |
list-style-type: none; | |
} | |
ul > li:not(:last-child):after { | |
content: ","; | |
} | |
.block { | |
display: inline; | |
} | |
.inline { | |
border: 1px solid black; | |
margin: 25px; | |
display: block; | |
} | |
/* | |
The algebraic formula below starts at 0. | |
So for even items, the first calculation | |
equates to 0, but there is no 0 item, so | |
nothing gets selected. | |
*/ | |
.n-child section:nth-child(even) { | |
/*.n-child section:nth-child(odd) {*/ | |
border: 1px solid black; | |
} | |
/* .n-child :not(:nth-child(even)) { */ | |
/* .n-type section:nth-of-type(odd) { */ | |
.n-type section:nth-of-type(2n+1) { | |
color: blue; | |
} | |
.first-of-type aside:first-of-type { | |
background-color: lime; | |
} | |
.first-of-type section:first-of-type { | |
background-color: lime; | |
} | |
.three section { | |
background-color: orange; | |
} | |
.three :first-child { | |
background-color: lime; | |
} | |
.three :last-child { | |
background-color: darkslategray; | |
} | |
article { | |
margin: 0 0 50px 0; | |
border: 1px solid gray; | |
padding: 10px; | |
} | |
article:before { | |
content: "Article parent element"; | |
border: 1px dashed gray; | |
display: block; | |
background-color: orange; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment