Cascading Style Sheets: The Definitive Guide

Chapter 11. CSS in Action

No instructional work would be complete without a chapter that explores ways to put all that theoretical knowledge into practice, and that’s just what we’ll be doing here. After we look at three different page (re)design projects using CSS, we’ll go through a grab bag of tricks and tips that might help you get around some of your biggest CSS frustrations.

Conversion Projects

Since we’ve covered the entirety of CSS1, let’s exercise that newfound knowledge with three conversion projects. In each of these cases—two of them web pages and one a print magazine article—we’ll break down the page into its components and determine the best way to recreate the same effects using CSS1 and structural HTML.

Case 1: Consistent Look and Feel

In this project, we will create an external style sheet that will define a basic, consistent look and feel for an entire corporate web site. Our main goal is to create styles that are as simple as possible, using few (if any) classes or IDs. For the purposes of the project, we will assume there is a standard writing guide for employees of the company: document titles are in H1, subheadings in H2, every page uses standard graphics at the top, and so forth.

Marketing has decreed that all pages shall use a white background with a thin dark green stripe running down the left edge, black body text in a serif font, and hyperlinks that are a dark green when unvisited and dark gray when visited. Furthermore, document titles must be underlined ...