Demonstration of Discourse.css Style Sheet (H1)

General Purpose (H2):

This style, with its pale, off-white background, is intended for general use, especially for pages with paragraphs of narrative.  (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.)

Headers

  1. H1:  The main header is ALL-UPPERCASE letters, centered.  The letters are a maroon color (#883355) and bolded.
  2. H2:  The second-level header has All Words Beginning With A Capital Letter and is centered.  The letters are a navy color.
  3. H3:  The third-level header also Captializes All Words and is centered.  Again, the letters are a navy color.
  4. H4:  The fourth-level header is left-aligned.  The letters are bolded.

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

 

  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:#883355;
      font-weight:bold}
H2 {text-transform:capitalize;
      text-align:center;
      color:navy}
H3 {text-transform:capitalize;
      text-align:center;
      color:navy}
H4 {text-align:left;
      font:normal bold}
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

FIU Library Home Page Florida International University Home Page Business Librarian's Page Style Sheets Demo Index

                         
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/discoursedemo.html

Last Updated :