codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Table Reference</title>
    <link href="styles.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <h1>Commonn CSS Selectors & Specificity</h1>
    <h2>CSS Selectors</h2>
<!----------Selector Table---------->
    <table>
      <thead>
          <th>Property</th>
          <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>font-family</td>
          <td>Changes the typeface of text on a web page</td>
        </tr>
        <tr>
          <td>font-weight</td>
          <td>Controls how bold or thin text appears</td>
        </tr>
        <tr>
          <td>font-size</td>
          <td>Modifyies the font size</td>
        </tr>
        <tr>
          <td>text-align</td>
          <td>Aligns text in center or on left/right side of web page</td>
        </tr>
        <tr>
          <td>color</td>
          <td>Styles an element's foreground</td>
        </tr>
        <tr>
          <td>background-color</td>
          <td>Styles an element's background</td>
        </tr>
        <tr>
          <td>opacity</td>
          <td>Measure how transparent an element is. Is measured from 0 to 1.</td>
        </tr>
        <tr>
          <td>background-image</td>
          <td>Sets an element background to display an image. Works with URL value</td>
        </tr>
      </tbody>
    </table>
        <h2>CSS Specificity</h2>
<!----------Specificity Table---------->
    <table>
      <thead>
        <th>Specificities</th>
        <th>Priority</th>
      </thead>
      <tbody>
        <tr>
          <td>ID</td>
          <td>ID selectors have a higher specificity than attribute and Class selectors</td>
        </tr>
        <tr>
          <td>Class</td>
          <td>Class have a higher specificity than attribute selectors but lower than ID selectors</td>
        </tr>
        <tr>
          <td>Element</td>
          <td>Elements are the lower in specificity rank</td>
        </tr>
        <tr>
          <td>!important</td>
          <td>Overrides all other denoted styles; this is bad practice as it can make debugging CSS much more difficult</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

## styles.css
* {
  background-color: Aliceblue;
  text-align: center;
  font-family: Arial, sans-serif;
}
h2 {
  color: blue;
}
table {
  border: 2px solid darkblue;
  width:70%;
  margin-left:15%;
  margin-right:15%;
}
th {
  background-color: blue;
  border: 2px solid darkblue;
}
td {
  border: 2px solid darkblue;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS Table Reference</title>
	<link href="styles.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
	<h1>Commonn CSS Selectors & Specificity</h1>
	<h2>CSS Selectors</h2>
	<!----------Selector Table---------->
	<table>
	<thead>
	<th>Property</th>
	<th>Description</th>
	</thead>
	<tbody>
	<tr>
	<td>font-family</td>
	<td>Changes the typeface of text on a web page</td>
	</tr>
	<tr>
	<td>font-weight</td>
	<td>Controls how bold or thin text appears</td>
	</tr>
	<tr>
	<td>font-size</td>
	<td>Modifyies the font size</td>
	</tr>
	<tr>
	<td>text-align</td>
	<td>Aligns text in center or on left/right side of web page</td>
	</tr>
	<tr>
	<td>color</td>
	<td>Styles an element's foreground</td>
	</tr>
	<tr>
	<td>background-color</td>
	<td>Styles an element's background</td>
	</tr>
	<tr>
	<td>opacity</td>
	<td>Measure how transparent an element is. Is measured from 0 to 1.</td>
	</tr>
	<tr>
	<td>background-image</td>
	<td>Sets an element background to display an image. Works with URL value</td>
	</tr>
	</tbody>
	</table>
	<h2>CSS Specificity</h2>
	<!----------Specificity Table---------->
	<table>
	<thead>
	<th>Specificities</th>
	<th>Priority</th>
	</thead>
	<tbody>
	<tr>
	<td>ID</td>
	<td>ID selectors have a higher specificity than attribute and Class selectors</td>
	</tr>
	<tr>
	<td>Class</td>
	<td>Class have a higher specificity than attribute selectors but lower than ID selectors</td>
	</tr>
	<tr>
	<td>Element</td>
	<td>Elements are the lower in specificity rank</td>
	</tr>
	<tr>
	<td>!important</td>
	<td>Overrides all other denoted styles; this is bad practice as it can make debugging CSS much more difficult</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>
	* {
	background-color: Aliceblue;
	text-align: center;
	font-family: Arial, sans-serif;
	}
	h2 {
	color: blue;
	}
	table {
	border: 2px solid darkblue;
	width:70%;
	margin-left:15%;
	margin-right:15%;
	}
	th {
	background-color: blue;
	border: 2px solid darkblue;
	}
	td {
	border: 2px solid darkblue;
	}