CSS Ninja

An exercise in writing stylesheets

By Jon Ippolito

Instructions

By writing different external stylesheets, a designer can change the look and feel of a Web page without changing its HTML. Click on some of the sample Web pages below to see this in action, bearing in mind that only their stylesheets are changed--their HTML "skeleton" is identical.

(For more design inspirations, visit the project that inspired this assignment, CSS Zen Garden. )

Then download a zipped template for the HTML and CSS files, and create your own version of this page. You may revise the CSS as much as you like, but you cannot change the HTML file. Post a url to your garden in prep: ninja garden.

Templates

Template Thu
Template with ids only ("Colored Boxes" stylesheet)
Template Thu
Template with text content ("Colored Boxes" stylesheet)

Sample gardens

Kungfu Thu
Kung Fu (Jon Ippolito)
Css Ninja Warnock Thu
Petals (Bethany Warnock)
sample assignment
Slash (Maria Sutryn)
sample assignment
Riverbed (Patrick Menard)
sample assignment
Rooftop (Heather Anderson)
inman Thu
Zen (Reese Inman)
gilks Thu
Petals (Sarah Scofield)
China Thu
China (Eryk Salvaggio)
talbot Thu
Dragon (Adam Chamberlain)
pendleton Thu
Sunset (Brittney Pendleton)
gilks Thu
Victorian (James Gilks)
talbot Thu
Invisible (Steve Talbot)
Turtles Thu
Turtles (Jolene Belanger)
Flowers Thu
Flowers (Pattie Barry)
Obnoxious Thu
Obnoxious (Eryk Salvaggio)