WEB DEVELOPMENT BLOG

The Web Development Blog has moved to http://www.heidicool.com/blog/. Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.

August 03, 2006

I'm not going to teach you CSS: Lesson 1

As a follow-up to the I'm not going to teach you XHTML/HTML and homework review entries, today I'll introduce you to Cascading Style Sheets (CSS).

If you are working on a Case site, you will have noticed that each set of templates comes with its own set of style sheets that determine the color scheme, fonts, etc. In most cases you can just leave these alone, but there may be times when you want to do something special such as adding colored borders to a table, or creating a red (cranberry) alert headline to emphasize something important. To do that it helps to learn a bit of CSS.

What is CSS?

While XHTML and HTML are used to form the structure of a Web document, CSS controls the presentation. Presentational elements that can be controlled by CSS include font, color, position, alignment (with some limitations), and other elements that affect how a page will look to the reader. As an example, the Wolves site on the top right does not use CSS, while the image of the same site on the lower right does use CSS.

The W3C recommendation for CSS Level 1 was released in 1996, the first version of level 2 was released in 1998, and level 3 is currently under development. As each level builds upon the others you do not need to specify which version you are using, however you do need to understand which browsers support which CSS elements as well as the different ways they may interpret them.

In addition to controlling how a page will look in a Web browser, CSS can also be used to determine how content will be presented on a printed page, on tv screens, in braille, and other media types. This is particularly useful to those who are developing content for multiple purposes. Rather than creating 10 versions of the same site, one can specify that different style sheets are used depending on how the page is read.

In addition to the flexibility of multiple formats, CSS—when implemented properly—can be a real time-saver. If you've just built a 50 page site in purple and gray, and your boss suddenly decides it should be cranberry and navy, all you have to do is change the style sheet. In a pre-CSS world you would have had to edit all 50 pages, but with CSS you only need to edit one. While there are many great reasons to use CSS, not limited to the fact that they conform to the web standards, the best way to understand it is to start using it.

Incorporating CSS into the site you built to learn HTML: A homework project

If you completed our XHTML/HTML homework project, as I did with my Wolves page, then you have the files you need to attempt a very basic implementation of CSS. In a future lesson we will modify those pages to incorporate additional options.

Your assignment: build a style sheet

Using your existing 5-page site, create an external style sheet that controls the presentation of all the elements you used on the site, then add a line to each of your pages telling them to use the style sheet you have created. Once completed, upload your pages and go to http://jigsaw.w3.org/css-validator/ to make sure your style sheet is valid, then post your link in the comments field below.

Tools to complete the project

You will be using the same tools for this project that you used to build your site. I find that it is usually helpfully to upload the files repeatedly as I go so that I can check how things are working. CSS is more difficult to learn that HTML, but you don't need to understand everything at once. If it doesn't make sense immediately, just be patient. Also do not worry about vertical alignment. This is not yet well-implemented, and is bound to cause frustration. Instead choose a design that is not dependent upon vertical alignment.

Resources for learning XHTML and HTML

There are a variety of great books and sites that will teach you more about CSS. The ones I am most familiar with are by Case alumnus, Eric Meyer, who is the über-authority on CSS. Eric is also a past Webmaster of http://www.case.edu. Before working at Case, Eric and I both worked at the same law publishing company—proving once again that there are only 2 degrees of separation in Cleveland.

CSS reference books

Those with links in the title can be read online by Case students, faculty and staff.

Cascading Style Sheets: The Definitive Guide, 2nd Edition by Eric Meyer

Beginning with a thorough description of the what's and why's of CSS, Eric then walks you through each of the CSS elements offering detailed explanations of how they work, how they should be implemented. Additionally the book includes notes pointing out special exceptions such as browser differences. I have this book on my shelf and refer to it whenever I'm trying to understand why a certain style behaves in a certain way.

Cascading Style Sheets 2.0 Programmer's Reference by Eric Meyer

This one isn't on my shelf because it is usually somewhere on my desk. Less detailed than the definitive guide, it provides a handy way to check on the exact syntax of a given element. I used it extensively when I was teaching myself CSS.

More Eric Meyer on CSS by Eric Meyer

Especially handy for those familiar with HTML but new to CSS, this book walks readers through 10 Web projects that readers can build for themselves to learn the code.

The Zen of CSS Design: Visual Enlightenment for the Web By Dave Shea, Molly E. Holzschlag

Geared more towards those with an interest in graphic design, this book uses design examples from http://www.csszengarden.com/ to demonstrate how CSS is implemented.

Online CSS Resources

Wikipedia

Wikipedia's entry on Cascading Style Sheets provides a fairly clear and in-depth overview of the topic as well as links to a variety of other resources.

W3 Schools

W3 Schools offers tutorials on a variety of Web related topics including this easy to follow tutorial on CSS.

W3C CSS Validation Service

This resource checks your Web page or style sheet to let you know if your CSS is valid, and if it is not, what the errors may be. It also offers warnings about styles that are valid but that might be problematic. Very handy both for ensuring clean code, and for finding errors that may be causing problems in your pages.

Zen Garden

The Zen Garden is a site that can be viewed in almost 1,000 different designs. Since 2001, designers have been submitting new style sheets to the Zen Garden, thus creating a powerful example of how drastically different the same code can appear with different style sheets

CSS—A guide for the unglued

A compendium of resources designed to help you find a quick answer to your CSS questions and issues.

CSS-Discuss Mailing List

Information and archives from the CSS-Discuss mailing list. Geared more towards experienced users, beginners will still find answers to their many questions in the archives. If you join the list and you are new to CSS, don't ask a question until making sure it hasn't been discussed previously.

Next: Lesson 2

Stumble It!

Posted by: Heidi Cool August 3, 2006 04:20 PM | Category: Heidi's Entries , Heidi's Entries , Heidi's Entries , Heidi's Entries , Heidi's Entries , How-to

Posted by: hac4 (Heidi Cool) August 3, 2006 04:20 PM | Comments (6) | Trackback

© 2004-2008 Heidi Cool • Kevin Adams • Case Western Reserve University