Color, Type, and (CSS) Style

Background

Cascading Style Sheets (also known as CSS) allow us to separate presentation from content. This is how we can reuse the same content in different forms. CSS lets us apply different styles in different contexts, and CSS lets us change the "look and feel" of an entire website with just a few keystrokes. CSS saves a webmaster a lot of work if used properly, provides a great deal of flexibility in how all the pages of a site are displayed, and provides a great deal of flexibility in reusing content.

The "slides" I have posted online cover the core of how to make CSS code happen. We are going to "walk through" at least the first slide-set in class, so I can be available to answer the questions which inevitably arise from looking at this material. Do not let the mass of details worry you. The basics are actually not very difficult, once you get used to the notation used, and the coding practice you will go through in this class should help a lot.

Why are they called "Cascading"?

These are called "cascading" style sheets because you can apply more than one to the same document, and because each additional style sheet applied to a document can add to or over-ride the settings established in previously-applied stylesheets. For example, you can have a basic stylesheet which gets applied to all the pages at a website first to establish a site-wide "look and feel", and then an additional stylesheet for each "area" or "informational chunk" in your website.

Say you have divided the pages at your website into several "chunks": one set of pages about the various products sold at the site, and another set of pages with product support information. You could have one site-wide stykleshhet which is referenced first in all webpages, and thus is applied first to all pages requested. You could also have a second stylesheet specific to the product pages (say, setting a light yellow background for those pages) and you could apply a different second stylesheet to all the product support pages (say, setting a light orange background for those pages).

Want to see a step-by-step example?

Take a look at this sequence of pages. Examine the HTML and CSS at each step (the Firefox Web Developer Toolbar extention is a big help here). See if you can figure out what is going on at each step.

Additional Materials Online

CSS Introductory Notes

Some Online Webmaster Resources

Unix Review Materials

These links are to materials you can use to review your Unix knowledge. They will also give you an idea of what might be done simply to build a tutorial. These tutorials courtesy Professor Jackson: