codecademydev/index.html Secret

## index.html
<DOCTYPE html>
  <html>
    <head>
      <link href="./styles.css" rel="stylesheet">
    </head>
    <body>
      <header>
        <h1>My Cheatsheet Practice</h1>
      </header>
      <main>
        <article>
          <h2>CSS Selectors</h2>
            <h3>What are they?</h3>
              <p>CSS selectors define the elements to which a set of CSS rules apply.
              </p>
            <h3>Basic Selectors</h3>
              <table>
                <th>
                  <tr class="table_header">
                    <td>Name</td>
                    <td>Use</td>
                    <td>Syntax</td>
                    <td>Example</td>
                  </tr>
                </th>
                <tr>
                  <td>Universal Selector</td>
                  <td>Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.</td>
                  <td><span class="highlight-text">*</span> <span class="highlight-text"><em>ns</em>|*</span> <span class="highlight-text">*|*</span></td>
                  <td><span class="highlight-text">*</span> will match all the elements of the document.</td>
                </tr>
                <tr>
                  <td>Type Selector</td>
                  <td>Selects all elements that have the given node name.</td>
                  <td><span class="highlight-text"><em>elementname<em></span></td>
                  <td><span class="highlight-text">input</span> will match any &lt;input> <span class="highlight-text">element.</span></td>
                </tr>
                <tr>
                  <td>Class Selector</td>
                  <td>Selects all elements that have the given <span class="highlight-text">class</span> attribute.</td>
                  <td><span class="highlight-text"><em>.classname</em></span></td>
                  <td><span class="highlight-text">.index</span> will match any element that has a class of "index".</td>
                </tr>
                <tr>
                  <td>ID Selector</td>
                  <td>Selects an element based on the value of its <span class="highlight-text">id</span> attribute. There should be only one element with a given ID in a document.</td>
                  <td><span class="highlight-text">#<em>idname</em></span></td>
                  <td><span class="highlight-text">#toc</span> will match the element that has the ID "toc".
                  </td>
                </tr>
                <tr>
                  <td>Attribute Selector</td>
                  <td>Selects all elements that have the given attribute.</td>
                  <td><span class="highlight-text">[<em>attr</em>]</span> <span class="highlight-text">[<em>attr</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr~</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr|</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr^</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr$</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr*</em>=<em>value</em>]</span></td>
                  <td><span class="highlight-text">[autoplay]</span> will match all elements that have the <span class="highlight-text">autoplay</span> attribute set (to any value).</td>
                </tr>
              </table>
        </article>
      </main>
    </body>
  </html>

## styles.css
* {
  font-family: Helvetica;
}

body {
  background-color: AliceBlue;
  margin-left: 3%;
}

h1 {
  color: MidNightBlue;
  text-align: center;
  background-image: url('https://graphicriver.img.customer.envatousercontent.com/files/71346744/preview.jpg?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=ac29dcfe3f1655d6afd8d479201b8ffa');
}

h2 {
  color: RoyalBlue;
}

h3 {
  color: DimGrey;
}

table {
  border-collapse: collapse;
  font-size: 13px;
  margin-right: 3%
}

.table_header {
  background-color: RoyalBlue;
  color: Gainsboro;
  font-weight: bold;
  text-align: center;
}

table td {
  padding: 5px;
  border: 1px solid RoyalBlue;
}

.highlight-text {
  background-color: LightBlue;
}
	<DOCTYPE html>
	<html>
	<head>
	<link href="./styles.css" rel="stylesheet">
	</head>
	<body>
	<header>
	<h1>My Cheatsheet Practice</h1>
	</header>
	<main>
	<article>
	<h2>CSS Selectors</h2>
	<h3>What are they?</h3>
	<p>CSS selectors define the elements to which a set of CSS rules apply.
	</p>
	<h3>Basic Selectors</h3>
	<table>
	<th>
	<tr class="table_header">
	<td>Name</td>
	<td>Use</td>
	<td>Syntax</td>
	<td>Example</td>
	</tr>
	</th>
	<tr>
	<td>Universal Selector</td>
	<td>Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.</td>
	<td><span class="highlight-text"></span> <span class="highlight-text"><em>ns</em>\|</span> <span class="highlight-text">\|</span></td>
	<td><span class="highlight-text">*</span> will match all the elements of the document.</td>
	</tr>
	<tr>
	<td>Type Selector</td>
	<td>Selects all elements that have the given node name.</td>
	<td><span class="highlight-text"><em>elementname<em></span></td>
	<td><span class="highlight-text">input</span> will match any <input> <span class="highlight-text">element.</span></td>
	</tr>
	<tr>
	<td>Class Selector</td>
	<td>Selects all elements that have the given <span class="highlight-text">class</span> attribute.</td>
	<td><span class="highlight-text"><em>.classname</em></span></td>
	<td><span class="highlight-text">.index</span> will match any element that has a class of "index".</td>
	</tr>
	<tr>
	<td>ID Selector</td>
	<td>Selects an element based on the value of its <span class="highlight-text">id</span> attribute. There should be only one element with a given ID in a document.</td>
	<td><span class="highlight-text">#<em>idname</em></span></td>
	<td><span class="highlight-text">#toc</span> will match the element that has the ID "toc".
	</td>
	</tr>
	<tr>
	<td>Attribute Selector</td>
	<td>Selects all elements that have the given attribute.</td>
	<td><span class="highlight-text">[<em>attr</em>]</span> <span class="highlight-text">[<em>attr</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr~</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr\|</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr^</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr$</em>=<em>value</em>]</span> <span class="highlight-text">[<em>attr*</em>=<em>value</em>]</span></td>
	<td><span class="highlight-text">[autoplay]</span> will match all elements that have the <span class="highlight-text">autoplay</span> attribute set (to any value).</td>
	</tr>
	</table>
	</article>
	</main>
	</body>
	</html>
	* {
	font-family: Helvetica;
	}

	body {
	background-color: AliceBlue;
	margin-left: 3%;
	}

	h1 {
	color: MidNightBlue;
	text-align: center;
	background-image: url('https://graphicriver.img.customer.envatousercontent.com/files/71346744/preview.jpg?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=ac29dcfe3f1655d6afd8d479201b8ffa');
	}

	h2 {
	color: RoyalBlue;
	}

	h3 {
	color: DimGrey;
	}

	table {
	border-collapse: collapse;
	font-size: 13px;
	margin-right: 3%
	}

	.table_header {
	background-color: RoyalBlue;
	color: Gainsboro;
	font-weight: bold;
	text-align: center;
	}

	table td {
	padding: 5px;
	border: 1px solid RoyalBlue;
	}

	.highlight-text {
	background-color: LightBlue;
	}