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.
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
H1, subheadings in
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 ...