Next / Previous / Contents / TCC Help System / NM Tech homepage

5. Styling with CSS

Here is the style sheet “birdindex.css” for the generated pages, as CSS (Cascading Style Sheets) level 2. See the author's reference document, Styling Web pages with CSS-2.

First we'll need a basic page style. The author's preference is for insipid earth tones.

birdindex.css
/* Special stylesheet for the bird index pages.
 * For documentation, see:
 *   http://www.nmt.edu/~john/scans/slides/catweb/
 */
body
{   background-color: #ffffdd;      /* Pale golden yellow */
    color:            #663300;      /* Dark brown */
}

As discussed in Section 4.1, “XHTML design considerations”, we'll need rules for the div elements used to represent the headings for each taxonomic rank. This version of the stylesheet assumes that the rank set in use has these levels:

cClass
oOrder
fFamily
-fSubfamily
gGenus
sSpecies
xSubspecific form

So we'll need a rule for a div elements for each of these classes, where the class name is head-X, and X is the rank code.

To get proper indentation, we'll set the margin-left property to a larger value for each lower rank. Major ranks will also use a larger text size.

birdindex.css
div.head-c
{ font-size: 200%;
}

div.head-o
{ font-size: 160%;
  margin-left: 10px;
  margin-top: 12px;
  border-top: 6px solid;
}

div.head-f
{ font-size: 140%;
  margin-left: 20px;
  margin-top: 8px;
  border-top: 4px solid;
}

div.head--f
{ font-size: 120%;
  margin-left: 30px;
  margin-top: 4px;
  border-top: 2px solid;
}

div.head-g
{ margin-left: 40px;
}

div.head-s
{ margin-left: 50px;
}

div.head-x
{ margin-left: 60px;
}

That takes care of all the possible taxonomic levels. We'll need another rule for rendering the lines for English names. This line must be indented further than all the taxonomic headings.

birdindex.css
div.name-line
{ margin-left: 70px;
}

The span.genus rule is used for italicizing genus and species names.

birdindex.css
span.genus
{ font-style: italic;
}

The rest of these rules apply to form pages. The div.ident rule sets off the box containing the catalog number and location. This rule gives the box a light gray background.

birdindex.css
div.ident
{ background-color: #eeeeee;
}

The span.cat-no rule sets off the catalog number in bold, slightly larger, maroon type.

birdindex.css
span.cat-no
{ font-weight: bold;
  font-size: 120%;
  color: maroon;
}

The td.cat-info rule puts a small amount of padding (three pixels) around the entire table cell in the data column. I could have done this with a cellpadding attribute for the whole table, but I wanted the thumbnail to exactly fill its cell.

birdindex.css
td.cat-info
{ padding: 3px;
}