Basics: Why use CSS?
Cascading style sheets allow you to keep pages' style elements physically separate from their structural elementsThe two are integrated when the page is downloaded
The procedure is straightforward: Write once --> display everywhere
The document containing the content is marked up with standard structural HTML tags
A separate document (the style sheet) is created containing the stylistic markup
This second document contains instructions (rules) that tell the browser how to dispay the content document (or documents)
The style sheet is then linked to the content document (or documents)
Working with style sheets involves a new set of tags
The style sheet can also contain tags that you create, using unique combinations of traditional HTML and CSS markup
There is special markup in the content document that points the browser to the style document
There are several ways to use style sheets
They can stand alone as a separate document (with a .css extension)
They can be embedded in the <head> of the content document
They can be used inline in the content document
Benefits of separating the structure and style of a document
You can have a single stylesheet that can be used to set the style of multiple content documentsStylesheets minimize site maintenance
By changing the stylesheet, you can change the presentation of every page to which the style sheet is linked
Stylesheets cascade hierarchically
This means that you can have a number of different stylesheets for different pages
You can use markup in one stylesheet to set <font> characteristics for every page and then use additional stylesheets to change the <font> characteristics on individual content pages
Style sheets can easily support centralized design
This provides consistency across a large and distributed digital collection
Drawbacks of using stylesheets
Browser manufacturers do not fully support CSS1, and the W3C has just released CSS2Also, different browsers support different features of CSS1
This means that you can design for a single browser (the weenie path)
It can also mean that you design cross browser style sheets, which is more difficult
Different platforms render CSS1 markup differently
Older browsers (Netscape 3 and earlier, IE 2 and earlier) do not support CSS1 at all
This means that designers using CSS should create pages that will work if style sheets are turned off!
Tricks that produce interesting effects under CSS will make the page impossible to read if CSS is disabled (ex: repeated words with small offsets to create faux shadow effects)
You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssbasics.html
Last updated 3.15.06 - H. Rosenbaum