Analyzing CSS tutorial

Draft

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Learning goals

• Be able to analyze the CSS of a web page
• Get a feel for typical boxing design patterns

Prerequisites

• Some CSS, e.g. CSS text styling tutorial or some of CSS tutorial

Concurrent

• CSS box model tutorial (summary)

Moving on

• CSS positioning tutorial
• CSS for XML tutorial
• DHTML

Level and target population

• Beginners

Teaching materials

Remarks

• This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

Learning from CSS demo sites

Sometimes, it is best to learn from example.

The CSS Zen garden The CSS Zen garden project (dated 2004 ?) issued a challenge to professional web designers: Build a very good looking web page from a fixed HTML text using CSS2. The website and book are now outdated with respect to the emerging HTML 5 and CSS3. However, one still can learn a lot from it.

• http://www.csszengarden.com/, e.g. browse
• http://www.mezzoblue.com/zengarden/alldesigns/ (includes the ones that didn't make it, some broken links)
• Dave Shea and Molly E. Holzschlag, The Zen of CSS Design: Visual Enlightenment for the Web, Peachpit Press; 1 edition (February 27, 2005), ISBN 0321303474