The CSS Flowerpot Assignment

This assignment, which is based on the very cool CSS Zen Garden web site, and (very heavily) on Steven Krause's pedagogical repurposing of that site, has three parts. First, create two different Cascading Style Sheets with different sorts of design elements and apply them to the simple XHTML file you are reading right now. One of these sites should be intentionally ugly, and one should be a representation of a good style where the layout is designed for a particular audience. Other than CSS commands that control the layout (“div” for example), you can't mess with the structural markup of the page.

Cool Frog!

Second, write the reflection in the form of the letter to your target audience, as specified in the assignment on our wiki. Keeping that audience and your choices in mind, think of and explain the effect your different CSS layouts/designs would have on that target audience.

Cool Trucks!

Third, write me a confidential single-spaced one-page letter, printed in hard copy. Here, you will give your honest evaluation of the team project experience, with a well-supported point about how beneficial, or not, your teammate's participation was. Did s/he work and play well with you? How about you? What will s/he say about you?

Cool Cars!

Here are some things to ponder:

First, Krause calls this a “CSS Zen Flowerpot” and not a “CSS Zen Garden” because he wants to emphasize the modest scale of this assignment. A full-fledged garden is something not everyone can do because it requires space and resources, and to make a large and impressive garden takes experience and expertise. On the other hand, a flowerpot is the sort of thing that almost anyone can keep almost anyplace: a dorm room, an apartment porch, a shelf, even a windowless school office.

Second, Krause extends his metaphor further: different CSS gardeners will come up with different CSS flowerpots. Some of you will have cascading style sheets that are like exotic and delicate plants from far away places; some of you will have cascading style sheets that are like common and hard-to-kill plants. That's okay; both kinds of plants/style sheets have a place.

Third, the goal is to use CSS to effect the design of information (in this case, just this particular piece of information) to reach different audiences for different purposes. As Molly Holzschlag writes in her book Spring Into HTML and CSS:

Keeping presentation separate from the document means you can style that document for numerous media, including the screen, print, projection, and even handheld devices.

Cool Bugs!

Here are even a few more details:

You will notice that the structural markup uses several different HTML tags,including "div" and "class" tags. That's to give you something to work with in your style sheets, and it means you should be able to do this assignment with just external style sheets. No images are required, but you may use them. Sound and video are extraneous to this project.
We have already spent a fair amount of time with figuring out the basics of HTML and CSS, and you can apply those lessons here. But you can also use software (such NVu, SeaMonkey, and/or Dreamweaver) to help you through the process. I don't require (or even encourage) WYSIWYG software, but it is your choice.
Your ugly style sheet must still style the XHTML markup; that is, it cannot be a “bad” style sheet.
Ultimately, using CSS is about “re-presenting” information in a way appropriate to specific audiences and purposes.
While much of this assignment is technical, the most important part of this is the letter to your audience. So, besides your two different CSS flowerpots, I'm looking for your ability to highlight and to explain the effect your different CSS layouts/designs would have on your target audience.