Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created October 7, 2021 01:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save codecademydev/a3ca32bd1f3656c4c36d1f538372ce75 to your computer and use it in GitHub Desktop.
Save codecademydev/a3ca32bd1f3656c4c36d1f538372ce75 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<!-- Challenge Project: Build Your Own Cheat Sheet -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Tags</title>
<link href='styles.css' rel='stylesheet'>
</head>
<body>
<header>
<h1>
HTML Section Heading Elements &lt;h1&gt; - &lt;h6&gt;
</h1>
<h3>
Table Shows Header Tags, HTML Format, Results, and Default CSS Values
</h3>
</header>
<table>
<thead>
<tr>
<th scope="col">Tag</th>
<th scope="col">HTML Format</th>
<th scope="col">Result</th>
<th scope="col">font-size</th>
<th scope="col">margin-top</th>
<th scope="col">margin-bottom</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">&lt;h1&gt;</th>
<td>&lt;Heading level 1&gt;</td>
<td class="result1"><b>Heading level 1</b></td>
<td>2em</td>
<td>0.67em</td>
<td>0.67em</td>
</tr>
<tr>
<th scope="row">&lt;h2&gt;</th>
<td>&lt;Heading level 2&gt;</td>
<td class="result2"><b>Heading level 2</b></td>
<td>1.5em</td>
<td>0.83em</td>
<td>0.83em</td>
</tr>
<tr>
<th scope="row">&lt;h3&gt;</th>
<td>&lt;Heading level 3&gt;</td>
<td class="result3"><b>Heading level 3</b></td>
<td>1.17em</td>
<td>1em</td>
<td>1em</td>
</tr>
<tr>
<th scope="row">&lt;h4&gt;</th>
<td>&lt;Heading level 4&gt;</td>
<td class="result4"><b>Heading level 4</b></td>
<td>1em</td>
<td>1.33em</td>
<td>1.33em</td>
</tr>
<tr>
<th scope="row">&lt;h5&gt;</th>
<td>&lt;Heading level 5&gt;</td>
<td class="result5"><b>Heading level 5</b></td>
<td>0.83em</td>
<td>1.67em</td>
<td>1.67em</td>
</tr>
<tr>
<th scope="row">&lt;h6&gt;</th>
<td>&lt;Heading level 6&gt;</td>
<td class="result6"><b>Heading level 6</b></td>
<td>0.67em</td>
<td>2.33em</td>
<td>2.33em</td>
</tr>
</tbody>
</table>
<footer>
<p><strong>NOTE 1:</strong> All headers have the following common default values: <span class="element">font-weight:</span> <span class="value">bold;</span> <span class="element">margin-left:</span> <span class="value">0;</span> <span class="element">margin-right:</span> <span class="value">0;</span></p>
<p><strong>NOTE 2:</strong> An <strong>em</strong> is equal to the current font-size, for example, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable, so 2em (2 x 12pt) would equal 24pt, 0.5em (0.5 x 12pt) would equal 6pt.</p>
</footer>
</body>
</html>
Raw
styles.css
body {
font-family: Helvetica;
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
background-color: #ffffcc;
}
h1, h3 {
text-align: center;
}
table {
table-layout: auto;
width: 100%;
border-collapse: collapse;
border: 3px solid black;
}
/* Table Border lines */
td, th {
border: 1px solid #999;
padding: 0.75rem;
text-align: center
}
/* Size heading examples in result column */
.result1 {
font-size: 2em;
}
.result2 {
font-size: 1.5em;
}
.result3 {
font-size: 1.17em;
}
.result4 {
font-size: 1em;
}
.result5 {
font-size: 0.83em;
}
.result6 {
font-size: 0.67em;
}
/* Footer Note 1 formatting */
.element {
color: blue;
font-weight: bold;
}
.value {
color: red;
font-weight: bold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment