Skip to content

Instantly share code, notes, and snippets.

@Ris345

Ris345/cheat sheet project

Created March 10, 2022 20:54
Show Gist options
  • Save Ris345/67c228f2b655c02fdf9b3ab1fe5fb22c to your computer and use it in GitHub Desktop.
Save Ris345/67c228f2b655c02fdf9b3ab1fe5fb22c to your computer and use it in GitHub Desktop.
Download ZIP
Cheat Sheet Project
Raw
cheat sheet project
<!DOCTYPE html>
<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>CSS Table reference</title>
<link rel ="stylesheet" href ="./CSS /cheatcode.css"/>
</head>
<body>
<h1>CSS Table Reference</h1>
<h2>Table of CSS Rules</h2>
<table>
<thead>
<tr>
<th ID = "head1"> CSS Rule</th>
<th ID ="head1">Name</th>
<th ID ="head1">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class = "select">.selector</span></td>
<td>Class</td>
<td>Selects a class</td>
</tr>
<tr>
<td><span class = "select">#selector</span></td>
<td>ID</td>
<td>Selects an ID</td>
</tr>
<tr>
<td><span class = "select">p {} </span></td>
<td> Type </td>
<td> Selects html element</td>
</tr>
<tr>
<td><span class = "select"> * </span></td>
<td> Universal Selector</td>
<td> Selects all element types </td>
</tr>
<tr>
<td><span class = "select"> p.selector {} </span> </td>
<td> Combination selector </td>
<td> Selcts p element in selector</td>
</tr>
<tr>
<th> </th>
</tr>
</tbody>
</table>
<div>
<h2> CSS Font Family selectors </h2>
<table>
<thead>
<tr>
<th ID = "head1"> CSS Rule </th>
<th ID = "head1"> Name</th>
<th ID = "head1"> Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class = "select">font-family</span></td>
<td> Font selector </td>
<td> Selects desired font </td>
</tr>
<tr>
<td><span class = "select"> font-size</span> </td>
<td> Font size selector </td>
<td> Selects font size</td>
</tr>
<tr>
<td><span class = "select"> font-weight </span> </td>
<td> Font weight selector </td>
<td> Selects font weight eg bold</td>
</tr>
</tbody>
</thead>
</table>
</div>
<div>
<h2> Color/Display Properties </h2>
<table>
<tbody>
<thead>
<tr>
<th ID = "head1"> CSS Rule </th>
<th ID = "head1"> Name</th>
<th ID = "head1"> Description</th>
</tr>
</thead>
<tr>
<td><span class = "select"> text-align </span> </td>
<td> text-align selector </td>
<td> Selects the position of the text</td>
</tr>
<tr>
<td><span class = "select"> background-color </span> </td>
<td> color selector </td>
<td> Selects the color of the background</td>
</tr>
<tr>
<td><span class = "select"> opacity </span> </td>
<td> transparency selector </td>
<td> Selects the transparency level</td>
</tr>
<tr>
<td><span class = "select"> background-image </span> </td>
<td> image selector </td>
<td> Adds a background image</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
h1{
text-align: center;
font-weight: bold;
}
h2{
text-align: center;
color: rebeccapurple;
font-weight: bold;
}
#head1{
text-align: left;
}
.select{
background-color:beige;
font-family: monospace;
}
body{
display:block;
font-family: 'Times New Roman', Times, serif;
margin:6px;
background-color: gainsboro;
}
table{
border-collapse: separate;
width: 650px;
margin: 0 auto;
border: 2px solid darkorchid;
box-sizing: border-box;
}
thead{
display: table-header-group;
border-color: black;
background-color: plum;
}
td{
display:table-cell;
vertical-align: inherit;
border-top: 1px solid purple;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment