codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>CSS selectors and specificity</title>
    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <header>
      <h1>CSS selctors and specificity reference</h1>
    </header>
    <main>
      <section id="selectors">
      <h2>CSS Selectors</h2>
      <p>The various ways we can select an element are by using </p>
      <ul>
        <li>Tag names</li>
        <li>Class names</li>
        <li>ID attribute</li>
      </ul>
      <h3>Using Tag names:</h3>
      <p>When using tag names as a selctor the syntax is to use tag name followed by curly braces{}.<br><span>p{}</span></p>
      <h3>Using Class names:</h3>
      <p>When using class names as a selector we place a '.' in the declaration followed by class name and braces.<br><span>.p{}</span></p>
      <h3>Using ID attributes:</h3>
      <p>When using ID attribute we place a '#' in declaration followed by ID and curly braces.<br> <span>#Id{}</span></p>
      </section>
      <section>
        <h2>Specificity</h2>
        <p>Since there are many ways we can select an element to apply css we encounter situations where same element has been given same property different values in different declarations. In such situations the selector with most specific declaration is given precedence. </p>
        <ul>
          <li>When we declare a CSS selector with tag name then all the elements of that tag name in our HTML document will follow it. So this is the least specific</li><br>
          <li>When we want to select elements with class name then of all the elements of a type only the one with this class name follow the CSS.This is more specific than previous ones</li><br>
          <li>When we want to select elements with class name and we want to select only specific elements that follow the class this can be done by using element and class names separated by '.'.This is more specific than previous ones<br><span>p.topic1{}</span></li><br>
          <li>ID attribute is unique for whole document. So this is more specific </li><br>
          <li>When we want to make a property fixed irrespective of all other selectors we specify term <b>!important</b> next to the property value followed by ';' <br> <span>color:red !important;</span></li>
        </ul>
      </section>
      <table>
        <thead>
          <tr>
            <th>Selector</th>
            <th>Syntax</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tag Name</td>
            <td>tagname{<br><br>}</td>
          </tr>
          <tr>
            <td>Class Name</td>
            <td>.classname{<br><br>}</td>
          </tr>
          <tr>
            <td>ID attribute</td>
            <td>#ID{<br><br>}</td>
          </tr>
        </tbody>
      </table>
    </main>
  </body>
</html>

## styles.css
body{
  background-color: Azure;
  color:black;
  font-family:"monotype carsiva";
}
h1{
  text-align:center;
  font-weight:bold;
  font-family:"times new roman";
}
span{
  background-color:gray;
  padding-left:12px;
  padding-right:12px;
  text-align:center;
  opacity:0.75;
}
table{
  border:2px solid black;
  width:50%;
}
td{
  text-align:center;
  background-color:lightgreen;
}
th{
  background-color:limegreen;
  height:2em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS selectors and specificity</title>
	<link href="styles.css" type="text/css" rel="stylesheet">
	</head>
	<body>
	<header>
	<h1>CSS selctors and specificity reference</h1>
	</header>
	<main>
	<section id="selectors">
	<h2>CSS Selectors</h2>
	<p>The various ways we can select an element are by using </p>
	<ul>
	<li>Tag names</li>
	<li>Class names</li>
	<li>ID attribute</li>
	</ul>
	<h3>Using Tag names:</h3>
	<p>When using tag names as a selctor the syntax is to use tag name followed by curly braces{}.<br><span>p{}</span></p>
	<h3>Using Class names:</h3>
	<p>When using class names as a selector we place a '.' in the declaration followed by class name and braces.<br><span>.p{}</span></p>
	<h3>Using ID attributes:</h3>
	<p>When using ID attribute we place a '#' in declaration followed by ID and curly braces.<br> <span>#Id{}</span></p>
	</section>
	<section>
	<h2>Specificity</h2>
	<p>Since there are many ways we can select an element to apply css we encounter situations where same element has been given same property different values in different declarations. In such situations the selector with most specific declaration is given precedence. </p>
	<ul>
	<li>When we declare a CSS selector with tag name then all the elements of that tag name in our HTML document will follow it. So this is the least specific</li><br>
	<li>When we want to select elements with class name then of all the elements of a type only the one with this class name follow the CSS.This is more specific than previous ones</li><br>
	<li>When we want to select elements with class name and we want to select only specific elements that follow the class this can be done by using element and class names separated by '.'.This is more specific than previous ones<br><span>p.topic1{}</span></li><br>
	<li>ID attribute is unique for whole document. So this is more specific </li><br>
	<li>When we want to make a property fixed irrespective of all other selectors we specify term <b>!important</b> next to the property value followed by ';' <br> <span>color:red !important;</span></li>
	</ul>
	</section>
	<table>
	<thead>
	<tr>
	<th>Selector</th>
	<th>Syntax</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Tag Name</td>
	<td>tagname{<br><br>}</td>
	</tr>
	<tr>
	<td>Class Name</td>
	<td>.classname{<br><br>}</td>
	</tr>
	<tr>
	<td>ID attribute</td>
	<td>#ID{<br><br>}</td>
	</tr>
	</tbody>
	</table>
	</main>
	</body>
	</html>
	body{
	background-color: Azure;
	color:black;
	font-family:"monotype carsiva";
	}
	h1{
	text-align:center;
	font-weight:bold;
	font-family:"times new roman";
	}
	span{
	background-color:gray;
	padding-left:12px;
	padding-right:12px;
	text-align:center;
	opacity:0.75;
	}
	table{
	border:2px solid black;
	width:50%;
	}
	td{
	text-align:center;
	background-color:lightgreen;
	}
	th{
	background-color:limegreen;
	height:2em;
	}