<!doctype html>
<html>
	<head>
		<title>Color</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<ol>
			<li>This paragraph will be <em>dodgerblue</em>.</li>
			<li>Which can also be written as <em>#1e90ff</em>.</li>
			<li>Or as <em>rgb(30, 144, 255)</em>.</li>
			<li>And as <em>hsl(210, 100%, 56%)</em>.</li>
			<li>This has an <em>alpha</em> (transparency) value in the color.</li>
			<li>Same for this one.</li>
			<li>This uses a separate <em>opacity</em> property.</li>
			<li>All of these work for backgrounds, too!</li>
		</ol>
	</body>
</html>
/* There are a bunch of named colors. */
li:nth-child(1) { color: dodgerblue; }

/* Or you can specify a hex value. Brands love these. */
li:nth-child(2) { color: #1e90ff; }

/* Or RGB for Red, Green, Blue, if you think like a screen. */
li:nth-child(3) { color: rgb(30, 144, 255); }

/* Or Hue, Saturation, Lightness, which is more human. */
li:nth-child(4) { color: hsl(210, 100%, 56%); }

/* RGB and HSL have a fourth value, for Alpha (transparency). */
li:nth-child(5) { color: rgba(30, 144, 255, 50%); }
li:nth-child(6) { color: hsla(210, 100%, 56%, 0.5); }
/* Alpha as a percentage, 0–100%, or a decimal, 0–1. */

li:nth-child(7) {
	color: dodgerblue;
	opacity: 0.5; /* This will affect everything, not just text! */
}

li:nth-child(8) {
	color: white;
	background-color: dodgerblue; /* Same for backgrounds! */
}

li + li { margin-top: 1em } /* Just for the demo. */