Microsoft Expression Web For Dummies

What's So Great about Styles?

In Web design-ese, all things style related fall under the umbrella term Cascading Style Sheets, or CSS. The biggest contribution CSS makes to Web design is the ability to separate your site's content (the text and pictures that the site contains) from its design (how the site looks).

Whereas HTML puts the content on the Web page-the paragraphs, headings, lists, and hyperlinks, for example-CSS describes how they look. HTML says, "This is a first-level heading, and here's what it says." CSS says, "You know that first-level heading? Here's what it looks like: bold, small caps, red."

Here's another way to think about the relationship between CSS and HTML: Imagine that your favorite romance novel author (bear with us here) describes the physical appearance of the hero and heroine every time they're mentioned in the book. "Kate, who's slender, 5-foot-5-inches tall with unruly red head, cornflower blue eyes, and a heart-shaped face, gazed longingly at Kevin, that dark-haired, muscular, 6-foot-2-inch tall man with swarthy good looks and a brooding countenance hinting at dark secrets in his past." By the end of the first chapter (if you ever get that far), Kevin's swarthy good looks and Kate's unruly red hair make you want to run screaming from the room.

The code behind a Web site built without the benefit of CSS works like the novel we just described: Every paragraph, heading, bulleted list, and hyper-link has to announce to the Web browser how it's supposed to look every time it appears on the page. Before CSS, that's how Web designers had to write Web page code if they wanted their sites to look anything different from the boring ol' defaults.

Enter CSS, the romantic lead of Web design, flexing its rock-hard muscles. CSS says to HTML (in a deep and booming hero's voice), "Leave the heavy lifting of formatting to me, little HTML. You just focus on getting the content right." And CSS (who, despite the gleaming teeth, is also an efficiency geek) thinks, "Hmm, we shouldn't have to tell the browser more than once how a heading looks"-just like you, dear novel reader, shouldn't have to suffer through more than one description of Kevin and Kate.

Sound like a lot less coding work? It is. And because the powerful combination of CSS and HTML generates a lot less code, you get leaner, faster-loading pages. Not only that, if you want to change the formatting for a particular HTML element (return to our novel analogy for a moment to change Kate's hair color, for example, from red to blonde), you need to change the formatting in only one place (rather than in every appearance Kate makes on the page).

Want to see the heroic powers of CSS in action? Take a stroll through CSS Zen Garden at http://www.csszengarden.com. This site illustrates how a single CSS style sheet transforms a plain-and-simple Suzy HTML page into sultry Svetlana. Figure 7-1 shows the plain, nonstyled page that forms the basis for all the different styles showcased on the CSS Zen Garden site.

From http://www.csszengarden.com. Copyright (c) 2006 by Dave Shea. All rights reserved. Reproduced here by permission.

Figure 7-2 shows what happens when a CSS style sheet gets attached to this content page. Figure 7-3 shows how the whole page changes just by attaching a different style sheet.

From http://www.csszengarden.com. Copyright (c) 2006 by Dave Shea. All rights reserved. Reproduced here by permission.

From http://www.csszengarden.com. Copyright (c) 2006 by Andrew Brundle (http://www.andrew-brundle.com). All rights reserved. Reproduced here by permission.