DanielJvV/Codecademy Challenge Make a Cheatsheet.css

## Codecademy Challenge Make a Cheatsheet.css
body {
  font-family: cursive;
}
h1 {
  text-align: center;
  color: Red;
}

h2 {
  color: blue;
}

h3 {
  text-align: center;
  color: orange;
}

span {
  font-family: Rockwell;
  Font-size: 15px;
  background-color: gainsboro;
}

table {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  background-color: lightskyblue;
}

th {
  border: 5px solid black;
}

td {
  border: 5px solid black;
}

## Codecademy Challenge Make a Cheatsheet.html
<!DOCTYPE html>
<html>
  <head>
    <link href="./styles.css" type="text/css" rel="stylesheet">
    <title>Cheat Sheet</title>
  </head>
  <header>
    <h1>Cheat sheet for HTML Tags and Elements</h1>
    <h2>Semantic Structure Tags</h2>
    <h3>Structure Elements (Containers):</h3>
  </header>
    <body>
    <table>
      <thead>
        <tr>
          <th scope="col">Tag</th>
          <th scope="col">Name</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>&lt;!DOCTYPE html&gt;</span></td>
          <td>Always First</td>
          <td>Declares that the file is HTML. Always the first line of code.</td>
        </tr>
        <tr>
          <td><span>&lt;html&gt;</span></td>
          <td>HTML</td>
          <td>Always first container. Everything is nested inside this tag.</td>
        </tr>
        <tr>
          <td><span>&lt;head&gt;</span></td>
          <td>Head</td>
          <td>Contains info about the website that that does not render on the page. Example: &lt;title&gt;</td>
        </tr>
        <tr>
          <td><span>&lt;title&gt;</span></td>
          <td>Title</td>
          <td>Changes the name displayed on the browser's tab.</td>
        </tr>
        <tr>
          <td><span>&lt;body&gt;</span></td>
          <td>Body</td>
          <td>Contians all content that needs to be displayed on the page.</td>
        </tr>
        <tr>
          <td><span>&lt;header&gt;</span></td>
          <td>Header</td>
          <td>A container used for navigational links or intro content that contains &lt;h1&gt; to &lt;h6&gt; headings.</td>
        </tr>
        <tr>
          <td><span>&lt;nav&gt;</span></td>
          <td>Nav</td>
          <td>Used to define a block of navigational links such as menus and tables of content.</td>
        </tr>
        <tr>
          <td><span>&lt;main&gt;</span></td>
          <td>Main</td>
          <td>Used to contian the dominant content within the webpage. (Does not contain &lt;header&gt; or &lt;footer&gt;</td>
        </tr>
        <tr>
          <td><span>&lt;section&gt;</span></td>
          <td>Section</td>
          <td>Used to difine (contain) chapters,headings or other info with the same theme.</td>
        </tr>
        <tr>
          <td><span>&lt;article&gt;</span></td>
          <td>Article</td>
          <td>Contains content that makes sense on it's own. Example: a blog or articles.</td>
        </tr>
        <tr>
          <td><span>&lt;aside&gt;</span></td>
          <td>Aside</td>
          <td>Used to mark additional info that enchances another element but isn't needed to understand the main content.</td>
        </tr>
        <tr>
          <td><span>&lt;figure&gt;</span></td>
          <td>Figure</td>
          <td>An element used to encapsulate media such as images, illustrations, diagrams, etc.</td>
        </tr>
        <tr>
          <td><span>&lt;figcaption&gt;</span></td>
          <td>Figure Caption</td>
          <td>Used to label the image or illustration. (The label moves with the image, whereas &lt;p&gt; wouldn't.)</td>
        </tr>
        <tr>
          <td><span>&lt;footer&gt;</span></td>
          <td>Footer</td>
          <td>The bottom content. Info like: Contact info, Copyright info, Terms of use, Site map, etc.</td>
        </tr>
      </tbody>
    </table>
  </body>
  <footer>
    <p>Created by Daniel Jansen van Vuuren</p>
    <p>Thanks to codecademy.com</p>
  </footer>
</html>
	body {
	font-family: cursive;
	}
	h1 {
	text-align: center;
	color: Red;
	}

	h2 {
	color: blue;
	}

	h3 {
	text-align: center;
	color: orange;
	}

	span {
	font-family: Rockwell;
	Font-size: 15px;
	background-color: gainsboro;
	}

	table {
	border-style: solid;
	border-color: black;
	border-width: 5px;
	background-color: lightskyblue;
	}

	th {
	border: 5px solid black;
	}

	td {
	border: 5px solid black;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<link href="./styles.css" type="text/css" rel="stylesheet">
	<title>Cheat Sheet</title>
	</head>
	<header>
	<h1>Cheat sheet for HTML Tags and Elements</h1>
	<h2>Semantic Structure Tags</h2>
	<h3>Structure Elements (Containers):</h3>
	</header>
	<body>
	<table>
	<thead>
	<tr>
	<th scope="col">Tag</th>
	<th scope="col">Name</th>
	<th scope="col">Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><span><!DOCTYPE html></span></td>
	<td>Always First</td>
	<td>Declares that the file is HTML. Always the first line of code.</td>
	</tr>
	<tr>
	<td><span><html></span></td>
	<td>HTML</td>
	<td>Always first container. Everything is nested inside this tag.</td>
	</tr>
	<tr>
	<td><span><head></span></td>
	<td>Head</td>
	<td>Contains info about the website that that does not render on the page. Example: <title></td>
	</tr>
	<tr>
	<td><span><title></span></td>
	<td>Title</td>
	<td>Changes the name displayed on the browser's tab.</td>
	</tr>
	<tr>
	<td><span><body></span></td>
	<td>Body</td>
	<td>Contians all content that needs to be displayed on the page.</td>
	</tr>
	<tr>
	<td><span><header></span></td>
	<td>Header</td>
	<td>A container used for navigational links or intro content that contains <h1> to <h6> headings.</td>
	</tr>
	<tr>
	<td><span><nav></span></td>
	<td>Nav</td>
	<td>Used to define a block of navigational links such as menus and tables of content.</td>
	</tr>
	<tr>
	<td><span><main></span></td>
	<td>Main</td>
	<td>Used to contian the dominant content within the webpage. (Does not contain <header> or <footer></td>
	</tr>
	<tr>
	<td><span><section></span></td>
	<td>Section</td>
	<td>Used to difine (contain) chapters,headings or other info with the same theme.</td>
	</tr>
	<tr>
	<td><span><article></span></td>
	<td>Article</td>
	<td>Contains content that makes sense on it's own. Example: a blog or articles.</td>
	</tr>
	<tr>
	<td><span><aside></span></td>
	<td>Aside</td>
	<td>Used to mark additional info that enchances another element but isn't needed to understand the main content.</td>
	</tr>
	<tr>
	<td><span><figure></span></td>
	<td>Figure</td>
	<td>An element used to encapsulate media such as images, illustrations, diagrams, etc.</td>
	</tr>
	<tr>
	<td><span><figcaption></span></td>
	<td>Figure Caption</td>
	<td>Used to label the image or illustration. (The label moves with the image, whereas <p> wouldn't.)</td>
	</tr>
	<tr>
	<td><span><footer></span></td>
	<td>Footer</td>
	<td>The bottom content. Info like: Contact info, Copyright info, Terms of use, Site map, etc.</td>
	</tr>
	</tbody>
	</table>
	</body>
	<footer>
	<p>Created by Daniel Jansen van Vuuren</p>
	<p>Thanks to codecademy.com</p>
	</footer>
	</html>