Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created June 28, 2020 14:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/b8230d218f345bc6152f865764141213 to your computer and use it in GitHub Desktop.
Save codecademydev/b8230d218f345bc6152f865764141213 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Specificity</title>
<link href=styles.css rel=stylesheet>
<link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Table 1. CSS Specificity</h1>
</header>
<main>
<table>
<thead>
<tr>
<th>Element</th>
<th>Name</th>
<th>Description</th>
<th>Specificity</th>
</tr>
</thead>
<tbody>
<tr>
<td class="element">#ID</td>
<td>ID2</td>
<td>The identifier placed below ID1.</td>
<td>The highest (1.)</td>
</tr>
<tr>
<td class="element">#ID</td>
<td>ID1</td>
<td>The identifier placed above ID2.</td>
<td>2.</td>
</tr>
<tr>
<td class="element">element.class</td>
<td>eg. h1.special</td>
<td>The HTML element + its class.</td>
<td>3.</td>
</tr>
<tr>
<td class="element">.class</td>
<td>class</td>
<td>The HTML class.</td>
<td>4.</td>
</tr>
<tr>
<td class="element">tag</td>
<td>eg. h1</td>
<td>The HTML tag.</td>
<td>The lowest (5.)</td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
Raw
styles.css
h1 {
color: Indigo;
font-family: 'Cutive Mono', monospace;
text-align: center;
}
table {
border: 5px ridge DarkMagenta;
background-color: Thistle;
border-collapse: collapse;
text-align: center;
}
th {
border: 1px solid DarkMagenta;
background-color: MediumPurple;
border-collapse: collapse;
font-family: 'Montserrat', sans-serif;
}
tr {
border: 1px solid DarkMagenta;
border-collapse: collapse;
}
td {
border: 1px solid DarkMagenta;
border-collapse: collapse;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
}
.element {
font-family: 'Cutive Mono', monospace;
font-size: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment