border (to set the width, style, and color in one step)
@font-face (for using fancy fonts; see page 244)
Tip: If you don’t have a style sheet book on hand, you can get an at-a-glance overview of all the properties listed here (and more) at www.htmldog.com/reference/cssproperties. You can also get more information about each property, including a brief description of what it does and the values it allows.
html5: the missing manual
The Anatomy of a
Formatting the Right Elements with Classes
The previous style sheet rule formatted all the
headings in a document. But
in more complex documents, you need to pick out specific elements, and give them
To do this, you need to give these elements a name with the class attribute. Here’s an
HTML5 is Winning
Now you can write a style sheet rule that formats only this heading. The trick is to
write a selector that starts with a period, followed by the class name, like this:
font-family: Garamond, serif;
that represents the article title is sized up to be 40 pixels tall.
You can use the class attribute on as many elements as you want. In fact, that’s the
idea. A typical style sheet is filled with class rules, which take web page markup and
neatly carve it into stylable units.
Finally, it’s worth noting that you can create a selector that uses an element type and
a class name, like this:
This selector creates an ArticleTitle class that will work only for
Sometimes, you may write this sort of style rule just to be clear. For example, you
may want to make it obvious that the ArticleTitle applies only to
and shouldn’t be used anywhere else. But most of the time, web designers just create
straight classes with no element restrictions.
Note: Different selectors can overlap. If more than one selector applies to the same element, they will
both take effect, with the most general being applied first. For example, if you have a rule that applies to
all headings and a rule that applies to the class named ArticleTitle, the all-headings rule is applied first,
followed by the class rule. As a result, the class rule can override the properties that are set in the allheadings rule. If two rules are equally specific, the one that’s defined last in the style sheet wins.
Style Sheet Comments
In a complicated style sheet, it’s sometimes worth leaving little notes to remind yourself (or let other people know) why a style sheet rule exists, and what it’s designed
to do. Like HTML, CSS lets you add comments, which the web browser ignores.
However, CSS comments don’t look like HTML comments. They always start with
the characters /* and end with the characters */. Here’s an example of a somewhat
appendix a: a very short introduction to css
/* The heading of the main article on a page. */
Slightly More Advanced Style Sheets
You’ll see an example of a practical style sheet in a moment. But first, you need to
consider a few of the finer points of style-sheet writing.
Structuring a Page with
When working with style sheets, you’ll often use the
element to wrap up a
section of content:
Here are two paragraphs of content.
In a div container.
On its own, the
does nothing. But it gives you a convenient place to apply
some class-based style sheet formatting. Here are some examples:
• Inherited values. Some CSS properties are inherited, which means the value
you set in one element is automatically applied to all the elements inside. One
example is the set of font properties—set them on a
, and everything inside gets the same text formatting (unless you override it in places with more
specific formatting rules).
• Boxes. A
is a natural container. Add a border, some spacing, and a different background color (or image), and you have a way to make select content
• Columns. Professional websites often carve their content up into two or three
columns. One way to make this happen is to wrap the content for each column
, and then use CSS positioning properties to put them in their proper
Tip: Now that HTML5 has introduced the semantic elements, the
element doesn’t play quite as
central a role. If you can replace a
with another, more meaningful semantic element (like