Skip to content

Instantly share code, notes, and snippets.

@codecademydev codecademydev/index.html Secret

Created Jun 24, 2020
Embed
What would you like to do?
Codecademy export
<!-- CSS Color Cheat Sheet | Backround, Color, and Linear Gradient -->
<!DOCTYPE html>
<html>
<head>
<title>CSS Color Cheat Sheet | Backround-Color, Color, and Linear Gradient</title>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h1>CSS Color Cheat Sheet</h1>
<h2>Backround, Color, and Linear Gradient</h2>
</header>
<main>
<span>Let's learn to make cool colors faster!</span>
<p class="title">Background Color Element</p>
<ul>
<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>
</ul>
<p class="title">Color Element</p>
<ul>
<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>
</ul>
<p class="title">Linear Gradient</p>
<ul>
<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>
</ul>
<span>Lets see a couple of examples below:</span>
<table>
<thead>
<tr>
<th>Topic</th>
<th>CSS rule</th>
<th>Examples</th>
</tr>
</thead>
<tbody>
<tr>
<td>Background-Color</td>
<td>h1 {<br> background-color: <em class="greenText">green;</em><br>}</td>
<td id="bc-example"></td>
</tr>
<tr class="lightgrey">
<td>Color</td>
<td>h1 {<br> color: <em class="greenText">green;</em><br>}</td>
<td id="c-example">Green</td>
</tr>
<tr>
<td>Linear-Gradient</td>
<td>h1 {<br> background-image: linear-gradient(<em>90deg, OliveDrab, SeaGreen</em>);<br>}</td>
<td id="lg-example"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</main>
<footer>
<p>&copy; Matthew Jordaan 2020</p>
</footer>
</body>
</html>
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
You can’t perform that action at this time.