cassiecodes333/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
</head>

<title>HTML & CSS Cheatsheet</title>

<div>
    <h1> HTML Elements, Attributes, and Styles </h1> <br>
    <h2>HTML Elements:</h2>
    <h3> Elements structures and defines content on a webpage in HTML</h3>
</div>
<div>
    <table class="center">
        <tr>
            <th>Start Tag</th>
            <th> Element Content </th>
            <th> End Tag </th>
            <th> Description </th>
        </tr>
        <tr>
          <td>&lt;body&gt;</td>
          <td> Body Element </td>
          <td>&lt;/body&gt;</td>
          <td>Only content inside the opening and closing body tags can be displayed</td>
        </tr>
        <tr>
          <td>&lt;h1&gt;</td>
          <td> Heading 1 </td>
          <td>&lt;/h1&gt;</td>
          <td>Used to capture a reader's attention or a way to describe different
              content
          </td>
        <tr>
            <td>&lt;div&gt;</span></td>
            <td>Divs</td>
            <td>&lt;/div&gt;</td>
            <td>Short for "division". A containter that divides the page into sections</td>
        </tr>
        <tr>
            <td>&lt;span&gt;</td>
            <td>Span</td>
            <td>&lt;/span&gt;</td>
            <td>Used to separate small pieces of content that may be on the same
                line as other content
            </td>
        <tr>
            <td>&lt;em&gt;</td>
            <td>Italic</td>
            <td>&lt;/em&gt;</td>
            <td>Tag emphasizes text and renders <em>italic</em></td>
        </tr>
        <tr>
            <td>&lt;strong&gt;</td>
            <td>Bold</td>
            <td>&lt;/strong&gt;</td>
            <td>Highlights important text. Renders as <strong> bold </strong></td>
        </tr>
        <tr>
            <td>&lt;br&gt;</td>
            <td>Break</td>
            <td>&lt;/br&gt;</td>
            <td>Modifies the spacing between code</td>
        </tr>
        <tr>
            <td>&lt;ul&gt;</td>
            <td>Unordered List</td>
            <td>&lt;/ul&gt;</td>
            <td>Can be used to create a list of items in no particular order</td>
        </tr>
        <tr>
            <td>&lt;ol&gt;</td>
            <td>Ordered List</td>
            <td>&lt;/ol&gt;</td>
            <td>Can be used to create a list of items in numbered order</td>
        </tr>
        <tr>
            <td>&lt;img&gt;</td>
            <td>&lt;Image&gt;</td>
            <td>&lt;/image&gt;</td>
            <td>Allows the ability to add an image. This is a <strong>self-closing</strong> tag.</td>
        </tr>
    </table>
</div>
<div>
    <br>
    <h2>HTML Attributes</h2>
      <h3>Attributes provide additional information about an HTML element.</h3>
    <table class="center">
        <tr>
            <th>Attribute</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>href</td>
            <td>Defined with a &lt;a&gt; tag. Specifies the URL for a link</td>
        </tr>
        <tr>
            <td>alt</td>
            <td>Specifies an alternative text for an image, when the image
                cannot be displayed</td>
        </tr>
            <td>disabled</td>
            <td>Specifies that an input element should be disabled</td>
        </tr>
        <tr>
            <td>id</td>
            <td>Specifies a unique id for an element</td>
        </tr>
        <tr>
            <td>src</td>
            <td>Specifies the URL for an image</td>
        </tr>
        <tr>
            <td>style</td>
            <td>Specifies an inline CSS style for an element</td>
        </tr>
        <tr>
            <td>title</td>
            <td>Specifies extra information about an element</td>
        </tr>
    </table>
</div>

  </body>
</html>

## styles.css
body {
    background-color: rgb(192, 212, 197);
}


h1 {
    font-size: 30px;
    font-family: 'Balsamiq Sans', cursive;
    text-align: center;
    color: lightcyan;
    background-image:url("./simonehutsch.jpg")

}

h2, h3 {
    font-size: 20px;
    font-family: 'Balsamiq Sans', cursive;
    text-align: center;
    font-weight: lighter;
    color: rgb(43, 46, 70);
}

table, th, td {
    border: 1px solid rgb(64, 82, 90);
    color: rgb(0, 0, 0);

}

table.center {
    margin-left: auto;
    margin-right: auto;
}

th {
    background-color: rgb(224, 204, 192);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="Styles.css">
	<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
	</head>

	<title>HTML & CSS Cheatsheet</title>

	<div>
	<h1> HTML Elements, Attributes, and Styles </h1> <br>
	<h2>HTML Elements:</h2>
	<h3> Elements structures and defines content on a webpage in HTML</h3>
	</div>
	<div>
	<table class="center">
	<tr>
	<th>Start Tag</th>
	<th> Element Content </th>
	<th> End Tag </th>
	<th> Description </th>
	</tr>
	<tr>
	<td><body></td>
	<td> Body Element </td>
	<td></body></td>
	<td>Only content inside the opening and closing body tags can be displayed</td>
	</tr>
	<tr>
	<td><h1></td>
	<td> Heading 1 </td>
	<td></h1></td>
	<td>Used to capture a reader's attention or a way to describe different
	content
	</td>
	<tr>
	<td><div></span></td>
	<td>Divs</td>
	<td></div></td>
	<td>Short for "division". A containter that divides the page into sections</td>
	</tr>
	<tr>
	<td><span></td>
	<td>Span</td>
	<td></span></td>
	<td>Used to separate small pieces of content that may be on the same
	line as other content
	</td>
	<tr>
	<td><em></td>
	<td>Italic</td>
	<td></em></td>
	<td>Tag emphasizes text and renders <em>italic</em></td>
	</tr>
	<tr>
	<td><strong></td>
	<td>Bold</td>
	<td></strong></td>
	<td>Highlights important text. Renders as <strong> bold </strong></td>
	</tr>
	<tr>
	<td><br></td>
	<td>Break</td>
	<td></br></td>
	<td>Modifies the spacing between code</td>
	</tr>
	<tr>
	<td><ul></td>
	<td>Unordered List</td>
	<td></ul></td>
	<td>Can be used to create a list of items in no particular order</td>
	</tr>
	<tr>
	<td><ol></td>
	<td>Ordered List</td>
	<td></ol></td>
	<td>Can be used to create a list of items in numbered order</td>
	</tr>
	<tr>
	<td><img></td>
	<td><Image></td>
	<td></image></td>
	<td>Allows the ability to add an image. This is a <strong>self-closing</strong> tag.</td>
	</tr>
	</table>
	</div>
	<div>
	<br>
	<h2>HTML Attributes</h2>
	<h3>Attributes provide additional information about an HTML element.</h3>
	<table class="center">
	<tr>
	<th>Attribute</th>
	<th>Description</th>
	</tr>
	<tr>
	<td>href</td>
	<td>Defined with a <a> tag. Specifies the URL for a link</td>
	</tr>
	<tr>
	<td>alt</td>
	<td>Specifies an alternative text for an image, when the image
	cannot be displayed</td>
	</tr>
	<td>disabled</td>
	<td>Specifies that an input element should be disabled</td>
	</tr>
	<tr>
	<td>id</td>
	<td>Specifies a unique id for an element</td>
	</tr>
	<tr>
	<td>src</td>
	<td>Specifies the URL for an image</td>
	</tr>
	<tr>
	<td>style</td>
	<td>Specifies an inline CSS style for an element</td>
	</tr>
	<tr>
	<td>title</td>
	<td>Specifies extra information about an element</td>
	</tr>
	</table>
	</div>

	</body>
	</html>
	body {
	background-color: rgb(192, 212, 197);
	}


	h1 {
	font-size: 30px;
	font-family: 'Balsamiq Sans', cursive;
	text-align: center;
	color: lightcyan;
	background-image:url("./simonehutsch.jpg")

	}

	h2, h3 {
	font-size: 20px;
	font-family: 'Balsamiq Sans', cursive;
	text-align: center;
	font-weight: lighter;
	color: rgb(43, 46, 70);
	}

	table, th, td {
	border: 1px solid rgb(64, 82, 90);
	color: rgb(0, 0, 0);

	}

	table.center {
	margin-left: auto;
	margin-right: auto;
	}

	th {
	background-color: rgb(224, 204, 192);
	}