clhenrick/index.html

## index.html
<!doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Day 02: CSS</title>
  <link rel="stylesheet" type="text/css" href="./styles.css"> <!-- I modified the path here so the css file will show up on the live code -->
</head>
<body>

  <a href="http://cartodb.com/">CartoDB</a> is Awesome!

  <p>The <a href="http://www.thebeatles.com/">Beatles</a> were an English rock band that formed in Liverpool, in 1960. With John Lennon, Paul McCartney, George Harrison and Ringo Starr, they became <span>widely regarded as the greatest and most influential act of the rock era.[1] <em>Rooted in skiffle, beat and 1950s rock and roll, the Beatles later experimented with several genres, ranging from pop ballads to psychedelic and hard rock, often incorporating classical elements in innovative ways.</em> In the early 1960s,</span> their enormous popularity first emerged as "Beatlemania", but as their songwriting grew in sophistication they came to be perceived as an embodiment of the ideals shared by the era's sociocultural revolutions.
  </p>
  <p>
  Habeo philosophia ius an, posse consetetur per in. Eum quodsi evertitur cu, per ne dolores dissentiet, omittam intellegam te nec. Graece latine his ut. Ei facete dissentiunt nam, ut impedit assueverit qui. Et eum facilisi tractatos, et eam zril feugait dissentiet, diam mucius offendit vim in.
  </p>
  <p class="speacil">
  Tollit vituperatoribus sea ea, nisl ancillae salutandi sea ne, ne aeterno persequeris sed. Mei purto labitur delectus no. Cum id sumo erant, eirmod labores vituperatoribus in pri, ei doctus aliquam duo. Purto tota hendrerit mea id, ut libris persecuti assueverit vis. Nisl minim recteque vix cu, omnes fierent eu sit.
  </p>
  <p>
  Vix omittam tacimates inciderint ad, per regione deserunt adversarium ea. Vix ut eius mentitum. Eu has fugit laboramus. Tamquam minimum invenire in eam.
  </p>
  <p class="speacil last">
  In vix malis putant malorum, diam tollit putant has ut. Suscipiantur reprehendunt ex sed, suas iisque mediocrem id eos. Probo nonumes tincidunt sea no, vim id albucius imperdiet liberavisse. Per id summo tibique. Nonumy noster legendos qui ad.
</p>

<div>
  some text in here.
</div>

</body>
</html>

## styles.css
/* here's a comment in CSS */

/* other elements will inherit these properties from our <body> tag */
body {
  font-size: 16px;
  font-family: sans-serif;
  background-color: #D9D8AA;
}

/* this selector is for all our paragraph <p> tags */
p {
  background-color: black;
  color: white;

  /* set multiple fall back fonts separated by commas */
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
}

/* select all <p> tags with a class of "speacil" */
p.speacil {
  font-family: Georgia, Times, "Times New Roman", serif;
  color: red;
}

/* select all <p> with class names of "speacil" AND "last" */
p.speacil.last {
/*  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  font-size: 20px;
  font-weight: 900; */

  /* this is shorthand for the above 3 individual font properties */
  font: italic 900 20px "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  color: orange;
}

/* select all <em> tags that are a descendant/child of <p> tags */
p em {
  font-style: normal;
  font-family: serif;
}

/* select all <span> tags that are a descendant/child of <p> tags  */
p span {
  background-color: white;
}

/* slect all <a> tags */
a {
  color: #00FF07;
  text-decoration: none;
}

/* select all <a> tags in a "visited" state. This is a psuedo class */
a:visited {
  color: #009207;
}

/* select all <a> tags in a "hover" state. This is a psuedo class. */
/* note that the "hover" psuedo class must come after the "visited" one in our CSS document,
otherwise the "visited" will override our "hover" */
a:hover {
  color: yellow;
}
	<!doctype HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Day 02: CSS</title>
	<link rel="stylesheet" type="text/css" href="./styles.css"> <!-- I modified the path here so the css file will show up on the live code -->
	</head>
	<body>

	<a href="http://cartodb.com/">CartoDB</a> is Awesome!

	<p>The <a href="http://www.thebeatles.com/">Beatles</a> were an English rock band that formed in Liverpool, in 1960. With John Lennon, Paul McCartney, George Harrison and Ringo Starr, they became <span>widely regarded as the greatest and most influential act of the rock era.[1] <em>Rooted in skiffle, beat and 1950s rock and roll, the Beatles later experimented with several genres, ranging from pop ballads to psychedelic and hard rock, often incorporating classical elements in innovative ways.</em> In the early 1960s,</span> their enormous popularity first emerged as "Beatlemania", but as their songwriting grew in sophistication they came to be perceived as an embodiment of the ideals shared by the era's sociocultural revolutions.
	</p>
	<p>
	Habeo philosophia ius an, posse consetetur per in. Eum quodsi evertitur cu, per ne dolores dissentiet, omittam intellegam te nec. Graece latine his ut. Ei facete dissentiunt nam, ut impedit assueverit qui. Et eum facilisi tractatos, et eam zril feugait dissentiet, diam mucius offendit vim in.
	</p>
	<p class="speacil">
	Tollit vituperatoribus sea ea, nisl ancillae salutandi sea ne, ne aeterno persequeris sed. Mei purto labitur delectus no. Cum id sumo erant, eirmod labores vituperatoribus in pri, ei doctus aliquam duo. Purto tota hendrerit mea id, ut libris persecuti assueverit vis. Nisl minim recteque vix cu, omnes fierent eu sit.
	</p>
	<p>
	Vix omittam tacimates inciderint ad, per regione deserunt adversarium ea. Vix ut eius mentitum. Eu has fugit laboramus. Tamquam minimum invenire in eam.
	</p>
	<p class="speacil last">
	In vix malis putant malorum, diam tollit putant has ut. Suscipiantur reprehendunt ex sed, suas iisque mediocrem id eos. Probo nonumes tincidunt sea no, vim id albucius imperdiet liberavisse. Per id summo tibique. Nonumy noster legendos qui ad.
	</p>

	<div>
	some text in here.
	</div>

	</body>
	</html>
	/* here's a comment in CSS */

	/* other elements will inherit these properties from our <body> tag */
	body {
	font-size: 16px;
	font-family: sans-serif;
	background-color: #D9D8AA;
	}

	/* this selector is for all our paragraph <p> tags */
	p {
	background-color: black;
	color: white;

	/* set multiple fall back fonts separated by commas */
	font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
	}

	/* select all <p> tags with a class of "speacil" */
	p.speacil {
	font-family: Georgia, Times, "Times New Roman", serif;
	color: red;
	}

	/* select all <p> with class names of "speacil" AND "last" */
	p.speacil.last {
	/* font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	font-size: 20px;
	font-weight: 900; */

	/* this is shorthand for the above 3 individual font properties */
	font: italic 900 20px "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	color: orange;
	}

	/* select all <em> tags that are a descendant/child of <p> tags */
	p em {
	font-style: normal;
	font-family: serif;
	}

	/* select all <span> tags that are a descendant/child of <p> tags */
	p span {
	background-color: white;
	}

	/* slect all <a> tags */
	a {
	color: #00FF07;
	text-decoration: none;
	}

	/* select all <a> tags in a "visited" state. This is a psuedo class */
	a:visited {
	color: #009207;
	}

	/* select all <a> tags in a "hover" state. This is a psuedo class. */
	/* note that the "hover" psuedo class must come after the "visited" one in our CSS document,
	otherwise the "visited" will override our "hover" */
	a:hover {
	color: yellow;
	}