Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created September 15, 2021 17:31
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/2bbf2d7df6e2529d6b88911f27ed988d to your computer and use it in GitHub Desktop.
Save codecademydev/2bbf2d7df6e2529d6b88911f27ed988d 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">
<title>Cheatsheet</title>
<link rel="stylesheet" href="styles.css">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Glory:ital,wght@1,100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
</head>
<body>
<h1>common <span>CSS</span> properties</h1>
</div>
<table>
<thead>
<th>CSS Properties</th>
<th>Discription</th>
<th>Example</th>
</thead>
<tbody>
<tr>
<td><span class="code">background-color</span></td>
<td>Sets the background color of an element.</td>
<td>&nbsp background-color: brown;</td>
</tr>
<tr>
<td><span class="code">background-image</span></td>
<td>sets one or more background images on an element.</td>
<td>&nbsp background-image: &nbsp url("../../media/examples/picture.png");</td>
</tr>
<tr>
<td><span class="code">border</span></td>
<td>It sets the values of border-width, border-style, and border-color of an element.</td>
<td>border: 2px solid darkorchid;</td>
</tr>
<tr>
<td><span class="code">color</span></td>
<td>sets the foreground color value of an element's text.</td>
<td>color: red;</td>
</tr>
<tr>
<td><span class="code">float</span></td>
<td>places an element on the left or right side of its container, allowing text and inline elements to wrap around it.</td>
<td>&nbsp float: left;</td>
</tr>
<tr>
<td><span class="code">font-family</span></td>
<td>Specifies a prioritized list of one or more font family for the selected element.</td>
<td>font-family: Georgia, serif;</td>
</tr>
<tr>
<td><span class="code">font-size</span></td>
<td>sets the size of the font</td>
<td>font-size: 1.2em;</td>
</tr>
<tr>
<td><span class="code">font-weight</span></td>
<td>sets the weight (or boldness) of the font</td>
<td>font-weight: bold;</td>
</tr>
<tr>
<td><span class="code">margin</span></td>
<td>sets the margin area on all four sides of an element.</td>
<td>margin: 10px 50px 20px;</td>
</tr>
<tr>
<td><span class="code">padding</span></td>
<td>sets the padding area on all four sides of an element at once.</td>
<td>padding: 10px 50px 20px;</td>
</tr>
<tr>
<td><span class="code">text-transform</span></td>
<td> specifies how to capitalize an element's text.</td>
<td>text-transform: uppercase;</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- Made by Tinsae Assefa -->
Raw
styles.css
body {
background-color: #E4D8DC;
}
table {
width: 1000px;
height: 400px;
margin: 300px 200px;
padding: 30px;
box-shadow: 30px 20px #D699BE;
background-color: #E4B1BE;
opacity: 0.9;
}
th{
font-family: Georgia, Times, 'Times New Roman', serif;
font-weight: 500;
}
td {
border-top: 3px solid #D699BE;
font-family: 'Glory', sans-serif;
font-weight: 600;
line-height: 25px;
}
.code {
font-family: monospace;
background-color: #f1c8dc;
font-size: 14px;
font-weight: 500;
}
h1{
position: absolute;
top: 50px;
left: 350px;
font-family: 'Glory', sans-serif;
font-size: 60px;
opacity: 0.7;
background-color:#E4B1BE ;
box-shadow: 30px 20px #D699BE;
padding: 10px;
}
span{
font-family: 'Cedarville Cursive', cursive;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment