Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created June 23, 2020 01:03
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/dd8a01471350e25bf8dcb18a73512601 to your computer and use it in GitHub Desktop.
Save codecademydev/dd8a01471350e25bf8dcb18a73512601 to your computer and use it in GitHub Desktop.
Codecademy export
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<style>
table, th, td {
border: 1px solid black;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cheatsheet</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>CSS Selectors</h1>
<table>
<tr>
<th>Selector</th>
<th>Example</th>
<th>Example Description</th>
</tr>
<tr>
<td>class</td>
<td>.calender-cell</td>
<td>The class selector matches elements based on the contents of their class attribute. For selecting elements having calendar-cell as the value of the class attribute, a . needs to prepended.</td>
</tr>
<tr>
<td>ID</td>
<td>#job-title</td>
<td>The ID selector matches elements based on the contents of their id attribute. The values of id attribute should be unique in the entire DOM. For selecting the element having job-title as the value of the id attribute, a # needs to prepended</td>
</tr>
</table>
<h1>Visual Rules</h1>
<table>
<tr>
<th>Rules</th>
<th>Example</th>
<th>Example Description</th>
</tr>
<tr>
<td>CSS Rule Sets</td>
<td>h1 {
color:blue;
text-align: center;
}</td>
<td>A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1 , points to an HTML element. The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.</td>
</tr>
<tr>
<td>Font Family</td>
<td>h2 {
font-family: Verdana;
}
#page-title {
font-family:"Courier New";
}</td>
<td>The font-family CSS property isused to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes.</td>
</tr>
<tr>
<td>Font Size</td>
<td>font-size: 30px;</td>
<td>The font-size CSS property is used to set text sizes. Font size values can be many different units or types such as pixels.</td>
</tr>
<tr>
<td>Font Weight</td>
<td>font-weight: bold;</td>
<td>The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal.</td>
</tr>
<tr>
<td>Text Align</td>
<td>text-align: right;</td>
<td>The text-align CSS property can be used to set the text alignment of inlin contents. This propperty can be set to these values: left, right, or center.</td>
</tr>
<tr>
<td>Setting foreground text color in CSS</td>
<td>p {
color: #2a2ff ;
}
span {
color: green;
}
</td>
<td>Using the color property, foreground text color of an element can be set in CSS. The value can be valid color name supported in CSS like green or blue. Also, 3 digit or 6 digit color code like #22f or #2a2aff can be used to set the color.</td>
</tr>
<tr>
<td>Background Color</td>
<td>background-color: blue;</td>
<td>The background-color CSS property controls the background color of elements.</td>
</tr>
<tr>
<td>Opacity</td>
<td>opacity: 0.5;</td>
<td>The opacity CSS property can be used to control the transparency of an element. The value of this property ranges from 0 (transparent) to 1 (opaque).</td>
</tr>
<tr>
<td>Background Image</td>
<td>background-image: url ("nyan-cat.gif");</td>
<td>The background-image CSS property sets the background image of an element. An image URL should be provided in the syntax url("moon.jpg") as the value of the property.</td>
</tr>
<tr>
<td>Resource URLS</td>
<td>background-image: url("../resources/image.png");</td>
<td>In CSS, the url () function is used to wrap resource URLs. These can be applied to several properties such as the background-image.</td>
</tr>
</table>
</body>
</html>
table, th, td {
border: 1px solid black;
text-align: left;
background-color: cyan;
font-family: Arial;
}
h1 {
color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment