CSS Zen Garden reaches 10

Ten years ago, back when Internet Explorer was still actively trying to ruin everybody’s day, Dave Shea launched CSS Zen Garden. The idea was beautifully simple: take exactly the same HTML and visualize it, again and again, using nothing but CSS. No tables pretending to be layout systems. No spacer GIFs. No dark rituals involving nested markup and prayers to Netscape.

When I first stumbled across CSS Zen Garden in 2003, it felt like someone had opened a door. Suddenly CSS wasn’t merely about changing fonts and making links turn blue. It could completely transform a website while leaving the underlying structure untouched. For anyone accustomed to the archaeological dig that passed for web development at the time, this was almost revolutionary.

Together with Designing With Web Standards by Jeffrey Zeldman, CSS Zen Garden fundamentally changed the way we all thought about building websites. Structure belonged in HTML. Presentation belonged in CSS. It sounds painfully obvious now, but back then it felt like forbidden knowledge.

Tranquil garden in Kyoto.

A decade later, the old garden is still there. Some of the designs naturally carry the fingerprints of their era, but that hardly matters. The important thing was the idea: that the web could be flexible, expressive and standards-based without becoming an unholy pile of browser-specific hacks.

Dave Shea and Molly Holzschlag later documented much of the thinking and many of the remarkable designs in The Zen of CSS Design, which remains a fascinating snapshot of a moment when web design seemed to be discovering new possibilities every week.

So happy tenth birthday, CSS Zen Garden. And thank you Dave, you helped convince an entire generation of web developers that there was a better way to build the web. And, for a while at least, you even made CSS feel peaceful.