Heal Your Church WebSite

Teaching, rebuking, correcting & training in righteous web design.

Rooting about the CSS Zen Garden

Back when colleges and universities were still primarily in the business of teaching, budding musicians and artists would learn their craft through a variety of tried and tested techniques; one of these was copying. Note-for-note or stroke-for-stroke, a promising protégé would duplicate the work of one of the great masters.

Freshman Years

Some twenty five years later, I still remember my eyes getting bleary as I copied the J. S. Bach chorale prelude “Wachet auf, ruft uns die Stimme;” now available to you in convenient PDF format.

In between measures and erasures, I began to see the sense in this exercise as I began to see the genius of Bach. So indelible were the images of how he wove his melodies through an almost perfect juxtaposition of chord structures that I recall how a year later I aced a music theory exam in which I was required to write my own little 4 part chorale.

A Walk in the Park

It is with this unforgettable teaching method in mind that I find myself frequently strolling about the CSS Zen Garden; viewing, copy and experimenting with the source to see what makes a particular page tick.

For those of you who are unaware of this website, it is a teaching project in which students must modify the look and feel of a web page without touching a single line of HTML. Instead they must find ingenious ways of getting an associated CSS file to do their bidding. Often this occurs after copiously copying and then modifying the works of some of the Internet’s CSS Masters.

See Dean's ZenGarden rendering of blogs4GodBeing the glutton for punishment that I am, and having a recent ‘personal assignment‘ that required me to do so, I’ve begun stringing-off my own plot of the CSS Garden. My first attempt is a do-over of blogs4God. Well, it’s not really a do-over as it is a whimsical rendering using nothing but CSS and some kitschy-but-fun graphics I created for the occasion.

First Fruits

Why not give the page a look see, then come back here and leave comments. Moreover, if you find something really out of place on your browser, drop me a line and perhaps a low-res screen shot so you can share in the fruits of my labor.

Recommended Reading Doing

Since we are called to be doers and not just hearers, or in this case, readers — why not visit the CSS Zen Garden? And just to show you that I practice what I preach, I’m going to try my hand at a blogs4God do-over. Either way leave me a comment if you have any questions, quips, concerns or examples you want to share.


  1. css still mystifies me. I’ve seen the Zen Garden before and it is simply amazing what tech skills and design skills can render.

  2. Looks perfect in both Safari and IE/mac. If you want screenshots, shoot me over an email.

  3. I got a 404 error when I clicked on the download sample HTML and CSS file.

  4. Yup!

    > I got a 404 error when I clicked on
    > the download sample HTML and CSS file.

    That’s because I’ve made sure NOT to modify the HTML example.

    Though I think in this case, I won’t screw up any karma by making the links work. I’ll fix it tonight.

  5. Dean,

    Glad to see other Blogs4God folk tilling through the Garden (I can never get enough of the gardening metaphors)

    Be sure to check out design #104 and let me know if I can help with anything..

  6. The CSS Zen Garden allows me to see the effects of a redesign (both good and bad). It’s awesome to see what people can come up with. I’m thinking about coming up with something soon.

  7. I presume you are acquainted with the excellent Firefox web development toolbar, which allows you to edit the CSS of any page on the fly?

  8. That site rocks! Cool stuff. Now my site needs a CSS makeover. :-(

    I like the makeover of B4G, even if it is a bit whimsical. I always felt that the current design at B4G is a bit bland.

  9. I really like that makeover of b4G!