• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



Welcome to the book about a project that helped shape the future of the Web.

The Zen of CSS Design came to exist because of a Web site launched on May 8, 2003. This site set out to change how people perceive Web design, and somewhere along the way it ended up an international phenomenon. It is called the CSS Zen Garden and is a result of the collaborative effort of many talented people spanning the globe.


You can go to www.csszengarden.com to view the CSS Zen Garden and all designs contained in this book.

To view the markup, find your browser’s “View Source” function, which is typically located under the “View” Menu.

To view the CSS that makes up each design, select the design and then find the “View This Design’s CSS” link within the page. Careful, each design puts that link somewhere different.

Equal parts manifesto and gallery, the Zen Garden was built to demonstrate what can be accomplished visually through CSS-based design. Designers are called upon to submit their own original visions in the form of style sheets and images. The catch is that all designs must use the same base HTML file. There are no exceptions; the HTML is absolutely identical in every single design.

Sound incredible? Maybe even a little crazy? It could be both, but what is abundantly clear is that CSS is as capable a design tool as any when placed in the right hands. The Zen of CSS Design showcases 36 of the finest submissions to the site, and takes a closer look at the design processes of the creators, and the tools and coding methods they used.

A whole book about a single Web site? Really? If this were any ordinary Web site, you’d be right to be incredulous. But the Zen Garden is packed with so much variety and useful teaching, contributed by so many people from around the world with different skill sets, that the tough part was condensing it all into a single manuscript.

What Is This Book About?

Is this book a documentation and narrative of the site? Partially. Is it a tutorial on Web design best practices and techniques? Yes, definitely. Is it a gallery of eye candy that you can refer to for inspiration when working on your own projects? No question.

What was clear to us as we wrote this book was that the Zen Garden has potential to relate so many different lessons about how modern Web design is done that a single book focused on one specialty of design, such as layout, wouldn’t begin to scratch the surface. We knew that being true to the site meant covering it all. Typography, color theory, layout techniques—they’re all in here.

Will you learn CSS from The Zen of CSS Design? Yes, but not at a beginner’s level. To focus on the visual techniques, it was necessary to skip the intro classes and move straight to the intermediate lessons, so to speak. Some great technical books are already on the shelves that will get you started with the basics of CSS syntax and grammar. We recommend that you grab one of those to get up to speed with the technology, and then read this book alongside it to learn how to apply the techniques in visually stimulating ways.

The CSS techniques covered in this book take a broader overview and cover solving visual problems, instead of thoroughly describing every piece of the CSS specification. Where it’s appropriate, browser support levels are discussed to keep the lessons firmly grounded in reality.

Who Should Buy This Book?

We wrote The Zen of CSS Design for anyone with an interest in designing and developing Web sites:


Using a visual vocabulary to discuss CSS design theory and practice, we aimed the lessons toward practical design and solving real-world problems with the latest standards-based techniques.


The focus is on the visuals, but we don’t assume a degree in graphic design. Care was taken to define design terms as best as possible within the scope of this book, so that even those without prior design knowledge will be able to make use of the concepts and techniques covered.

CSS Novices

Jargon and technical terms are kept to a minimum so that even someone with only a vague understanding of CSS can understand most chapters. We recommend that you read a companion book from the recommended reading list, available in the Closing Thoughts section at the end of this book, to first learn the syntax and basic concepts, then use The Zen of CSS Design to expand on those ideas and apply them to your work.

Some issues covered are basic Web design principles that are broadly applicable across many situations, but not all. It’s possible to build CSS-based Web pages with automatic layout tools like Macromedia Dreamweaver, but most of the CSS techniques we discuss are far more useful to those who code by hand in an HTML editor. If you rely on drag and drop for your Web design process, you may find the book overly technical in certain areas. However, we’d hope that won’t discourage you from broadening your knowledge.

Advanced CSS Users

Those familiar with the ins and outs of the box model, floats, and selectors will still find plenty to learn. The visual focus, combined with practical CSS examples from some of today’s most innovative and creative designers, ensures a diverse range of topics that are bound to pass on new tricks to even the most seasoned of pros.

Conventions Used

CSS design is a subset of a wider range of technologies from the World Wide Web Consortium (W3C), collectively referred to as Web standards, which includes HTML, XHTML, and XML. Standards-based design refers to the collective whole, and although not every technology needs to be present in a document, a Web page that conforms to the relevant standards is said to be standards-compliant.

