Programming Terminology

CSS Zen Garden

Related to: CSS, HTML

http://www.csszengarden.com is a famous website created in the early 2000s to demonstrate the creative and versatile power of CSS. The first sentence of the website reads:

A demonstration of what can be accomplished through CSS-based design.

The website is unique in that the main point of it is to encourage other CSS developers to create various designs for it. You can download the HTML file and it will be the same HTML file that everyone else has downloaded. Then you can design some CSS for that HTML file (without changing the HTML) and the end result is a showcase of hundreds of CSS authors designing the same HTML file to show the true difference between HTML and CSS:

  • HTML is the tag-based content of the site
  • CSS is the design for those tags

The significance of the website is that in the time is was created, most developers were writing CSS with inline styles (mostly because of tools like Dreamweaver and FrontPage which did CSS for you if you didn't know how). Inline styles can be a bad approach for creating re-usable and maintainable CSS. CSSZenGarden showed us a much better way. It is considered by many to be highly influential in how CSS was written and demonstrated for about a decade.