Internal USGS Access Only

Cascading Style Sheets (CSS)

The best way to control the appearance of your Web pages; Style Sheets associate formatting with html elements.

CSS, level 1 (CSS1)

Became a W3C recommendation in December 1996. Addresses basic formatting, and a little bit more.

CSS2

Became a W3C recommendation in May 1998, and builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.

CSS3

Still in draft. It will provide features to enhance forms, dynamic content, navigation, and accessibility

How Well are They Supported?

• Netscape and IE versions 4.x implement only about 70%-80% of CSS 1. Unfortunately Netscape 4 badly mangles much of CSS that it does try to implement.
• Netscape 7.0 claims to be Completely Compliant With Html 4 And CSS1, and partially Compliant With CSS2.
• Macintosh IE 5.5 and later has roughly the same support as NS 7.
• Windows IE 6 supports some CSS2, but still does not support all of the features of CSS1!

As more of the browsing public has access to browsers which consistently support style sheets, our ability to use style sheets could greatly affect how USGS Web pages are constructed.

All examples in this course are CSS level 1.

What is a Cascade?

• A Cascade allows a multiple levels of style information. For example: A style sheet could be set up with USGS defaults, amended with WRD defaults, customized with site defaults, and then tweaked with document-specific formatting. You can import multiple style sheets, each one potentially overriding settings from the previous ones.

  The cascade order, from least to most important for CSS2

  1. browser defaults     (as shipped)
  2. reader settings     (can be set in IE)
  3. author (document)
  4. author "!important"     (document)
  5. reader "!important"

  Note: In CSS1 items 4 and 5 were reversed!

The technical details on Cascade Order.

What can I do with Cascading Style Sheets?

• CSS replaces all of the formatting components in html 3.2, such as elements <basefont>, <center>, <font>, and attributes align, alink, background, bgcolor, value, color, compact, face, hspace, link, noshade, nowrap, size, text, type, value and vspace.

• CSS provides much more control over the appearance of a document than has ever been available before:

  Font specifiers

  Size, Family, Style (normal, italic, oblique), Variant (small-caps), Weight, Decoration (underline, Overline, Line-through, Blink) as well as Transformation (capitalize, uppercase and lowercase)

  Space

  Indents, Space before and after, left and right margins. Alignment, Justification, Line spacing, Word spacing, Letter spacing. Float and Clear.

  Lists

  bullet shapes or gifs, alphabetic, Roman numeral, wrap multiple lines under number or bullet.

  Images

  Positioning, Alignment, Scaling, Tiling, Floating images and Wrapping text.

  Colors

  Colors can be set for backgrounds and foregrounds of any object.

  Boxes

  Boxes can be drawn around any object, with a wide variety of styles (line, double, dotted, dashed, raised, depressed, groove, etc.).

  Miscellaneous

  There are many special formatting features, such as multi-column layout, making the first character of a paragraphs very large and wrapping the text around it. There are also print directives such as page-break, and audio/speech properties. Style sheets can also be media specific; For example, specifying one font for screen display and another for printing.

The CSS Zen Garden Web site provides wonderful examples on the use of Cascading Style Sheets.

Two useful guides to how well style sheets are implemented on different browsers are " The House of Style", which lists CSS support by feature or browser, and the "Style Sheets Guide", which although slightly outdated provides browser compliance tables.

To see what style sheets can really do, download the latest browser version, Netscape 7, IE 6, or Opera, and view the WC3 CCS test suite. (If you open the same documents in IE 5.0 or Netscape 4.x you will see what the older browsers are still not supporting.)

slide 17

"Mastering a Web Site" online course Created and maintained by Lorna Schmid and David Boldt. http://water.usgs.gov/usgs/training/webmaster/cascading_style_sheets.html     Last modified: Wed Nov 12 17:46:23 EST 2003