In This Chapter
Cascading Style Sheets
Understanding CSS
Working with selectors
Page layout with CSS
Solving common
s Chapter 4 showed, well-written HTML is pretty boring. But
with that boredom comes any number of benefits; chief
among them is an excellent separation between form (how
your page looks) and content (what your page is saying). By sepa-
rating these functions, you make your job as a web developer dra-
matically simpler. Imagine a couple of scenarios:
You’ve built a beautiful site based on HTML tables. Your
client is thrilled — so thrilled, in fact, that she asks you to
produce a version of the site that can be viewable on
handheld devices, such as cell phones. You curse under
your breath as you realize you have to re-author the entire
site from scratch.
In the course of developing a site for another client, you
produce a large group of pages that use a daring header
text style. When the client sees it, he hates it. You need to
change that style to something easier on the eyes! But
because you’ve put the style definition with every element
that uses it, you need to laboriously clamber through your
files to change them — and hope the client likes this one.
These are both very common scenarios. And in both cases, the use
of Cascading Style Sheets, or CSS, would make the job a lot easier.
In the first case, with properly formatted HTML, you can simply
keep that file and then apply a new CSS style sheet to get yourself
a mobile version. In the second case, every style is named and
defined in just one place. Just switch up the style definition —
and all styles are updated. Sweet.
For teams that work on websites, this separation of form and con-
tent makes collaboration a lot easier too: While one developer
works on the HTML and the content that goes with it, a designer
could tweak the styles to his or her heart’s content.
Style sheets can be defined in one of three ways:
Inline. Through the use of the HTML style attribute, you
can define a style for a specific element within an HTML
file. This is generally bad practice, but it can be necessary,
for example, when formatting HTML email.
10_533994-ch05.indd 10710_533994-ch05.indd 107 2/12/10 7:16 PM2/12/10 7:16 PM

Get Web Development with the Mac® now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.