Because HTML and XHTML have much in common and may be used interchangeably, when we refer to HTML it’s safe to assume that this also includes XHTML as well, unless specifically noted.

Notes and tips available in the sidebar are meant to correspond to the area within the text that is next to them. Screen shots are displayed in close proximity to the reference within the text.

Specific CSS properties and values will be printed in a monospace font, like this: 12px, font-size, and #summary. References to the concepts themselves will not be formatted; for example, pixel as compared with px, font size as compared with font-size.

An arrrow () within code indicates that the code continues into the next line—there should not be a break in the line.

Browsers are always changing, and any attempt at listing browser support in a book will quickly fall out of date. However, we also get frustrated with books that tell you about advanced techniques but don’t tell you that you can’t use them in 80 percent of the browsers on the market. So where possible, we’ve provided real-world browser support advice based on the most commonly used browsers at the time this book was written.

Referring to specific browser versions was a difficult task; when there are four major versions of Microsoft Internet Explorer across two operating systems, and some techniques work in only specific combinations of the four, it’s hard to refer to Internet Explorer at all without clarifying in each reference which version we’re talking about. To help combat this problem, here is a brief guide to our conventions when talking about Internet Explorer:

  • Internet Explorer— All major versions. This means version 5.0, 5.5, and 6.0 on Windows, as well as 5.2 on Mac OS X. Versions lower than 5.0 are generally unused today and in most cases may safely be ignored.

  • Internet Explorer for Windows— All major versions on Windows. Disregard Mac versions.

  • Internet Explorer for Mac— Version 5.2 for Mac OS X, and in most cases 5.1 for Mac OS 9. Disregard Windows versions.

  • Internet Explorer x.x— When we refer to a specific version number or multiple version numbers, the other versions not referenced may be disregarded.

How Should I Use This Book?

The average Web site has a starting point, otherwise known as the home page; from there you can jump anywhere into the site by selecting a major section and browsing through the content it contains. Or you can use the search function to find the specific content you’re after. Or you can just click at random and see what sorts of goodies you can find deeper in.

This is the model we’ve chosen for the book; there is no right or wrong way to use it. You might choose to start at the beginning and read it cover to cover, or you might jump to a chapter that feels particularly relevant and use it as a starting point. You may read this book as non-linearly as you wish, and approach each design in any order you choose.

The book is broken up into two major portions:

  • The first chapter discusses the building of the Zen Garden, as well as meat-and-potatoes topics like proper markup structure and designing for flexibility.

  • Within the second part, which makes up the bulk of the book, there are six major chapters. Each examines six great Zen Garden designs and ties them together with a common theme revolving around a major design concept, such as typography. By exploring the challenges and problems solved within these 36 designs, you will learn major Web design principles as well as the CSS layout techniques they employ.

Here is a brief outline of the seven major chapters.

Chapter 1, View Source

An overview of how the CSS Zen Garden came to be and how CSS has evolved over time; discussions of proper markup structure and design.

Chapter 2, Design

Basic design elements and how to apply them on the Web. Color theory, proportions and positioning, relationships between type and photography, and using Adobe Photoshop and CSS harmoniously.

Chapter 3, Layout

The nuts and bolts of building complicated CSS layouts. Columns, floats, and positioning schemes.

Chapter 4, Imagery

Using images to enhance your layouts, and how to generate them. Image replacement, graphic file formats, and how to find imagery source material.

Chapter 5, Typography

All things type; font limitations on the Web and how to work around them. Including font sizing, font-face selection, and image-based type.

Chapter 6, Special Effects

Where to go once you’ve mastered the basics. Advanced CSS effects to filter style for different browsers, create new and flexible layout techniques, and work around technical limitations with clever code.

Chapter 7, Reconstruction

A peek over the shoulders of six designers to find out how they do it. Selected designs are rebuilt within this chapter, detailing steps along the way. Watch as the principles from the other five chapters of the book come together for the full effect.

As you see, we’ve packed as much good stuff as we could between these covers to make The Zen of CSS Design the most comprehensive resource about modern standards-based visual Web design available today.

We hope you’ll find the book as enjoyable as it was to write.

—Dave Shea and Molly Holzschlag
August 2004

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint