HTML & CSS: The Good Parts

Chapter 3. CSS Overview

Like in a cinematic or musical work, the “Good Parts” of CSS are easier to find if you have a basic understanding of what’s going on. This chapter lays the foundation for what’s to come in the rest of this book—it explores the role of CSS in creating successful websites, and provides a survey of its basic components.

Note

If you’re in a hurry to get to the Good Parts, you can skip ahead. There are some mentions of Bad Parts and Awful Parts here worth noting, though, and CSS is complicated enough that a quick review can be helpful.

Connecting Stylesheets to HTML Documents

HTML documents can specify the stylesheets that are applied to them, using the link element, the style element, or the @import declaration.

Note

Go to http://www.htmlcssgoodparts.net/ for an interactive demonstration of the relationships between stylesheet rules and elements in a typical page.

Referencing a Stylesheet with link

The most common method of associating styles with your document is to use a link element within the head of a document. The source of link elements usually looks something like this:

<link rel="stylesheet" href="/styles.css" media="screen" title="Primary Stylesheet" />

This approach also supports stylesheet choices: a stylist can create multiple stylesheets, assign a title to each, and assign a second rel (relation) value of alternate to all but one of the referenced stylesheets. (Multiple rel values should be separated by spaces.) Users will then be able to choose which stylesheet ...