Demonstration of Discourseindex.css Style Sheet (H1)

General Purpose (H2):

This style, with its pale, off-white background, is intended for complementary use with discourse.css.   Some of the headings have reversed the colors, to give some variety, especially in creating a table of contents or other support pages that need to be distinct from the main pages yet have a compatibility.   (This is a sample of <p class="lead">).

Features: (H3)

Body (H4)

The body is left-aligned with a background color of "#eeeeee", or off-white, to reduce eyestrain.  (Only reading white letters on a dark background causes worse eyestrain than reading dark letters on a bright, white monitor.  In short, what works on paper is not the same as on a monitor where light is projected, not reflected.)

Headers

1. H1:  The main header is ALL-UPPERCASE letters, centered.  The letters are a Navy color and bolded.
2. H2:  The second-level header has All Words Capitalized and is centered.  The letters are a maroon color (#883355).
3. H3:  The third-level header also Captializes All Words and is centered.  The letters are a navy color, bolded and italicized.
4. H4:  The fourth-level header is left-aligned and limited to 50% of the page width.  The letters are bolded italic.

Paragraphs

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

1. p class="lead":  This style for leading paragraphs is all in bold.
2. p class="2":    No different from just <p> in Netscape, class 2 indents the first line 24 em. in I.E.
3. p class="3":     This style centers the paragraph in 80% of the page width.  Another definition which seems to be ignored by Netscape.
4. 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.

Tables

Tables are defined as having a border in the "ridge" style (see at bottom of page) 5 pixels wide.  Cells have padding of 8 pixels above and below, 20 pixels right and left.  (One of the few truly advantageous options I have found in CSS is to vary the padding of cells according to horizontal and vertical dimensions!)  (This paragraph is an example of <p class="3">.)

Lists

• Items in 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.
4. ol class="2A"    Items are ordered by Capitalized Roman alphabet, aligned by the period following the letter.
5. ol class="31"     Items are ordered by Arabic numerals, aligned by the period following the number.
6. ol class="4a"     Items are ordered by lower-case Roman letters, aligned by the period following the letter.
7. ol class="5i"     Items are ordered by lower-case Roman numerals, aligned by the period following the number.
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

BODY {text-align:left;
      background:#eeeeee}
H1 {text-transform:uppercase;
      text-align:center;
      color:navy;
      font-weight:bold}
H2 {text-transform:capitalize;
      text-align:center;
      color:#883355}
H3 {text-align:center;
      font:italic bold;
      color:navy}
H4 {text-align:left;
      font:italic bold;
      width:50%}
P.lead {font-weight:bold}
P.2 {text-indent:24}
P.3 {text-align=center;
      width=80%;
      position:relative;left:10%}
P.final {text-align:right;
      font-size:xx-small}
table {padding:8px 20px;
      border-style:ridge;
      border-width:5px}
OL.1I {list-style:upper-roman outside}
OL.2A {list-style:upper-alpha outside}
OL.31 {list-style:decimal outside}
OL.4a {list-style:lower-alpha outside}
OL.5i {list-style:lower-roman outside}
OL {list-style:upper-roman inside}
ul {list-style:url(http://www.fiu.edu/~morriss/backgrounds/palmsarev.gif)}

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/discourseinddemo.html Last Updated :