Demonstration of csoffwhite.css Style Sheet (H1)

General Purpose (H2):

This style, with its pale, barely off-white background, is designed for general purpose.  (This is a sample of <p class="2">).

Features: (H3)

Body (H4)

The body has text aligned to the left margin.  The background in #f8f8ff, a eye-comforting non-white.

Headers (H4)

There are 4 defined headers:

1. H1:            The main header is ALL-UPPERCASE letters, centered on a pale yellow (#ffffdd) background banner, outlined in the medium blue of the letters (#224499).  The letters are a medium blue (#224499) and bolded, chosen for their contrast with the gold banner.  <h1>     </h1>
2. H2:  The second-level header, with no "class" indicated, Captializes All Words, and is centered on a pale blue green banner (#bbeeee), and 80% of page width.  (Unfortunately, Netscape aligns the banner with the right side.)  The letters are a navy color.  <h2>     </h2>
3. H3:  The third-level header is aligned to the left margin in the same color banner (#bbeeee)as H2.  The banner is limited to the left half of the screen.  Again, the letters are Underlined But Default Font And Italicized Bold.  Netscape will likely ignore the italics.  <h3>     </h3>
4. H4:    The fourth-level header is also aligned to the left margin, with no banner.The letters are Small capitals, bold.  <h4>     </h4>

Paragraphs

There are 3 defined styles of paragraphs.  (This being an example of <p class="2">)

1. p class="2":  No different from just <p> in Netscape; class 2 indents the first line 24 em. in I.E.
2. p class="3":     This paragraph style was designed for long quotes; it is centered on 80% of the screen.  Another definition which seems to be ignored by Netscape.
3. p class="final":   This paragraph style was designed for a credits paragraph at the end of the page.  It uses extra small font and is aligned to the right side.

Lists

• Unordered lists (<ul>) are begun with a palm graphic.  (URL:  backgrounds/palmsarev.gif)

1. NOTE:  Netscape seems to have a problem with recognizing more than one class of ordered lists; Whatever is last in the css will probably be used throughout the page, no matter if a different class is indicated.  Therefore, I define the final, default OL first:
2. ol (plain)       If no class is specified, items are numbered by Roman numerals, aligned on the "inside", or left.
3. ol class="1I"     Items are ordered by Roman numerals aligned by the period following the number.  (class="1I" or Arabic 1 Roman numeral 1)
4. ol class="2A"    Items are ordered by Capitalized Roman alphabet, aligned by the period following the letter.  (class="2A" or Arabic 2 Roman letter capital A)
5. ol class="31"     Items are ordered by Arabic numerals, aligned by the period following the number.  (class="31" or Arabic 31)
6. ol class="4a"     Items are ordered by lower-case Roman letters, aligned by the period following the letter.  (class="4a" or Arabic 4 Roman letter lowercase a)
7. ol class="5i"     Items are ordered by lower-case Roman numerals, aligned by the period following the number.  (class="5i" or Arabic 5 Roman numeral lowercase i)
8. This list is an example of class="31" (thirty-one, not 3-L).

This allows for a full, 5-level outline in traditional format.

Developed by Steve Morris
2004
Sample of <p class="final">

Stylesheet

The End

This page created and maintained by Steve Morris, Business Research Specialist, Reference & Instructional Services Dept. Green Library Florida International University Miami, Florida 33199		www.fiu.edu/~morriss/styles/csoffwhitedemo.html Last Updated :