Skip to content

Instantly share code, notes, and snippets.


codecademydev/index.html Secret

Created Jun 24, 2020
What would you like to do?
Codecademy export
<!-- CSS Color Cheat Sheet | Backround, Color, and Linear Gradient -->
<!DOCTYPE html>
<title>CSS Color Cheat Sheet | Backround-Color, Color, and Linear Gradient</title>
<link href="styles.css" type="text/css" rel="stylesheet">
<h1>CSS Color Cheat Sheet</h1>
<h2>Backround, Color, and Linear Gradient</h2>
<span>Let's learn to make cool colors faster!</span>
<p class="title">Background Color Element</p>
<li>In <em>styles.css</em> code <strong>background-color: <em>color;</em></strong></li>
<li>This will apply a background color to your selected element.</li>
<p class="title">Color Element</p>
<li>In <em>styles.css</em> code <strong>color: <em>color;</em></strong></li>
<li>This will apply a foreground color to your selected element.</li>
<p class="title">Linear Gradient</p>
<li>In <em>styles.css</em> code <strong>background-image: linear-gradient(<em>num+deg e.g. 180deg, color1, color2</em>);</strong></li>
<li>This will apply a linear color to your selected element and 180 degrees.</li>
<span>Lets see a couple of examples below:</span>
<th>CSS rule</th>
<td>h1 {<br> background-color: <em class="greenText">green;</em><br>}</td>
<td id="bc-example"></td>
<tr class="lightgrey">
<td>h1 {<br> color: <em class="greenText">green;</em><br>}</td>
<td id="c-example">Green</td>
<td>h1 {<br> background-image: linear-gradient(<em>90deg, OliveDrab, SeaGreen</em>);<br>}</td>
<td id="lg-example"></td>
<p>&copy; Matthew Jordaan 2020</p>
table {
border: 2px solid black;
margin-top: 10px;
margin-bottom: 10px;
th {
background-color: LightGray;
td {
padding-left: 10px;
padding-right: 10px;
.lightgrey {
background-color: gainsboro;
body {
background-color: LavenderBlush;
#bc-example {
background-color: green;
#c-example {
color: green;
#lg-example {
background-image: linear-gradient(90deg, OliveDrab, SeaGreen);
.title {
font-weight: bold;
border: 2px solid green;
background-color: seagreen;
color: white;
max-width: 610px;
header {
background-color: MediumSeaGreen;
text-align: center;
padding-top: 5px;
footer {
background-color: black;
color: white;
text-align: center;
padding: 10px 0 10px 0;
margin-top: 20px;
h2 {
padding-bottom: 20px;
opacity: 0.5;
p, h2, h1, span, li, td, th {
font-family: Arial;
span {
font-weight: bold;
font-family: Lucida Console, Courier, monospace;
.greenText {
color: green;
td {
font-size: 13px;
li {
list-style: square;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment