A CSS learning activity and demonstration.

Inspired by csszengarden.com

What?

This page serves many purposes, the most important being a live activity for Intermediate Web Publishing students to design and create a stylesheet. Students are asked to modify the css file, in doing so they create an entirely new design and layout for this page.

Select any style from the list to load it. What appears to happen is you are linked to an entirely different page. What actually happened is the same xhtml page loaded with a different stylesheet attached. That style is written in css and it is what we are asking the students to provide.

How?

If you view the source of this page one thing will stand out, it is only markup. When I say markup I mean content, what you are reading right now, and xhtml tags that define the structure, not the visual layout of the page. You will see no table tags for placements, or font tags to change color, you won't even see an image tag!

The layout and visual design of this page are defined in a css (cascading stylesheet) file. Through this file designers can define everything from text color and size to layout and position.

Download the xhtml file and css file to learn more!

Why?

Not to be passe, but why not? Technology is changing, as it always does, and the time of designing backward compatibly web sites for an umpteen number of browsers is starting to disappear.

A new age of web standards and compliant browsers is on the horizon. Our goal with this exercise is to educate new web designers as to the power of these standards and to prepare graphic artists to participate in the css revolution. This assignment's goal is to encourage, inspire and teach students CSS and all the wonderful ways it can be used in designing web pages.

Hopefully, this assignment will demonstrate to the students the power and flexibility of designing sites using xhtml and css. For students... you have the ability to create and design, show the world your talents!

Requirements

  • You are not permitted to modify this xhtml document by any means. Don't even bother to open it in an editor. You are only able to modify the CSS file.
  • You must test your new design on at least 5 browsers, and at least two platforms, Windows and MAC. Web Standards have not solved all of the browser difference, yet! You will still see some inconsistencies among different browsers. Your job is the be aware of them and create a functional design for the majority.
  • Your design should be functional yet creative. Push the envelope and explore everything you can do using CSS. This is assignment but still a learning activity, have fun!
  • Other then that, you are good to go, design away!