Skip to content

Instantly share code, notes, and snippets.

@codecademydev codecademydev/index.html Secret

Created Jun 30, 2020
Embed
What would you like to do?
Codecademy export
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML/CSS Cheatsheet Document</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header class="header">
<h1>HTML & CSS Cheatsheet </h1>
<h3>HTML:</h3>
<p>HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.</p>
<h3>CSS:</h3>
<p>The beautiful websites that you see across
the internet are styled with a
variety of tools, including CSS. CSS, or Cascading Style Sheets, is a language that web developers use to style the HTML content on a web page.
</p>
</header>
<h2>Table Tags </h2>
<section id="tables">
<table class="table-head first-table" >
<thead >
<tr >
<th scope="col">Tag/Attribute</th>
<th scope="col">Element</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td >
<span class="code">&lt;h1&gt;
</span>
</td>
<td>HTML</td>
<td>It is the highest header element</td>
</tr>
<tr>
<td >
<span class="code">&lt;head&gt;
</span>
</td>
<td>Head</td>
<td>It is the head Tag</td>
</tr>
<tr>
<td>
<span class="code">&lt;link&gt;
</span>
</td>
<td>Link</td>
<td>It is the link Tag</td>
</tr>
<tr>
<td >
<span class="code">&lt;meta&gt;
</span>
</td>
<td>Meta</td>
<td>It is the meta Tag</td>
</tr>
</tbody>
</table>
<h2>CSS Selectors</h2>
<table class="table-head second-table">
<thead >
<tr>
<th scope="col"> CSS Selectors</th>
<th scope="col">Element</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="code">&lt; . &gt;</span>
</td>
<td>Class</td>
<td>Dot denotes for class
selection
</td>
</tr>
<tr>
<td >
<span class="code">&lt; # &gt;</span>
</td>
<td>ID</td>
<td> Hash/pound denotes for ID
selection
</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
*{
margin: 10px;
}
body{
background-color: #035aa6;
font-family: Arial, Helvetica, sans-serif;
}
.first-table {
width: 700px;
height: 200px;
margin: 0.5rem auto 3rem auto;
border: solid;
border-style: double;
}
.second-table{
width: 700px;
height: 90px;
margin: 0.5rem auto 3rem auto;
border: solid;
border-style: double;
}
.table-head th,td{
background-color: antiquewhite;
line-height: 2rem;
}
h2{
text-align: center;
color: #f9f9f9;
}
.header{
background-color: #f9f9f9;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
border-radius: 1em;
padding: 20px;
margin: 3rem auto 3rem auto;
}
.header h3, p{
text-align: left;
}
.code{
background-color: white;
font-family: monospace;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.