Newsgroup Post on Cascading Style Sheets

Posted to the newsgroup comp.infosystems.www.authoring.stylesheets January 13, 2001

I am trying to make up materials to help beginners in a Webpage creation class to learn that basics of CSS. The class is only for a single weekend, total of 15 hours, focusing mainly on HTML and Netscape Composer, but I would also like to include an introduction to CSS. With such limited time, I have to try to keep things as simple as possible, hoping only to build a foundation for future studies. I consider myself a beginner in CSS, but as I try to teach myself the basics, I am hoping also to prepare materials helpful to my students. I am sharing with this newsgroup some of what I have done, suspecting that there may be new CSS students visiting this site.

I recognize that most of what I offer here is of no value to most of you who seem, from your posts, advanced CSS users, but for the few beginners, this material may be helpful. If the experienced, expert CSS users find errors or other problems with my work regarding CSS, I would be grateful for your corrections so that I will present my students with only the most accurate information on CSS.

Juxtaposing the same sites with CSS and without CSS helps to illustrate the value of CSS. And then giving students the chance to tinker with the CSS styles for a specific webpage helps them to see how even a single style change can affect an entire document in a quick, easy way -- much faster and easier than only using HTML.

To illustrate how CSS can change the appearance of a site, beginners in CSS might find this helpful. Please use Explorer rather than Navigator because Navigator does such a weak job supporting CSS:

(1a) Here is a site using an internal CSS:
http://www.gordonrichard.com/fall2000/guide2ss.htm

(1b) Here is the same site without CSS:
http://www.gordonrichard.com/fall2000/guide.htm

(2a) Here is a site using an external CSS:
http://www.gordonrichard.com/fall2000/exercss.htm

(2b) Here you can see the styles for this site in WordPad: http://www.gordonrichard.com/fall2000/cssexer.htm

(2c) Or you can view the CSS here in Dreamweaver: http://www.gordonrichard.com/fall2000/exercise.css

(2d) Here is the same site without CSS:
http://www.gordonrichard.com/fall2000/exercise.htm

The problem having students view the CSS behind many sophisticated pages is that -- for the beginner -- the styles are so lenghthy and so complex that the beginner is overwhelmed. As an instructor, I am trying to come up with webpages reflecting CSS by only using a handful of basic styles so that students will not be overwhelmed. I have already received much help from this newsgroup and have incorporated many of your suggestions into my course materials. I appreciate your help very much as I learn CSS myself and try to come up with ways to help my students learn CSS, too.