The Zen of CSS Design

In: Reviews > Book Reviews

By Karen Morrill-McClure

Published on February 23, 2005

This is the book on CSS that I’ve been waiting for.

Background

The CSS Zen Garden is a Web site that went up on May 8th, 2003. It presented a single HTML file and then showed how that file could be displayed in radically different ways just by changing the cascading style sheet (CSS) linked to the file. It was (and is) a great demonstration of the power and possibility of designing with CSS.

I’ve been aware of the CSS Zen Garden since its launch. I noodled around it at the beginning then moved on. It was an interesting idea, but I didn’t have the time to look at all the designs and couldn’t really find what I was looking for. Enter The Zen of CSS Design by Dave Shea and Molly E. Holzschlag.

The book is all about the designs on the CSS Zen Garden—but not just about how different designers faced the Zen Garden challenge. It also uses the designs to take readers on a tour of everything they need to know about using CSS on a Web site. Because the HTML file stays the same, it’s easy to really zero in on the CSS and how it’s used.

What’s in the Book

This is a great looking book. Each section shows the complete design of the CSS Zen Garden page. After a quick review of the design, the section goes into details about the design topic (see the chapters listed below). I can’t think of a more comprehensive resource for the presentation of information on a Web page.

Topics covered include where designers come up with their ideas to how color blindness affects people viewing a design to using transparency in your images.

Chapters

Each chapter (except the first) looks at several different designs. The first chapter introduces the HTML file used by each of the designs and explains why it was coded the way it was.

1. View Source
2. Design
3. Layout
4. Imagery
5. Typography
6. Special Effects
7. Reconstruction

The book is organized from a design point of view rather than a coding point of view.

Usability

The format was easy to follow, with the information divided up into nice little bits, each so easy to digest that when I reached the end of a section, I had to stop for a moment to realize how much I’d actually covered.

The tips in the margins were excellent. Make sure you take the time to read them.

Quibbles

I would have liked the number associated with the design on csszengarden.com on each page, down in the footer maybe. It was only listed once at the beginning of the chapter.

Sometimes I felt like a subject was just touched on, but that has more to do with the breadth of topic here (everything design- and CSS-related) than a shortcoming of the book and the authors provide lots of links and resources for more reading.

Summary

This book isn’t just about the how, it’s also about the why: Why should I use the different type controls? Why should I use graphics in my design? Why should I use special effects? Why should I use CSS for layout? (That last one’s kind of a given with this book, but you get my point.)

There are lots of resources that tell you how to do something with CSS—for instance, putting a border around an element—but far fewer try to explain why you should do it. This book explains that “why.”

It’s a natural progression from Cascading Style Sheets: The Definitive Guide (definitely a “how” book) to Eric Meyer on CSS and More Eric Meyer on CSS (both halfway between “how” and “why.”). Which is not to say I think writing this book was easy. It’s crammed with useful how-to info and wraps it all up in explanations of why you would want to do it this way.

The authors had a wealth of material to start with, but the genius is in how they presented and organized the information. Not only did the book teach me more about CSS and design, it also added value to the CSS Zen Garden. I plan to visit the Garden more often in the future, checking the new entries with a critical eye.

Quick Review

What It’s About

Using CSS to design Web sites.

Who It’s For

If you’re familiar with IE for Windows’ Box Model bug and how to use CSS for layout, this book is for you. Read it, return to it when you’re starting a new project, use it to explore the CSS Zen Garden.

If you’ve never absolutely positioned a div in your life, well, you may need to start with something like More Eric Meyer on CSS, but this is a book to look to for what you’ll eventually be able to do with CSS.

Best Part

Each section focuses on a particular aspect of designing Web sites using CSS. Makes it very easy to browse and find something useful.

Although the topic is broad, there’s a lot of detailed info here. I picked up several CSS tidbits that helped me immediately (like how to use relative positioning with absolute positioning).

Worst Part

Well, by the end of the book I was dreaming about the CSS Zen Garden text and code because I’d seen it so often.

Seriously, I don’t recommend reading it from beginning to end in one sitting. I do recommend reading it at the computer with your Web browser open and pointed to csszengarden.com. I used three tabs while I was reading it. One pointed to the design, one to the CSS for the design and a third to examine different graphics called out in the CSS.

Bottom Line

The perfect coffee table book for a Web designer—lots of pictures of Web pages and loads of good information.

The Zen of CSS Design
ISBN 0321303474
Dave Shea and Molly E. Holzschlag
New Riders, 2005, 272pp.
$26.39 US

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: CSS, Web Standards