What is CSS?
CSS, the Cascading Style Sheet language, is a formatting mechanism for web pages. It gives the designer more control than traditional formatting methods, separates style and content neatly, and allows various other nifty features.
Style vs Content
HTML is designed to be a structural language — you don't mark up how things look, you mark up what they mean. Read that sentence again a couple of times to let it sink in, if you've done any “traditional” site design :–)
During the “Browser Wars” that led to the introduction of HTML 3,
Netscape and Microsoft introduced a number of new elements and attributes
into HTML, so authors had more control over how their pages looked. To be
honest, these were a bit of a hack, and they weren't always well thought
through. Sure, you could put together complex and slick page designs, but once
you look behind the scenes, they're usually a mess of nested tables. In effect,
a structural feature (the table, designed to present, um, tables
of data) had been hijacked as a presentational feature. For graphical browsers,
particularly the “big two” of Navigator and Internet Explorer, this was no
problem; for browsers with limited capabilities (screen readers for the
blind, cut-down browsers on palmtop computers, that sort of thing) it's not
good for usability.
For, perhaps, a more practical reason, consider style changes. Say you
want all the headings on your site to be green. Do you really feel like going
through every single HTML document replacing the font tags? No,
I thought not.
While designing HTML 4 (and its successor, XHTML), the World Wide Web Consortium brought in a new technology to solve these problems — the concept of stylesheets.
The big idea
When you're formatting a long document in a word processor like MS Word, the bold, italic, and font size buttons are OK for occasional use, but it'd be tedious to configure all your headings to be bold 16pt Verdana by hand. It would be even worse if you then decided they should actually be italic 18pt Arial — you'd have to go through the headings one by one changing their settings, and you'd probably miss a couple, so your document would look inconsistent.
That's why word processors have stylesheets as a standard feature. Instead of doing the formatting every time, you just choose “Heading level 3” from a handy drop-down list, and carry on typing. If you want to change how all your headings look, you can choose to edit the stylesheet, and all your level 3 headings magically change to the new appearance.
CSS does this for Web pages. You write your content using simple markup
without <font> elements, bgcolor attributes,
and so on; at the same time, you write a stylesheet containing instructions
like “level 3 headings are bold 16pt Verdana” (in CSS, that's spelt
“h3 { font-weight: bold; font-size: 16pt; font-family: Verdana, sans-serif }”). You then attach the two together to get a nicely styled document;
when you write more content, just point it at the same stylesheet to get
consistent pages. If you change the stylesheet, all pages that refer to it
will automagically get the new appearance.
Of course, because this is the web, your options aren't limited to font choices — you also get to play with backgrounds, borders, images, positioning, alignment, all sorts of fancy typography, voice settings (for speech browsers), and numerous other attributes.
Oh, and if you're writing articles people might want to print, did I mention you could make your page behave in a more “printer-friendly” fashion when printed? Try doing a Print Preview while browsing A List Apart.
More information
- CSS Zen Garden
- An amazing example of what you can do with CSS. Select a few of the stylesheets listed, compare and contrast the different presentations, then observe that all of them use exactly the same HTML — the only difference is the single line which links in the stylesheet. The rest is all done within the stylesheet.
- CSS on w3.org
- The official home of the CSS specification (CSS Level 1 or 2 is currently recommended). If it's not documented here, it's not CSS.
- CSS Layout Techniques for Fun and Profit
- A quick reference for tables-to-CSS translation.
- A Web Designer's Journey
- How and why HTML/CSS site ‘A List Apart’ redesigned their pages for CSS. Many of their other past articles are also worth a read.
Do let me know if you have more good links.