The DocumentHSL color was introduced with CSS3 and is supported by most current browsers, but not by older
browsers. To ensure your web page is suitably colorful in older browsers, you can declare the color twice;
once in regular RGB or hexadecimal, and again in HSL:
.villain {
color: #2e664f;
color: hsl(155,55%,40%);
}
However, there isn’t much benefit to declaring two equivalent opaque colors, which may be why HSL
hasn’t gained much popularity, despite its human friendliness. Alas, as long as there are still browsers that
don’t support HSL, you may be better off sticking with RGB and hex for opaque colors.HSLA
Just like RGBA, HSLA specifies a color with hue, saturation, and lightness, plus an alpha value for its
opacity, with the alpha channel expressed as a decimal between 0 and 1:
.sidekick { background-color: hsla(268,66%,79%,0.65); }
Also like RGBA and HSL, HSLA colors aren’t supported by older browsers, so it’s best to declare a simple
opaque color first, followed by an HSLA color as a progressive enhancement for browsers that support it:
.sidekick {
background-color: #a98dc9;
background-color: hsla(268,66%,79%,0.65);
}Summary
This chapter has given you a solid grounding in what HTML documents are and how they’re assembled.
You’ve learned about the all-important doctype, the root html element, and the head and body elements.
We went into some depth on the various metadata elements you can find in a document’s header, though
some of them are more useful than others (you’ll use the link and script elements a lot, but might live
out the rest of your life without using the base element even once). You also started to get your feet wet
with CSS, learning how style sheets can be attached to your HTML documents and a few ways to declare
colors in CSS.
From here on, most of the markup examples we’ll show you in this book won’t include the complete HTML
document around them, but you can assume they do indeed appear wrapped in a proper valid document.
You can also assume the CSS examples we show you are appearing in an embedded or external style
sheet associated with one of those complete, valid documents.
This has been a fairly intense chapter full of HTML elements you can’t even see, but it’s important to
establish this foundation early on. Don’t worry, Chapter 4 at last dives headlong into the real meat of
HTML: adding readable, meaningful content to your web pages.