Studio Session: CSS and Visual Design

Today's exercises will give you practice implementing a variety of CSS properties.

Studio Exercise: CSS Positioning

Revise the chocolate truffle recipe from last week's exercise, using CSS positioning for layout. Create two different designs, both with the same HTML code--only the external CSS should be different.

I've collected links to a wide variety of CSS positioning and layout guides and templates, all of which can be found at http://del.icio.us/mamamusings/css/.

A few that you may find particularly helpful:

• CSS Layouts from Code-Sucks.com
• Multi-Column Layouts Climb Out of the Box (which also links to some other useful tutorials)
• WestCiv's quick tutorial on floated page layout and layout with CSS

(You may also find WestCiv's excellent CSS Guide helpful in remembering syntax and properties.)

When you're done, upload the files to Gibson, and write up the exercise in your blog.

Studio Exercise: CSS Zen Garden Critique

Go to the CSS Zen Garden web site, and look at a minimum of ten different designs. Pick one that you really like, and one that you don't.

Write a blog entry identifying your favorite and least favorite, and explain what you think is particularly good or bad about the implementation.

Studio Exercise: CSS Formatting

Select a poem that you like from the "Verse" section of Bartleby.com.

Use CSS to modify the appearance of the poem. Use a variety of CSS properties (color, typography, background images, etc) to try to create an appropriate context for the poem.

Use Dean Allen's Textile tool to generate valid HTML entities for punctuation, as needed.

When you're done, upload the html file to Gibson, and add an entry to your weblog describing the exercise (make sure you include a link to your completed exercise).