chanchan007/cheatsheet.html

## cheatsheet.html
<!DOCTYPE html>
<html>
  <head>
    <link href="./style.css" type="text/css" rel="stylesheet">
    <title>CSS Cheat Sheet</title>
  </head>

  <body>
    <h1>Commonn CSS Selectors & Specificity</h1>
    <h2>CSS Selectors</h2>
    <table>
        <thead>
          <th>Property</th>
          <th>Description</th>
        </thead>
        <tbody>
        <tr> <!--Row 1-->
          <td>font-family</td>
          <td>Changes the typeface of text on a web page</td>

          </tr>
          <tr> <!--Row 2-->
          <td>font-weight</td>
          <td>Controls how bold or thin text appears</td>
          </tr>
          <tr> <!--Row 3-->
          <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><!--Row 4-->
          <td>color</td>
          <td>Styles an element's foreground</td>
          </tr>
          <tr><!--Row 5-->
          <td>background-color</td>
          <td>Styles an element's background</td>
          </tr>
          <tr><!--Row 6-->
          <td>opacity</td>
          <td>Measure how transparent an element is. Is measured from 0 to 1.</td>
          </tr>
          <tr><!--Row 7-->
          <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>
    <table>
      <thead>
        <th>Specificities</th>
        <th>Priority</th>
      </thead>

      <tbody>
        <tr><!--Row 1-->
          <td>ID</td>
          <td class="high">High</td>
        </tr>

        <tr><!--Row 2-->
          <td>Class</td>
          <td class="medium">Medium</td>
        </tr>

        <tr><!--Row 3-->
          <td>Tag</td>
          <td class="low">Low</td>
        </tr>


## stylesheet.css

      body {
        background-color: #E5E7AF;
        font-family: monospace;
      }

        table td {
            text-align: center;
      }

        .high {
          color: red;
          font-weight: bold;
      }

        .medium {
        color: green;
        font-weight: bold;
      }

        .low {
        color: navy;
        font-weight:bold;
      }

        table {
        border-collapse: collapse;
        width: 75%;
      }

        table, th, td {
        border: 1px solid black;

        }

        h2 {
          text-decoration: underline;

     }
	<!DOCTYPE html>
	<html>
	<head>
	<link href="./style.css" type="text/css" rel="stylesheet">
	<title>CSS Cheat Sheet</title>
	</head>

	<body>
	<h1>Commonn CSS Selectors & Specificity</h1>
	<h2>CSS Selectors</h2>
	<table>
	<thead>
	<th>Property</th>
	<th>Description</th>
	</thead>
	<tbody>
	<tr> <!--Row 1-->
	<td>font-family</td>
	<td>Changes the typeface of text on a web page</td>

	</tr>
	<tr> <!--Row 2-->
	<td>font-weight</td>
	<td>Controls how bold or thin text appears</td>
	</tr>
	<tr> <!--Row 3-->
	<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><!--Row 4-->
	<td>color</td>
	<td>Styles an element's foreground</td>
	</tr>
	<tr><!--Row 5-->
	<td>background-color</td>
	<td>Styles an element's background</td>
	</tr>
	<tr><!--Row 6-->
	<td>opacity</td>
	<td>Measure how transparent an element is. Is measured from 0 to 1.</td>
	</tr>
	<tr><!--Row 7-->
	<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>
	<table>
	<thead>
	<th>Specificities</th>
	<th>Priority</th>
	</thead>

	<tbody>
	<tr><!--Row 1-->
	<td>ID</td>
	<td class="high">High</td>
	</tr>

	<tr><!--Row 2-->
	<td>Class</td>
	<td class="medium">Medium</td>
	</tr>

	<tr><!--Row 3-->
	<td>Tag</td>
	<td class="low">Low</td>
	</tr>

	body {
	background-color: #E5E7AF;
	font-family: monospace;
	}

	table td {
	text-align: center;
	}

	.high {
	color: red;
	font-weight: bold;
	}

	.medium {
	color: green;
	font-weight: bold;
	}

	.low {
	color: navy;
	font-weight:bold;
	}

	table {
	border-collapse: collapse;
	width: 75%;
	}

	table, th, td {
	border: 1px solid black;

	}

	h2 {
	text-decoration: underline;

	}