Cazzowary/Index.html

## Index.html
<!DOCTYPE html>
<HTML>
  <head>
    <title>CSS Selectors and Specificity Rules</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
  </head>

  <body class="mainbody">
    <h1 class="pagetitle">CSS Selectors & Specificity</h1>
    <hr>
    <section class="intro">
      <p class="mainintro">CSS is simple, but powerful. To use it correctly, one must understand both how selectors work, as well as how specificity works. This page is a quick overview of what I have learned about CSS selectors and specificity.</p>
    </section>
      <hr>
      <h3 class="section_title">CSS Selectors</h3>
      <p class="selectors_p"> CSS uses selectors to tell the browser which html elements to apply certain styles to. Selectors can apply styles to broad categories, or to very specific items. The browser interprets your CSS in a certain way to tell it which elements get included in what CSS calls. This allows the developer a great deal of flexibility in how they apply their CSS, and can also save a great deal of time and effort.</p>
        <p>It is worth noting here that Inline CSS should be avoided, and that your CSS should always be imported from an external stylesheet. This separates style from substance, and allows you to use the same CSS styling for multiple pages, encouraging a coherent style across your website.</p>
        <hr>

    <h3 class="spec_title">Specificity in CSS</h3>
    <p class="spec_p"><span><strong>Specificity</strong></span> in CSS refers to the order in which CSS is applied to various elements within your HTML code.</p>

    <div class="spec_table">
      <table>
        <thead>
          <tr>
            <th>Element</th>
            <th>Selector example</th>
            <th>Level of Specificity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Main Element</td>
            <td class="code">"body", "h1", "p"</td>
            <td>Broadest specificity</td>
          </tr>
          <tr>
            <td>Class</td>
            <td class="code">".mainIntro", ".spec_table", ".logo_image"</td>
            <td>Next level of specificity. Overrides broad elements and applies to all items with a matching class.</td>
          </tr>
          <tr>
            <td>ID</td>
            <td class="code">"#page_title", "#contact_table", "#register_form"</td>
            <td>Highest specificity. ONLY applies to particular unique item with particular ID.</td>
          </tr>

        </tbody>
      </table>
    </div>
</body>
</HTML>

## style.css
.mainbody {
	background-color: #0B0C10;
	color: #C5C6C7;
	width: 60%;

}

.pagetitle {
	text-align: center;
	color: #66FCF1;
	font-size: 100px;
	font-family: Arial;
}

h3 {
	color: #45A29E;
	background-color: #1F2833;
	width: 20%;
}

strong {
	color: #66FCF1;
}

table {
  border: 2px solid #66FCF1;
  width: 650px;
  margin: 0 auto;
}

thead {
  background-color: #1F2833;
}

td {
  border-top: 1px solid  #45A29E;
}

td.code {
	font-family: "Courier New";
	background-color: #C5C6C7;
	color: #0B0C10;
}
	<!DOCTYPE html>
	<HTML>
	<head>
	<title>CSS Selectors and Specificity Rules</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
	</head>

	<body class="mainbody">
	<h1 class="pagetitle">CSS Selectors & Specificity</h1>
	<hr>
	<section class="intro">
	<p class="mainintro">CSS is simple, but powerful. To use it correctly, one must understand both how selectors work, as well as how specificity works. This page is a quick overview of what I have learned about CSS selectors and specificity.</p>
	</section>
	<hr>
	<h3 class="section_title">CSS Selectors</h3>
	<p class="selectors_p"> CSS uses selectors to tell the browser which html elements to apply certain styles to. Selectors can apply styles to broad categories, or to very specific items. The browser interprets your CSS in a certain way to tell it which elements get included in what CSS calls. This allows the developer a great deal of flexibility in how they apply their CSS, and can also save a great deal of time and effort.</p>
	<p>It is worth noting here that Inline CSS should be avoided, and that your CSS should always be imported from an external stylesheet. This separates style from substance, and allows you to use the same CSS styling for multiple pages, encouraging a coherent style across your website.</p>
	<hr>

	<h3 class="spec_title">Specificity in CSS</h3>
	<p class="spec_p"><span><strong>Specificity</strong></span> in CSS refers to the order in which CSS is applied to various elements within your HTML code.</p>

	<div class="spec_table">
	<table>
	<thead>
	<tr>
	<th>Element</th>
	<th>Selector example</th>
	<th>Level of Specificity</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Main Element</td>
	<td class="code">"body", "h1", "p"</td>
	<td>Broadest specificity</td>
	</tr>
	<tr>
	<td>Class</td>
	<td class="code">".mainIntro", ".spec_table", ".logo_image"</td>
	<td>Next level of specificity. Overrides broad elements and applies to all items with a matching class.</td>
	</tr>
	<tr>
	<td>ID</td>
	<td class="code">"#page_title", "#contact_table", "#register_form"</td>
	<td>Highest specificity. ONLY applies to particular unique item with particular ID.</td>
	</tr>

	</tbody>
	</table>
	</div>
	</body>
	</HTML>
	.mainbody {
	background-color: #0B0C10;
	color: #C5C6C7;
	width: 60%;

	}

	.pagetitle {
	text-align: center;
	color: #66FCF1;
	font-size: 100px;
	font-family: Arial;
	}

	h3 {
	color: #45A29E;
	background-color: #1F2833;
	width: 20%;
	}

	strong {
	color: #66FCF1;
	}

	table {
	border: 2px solid #66FCF1;
	width: 650px;
	margin: 0 auto;
	}

	thead {
	background-color: #1F2833;
	}

	td {
	border-top: 1px solid #45A29E;
	}

	td.code {
	font-family: "Courier New";
	background-color: #C5C6C7;
	color: #0B0C10;
	}