CSS As Art: The CSS House

One of the reasons I’ve often given for using css is that it gives you more control over your design. You can create with css in ways that html attributes never allow. Case in point is Chris Hester’s CSS House, an artistic creation styled solely with cascading style sheets.

Take a look and realize that there is not a single image on the page you are viewing. Everything was created with empty divs and css styling. True, you wouldn’t need to create something so elaborate for a website, but let the CSS House show you some of what can be done. Note too that it displays perfectly in Internet Explorer, Firefox and Opera.

When you’re done marveling at CSS House take a look at CSS House 2, which is perhaps an even more impressive example of how you can style something with css.

Enjoy both houses and remember that while you probably won’t ever need to do anything as complex in a site design you can use css creatively in real designs. I’ll use a site from my own portfolio as an example. When designing the Office Support 911 site I wanted typical office imagery to convey the idea of a virtual assistant. Instead of the usual images of happy people in an office I wanted to also get across Karen’s fun and creative personality. Thus the file cabinet navigation was born. Yes there is an image in there for the drawer handles, but the overall cabinet was created with xhtml and css alone. And in very few lines of code I might add. Not quite CSS House, but a functional example of how css can give you greater control over a design.

« »

Download a free sample from my book, Design Fundamentals.


  1. Hi Steven,
    I am avid reader of your css blog articles. Thanks for all your efforts for these free of cost easy to understand articles. In this article the CSS House is something which as a beginner one can set as a milestone. Its something anyone will love to code and play with.

Leave a Reply

Your email address will not be published. Required fields are marked *