Nursery Rhyme Code Poem [CSS]

By Zach Leatherman | Published: October 27, 2007

Code Poems are fun! The trick is to take a nursery rhyme (but really, it could be any commonplace work of writing – Famous Speeches, Bible Verses, Famous Quotes, etc.), and then turn it into pseudocode. The code must follow both the programming or markup language you’re using and the rhyme as closely as possible. See how precise you can make your rhyme fit. I accept critiques and suggestions for improving me rhyme code (or you could just rewrite my rhyme as you see fit).

#theChurch {}
#theChurch #theSteeple {}
#theChurch .door[state="open"] .people { visibility: visible; }
#theChurch #theParson { display: none; }
#theChurch > .upstairs #theParson:active { display: block; }
#theChurch #theParson:lang(prayers) { display: block; }

The above code poem is released under the BSD license. To use in production environment without error, do not include an element with an id attribute of “theChurch”. Obviously I’m kidding, don’t use this code. Not even for enterprise software.

This entry was posted in Artistic, CSS and tagged , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • If you found this article useful, you should subscribe to my feed (or get an e-mail). I'm also on Twitter and GitHub.

  • About the Author

    Zach Leatherman is a Professional Front End Engineer. He loves building for the web, and has been contributing to the community through his blog since February 2007. Despite his propensity for software, he has a Bachelors degree in Computer Engineering and is currently on the User Experience Team at Union Pacific Railroad. The views expressed on this website do not represent the views of his employer.

    He enjoys spending time with his beautiful wife Traci and their two Great Danes, Roxie and Ella. They also have a cat, a rabbit, goldfish, and one or more tarantulas. Read more »