Although CSS was already in heavy mainstream use at the time this site was created, the "powers that were" in the CS department were wholly unfamiliar with the concepts. We (Ms. Rehmeyer and I) didn't want to turn over a site with an empty promise that its design could be changed.
We also recognized that even professional web designers can sometimes forget that sound semantic markup is essential to creating malleable designs. Just saying, "we use CSS," isn't enough.
To clearly demonstrate how powerful a semantic markup styled with CSS can be, we took a cue from the CSS Zen Garden. Emily created four completely different designs, all achieved through stylesheet changes alone.
Of the four designs, named for the four seasons of the year, two ("Summer" and "Winter") were considered real candidates for use on the live department site.
| Summer | Winter | Spring |
|---|---|---|
 |
 |
 |
"Summer" is the most colorful, making use of light background colors and heavy accents around the main menu on the left. The active menu item (i.e., the item linking to the current page) overlaps the content area, tying the two "halves" of the page together.
"Winter" takes a more conservative approach, using a much colder and less diverse color palate. The menus and graphics at the top of the page are smaller, freeing more space for the main content area. Menu items are grouped together, instead of placing each in a separate box, which separates the main sections of the menu more clearly.
In addition to these top choices, we included a playful "Spring" design. The header graphics feature flowchart symbols, and the navigation menu sports UML "inheritance" arrows at each level of the menu. This clearly appeals to a narrower audience than the department would want to target, but it serves as a great demonstration of how radically the page can be changed through CSS.
Semantic Markup
Viewing the source for the page featured
in these screenshots shows the minimal markup required for these
pages. Note, for instance, the main menu is simply a
<ul> tag, with id="menu" —
that's it! There are no extraneous <div>s, whereas
there are class attributes applied wherever they might be
useful.
Note that in the sample code most link paths have been replaced with "#" or "/~path/...", and the actual stylesheets are missing (so you'll see the unstyled content).