Cascading Style Sheets are used throughout the Rethinking Schools web site. This document describes the use of CSS across the Rethinking Schools web site in detail.

The styles defined within the main CSS file: "RSstyle.css" have been carefully developed to ensure consistency across the main browsers and operating systems used today (October 2002). That includes Macintosh and Windows versions of Netscape & Explorer. The AOL browser is based on Explorer. The base browser version is 4.x. Explorer version 3.x introduced Style Sheets in 1997. Netscape introduced CSS with its version 4.x browser in 1998.

A conservative approach was adopted. The font faces, sizes, leading, weights and colors were carefully chosen. Those that appear within the defintion provide the most consistent rendering across all browsers and platforms tested.

DO NOT MODIFY THE FILE "RSstyle.css"

Definitions and Uses of CSS

These are the styles used in the file "RSstyle.css" as of October, 2002. Examples of each rule is shown, followed by the definitions for each rule.The definition appears first in near-traditional typesetting terms (The Rule), then as it appears in the style sheet (The Code).

In all cases, pixels were used as a measure because they provide the most consistency across platforms. You can think of pixels as the near equivalent of points. One pixel is alomost equal to one point.

MAIN SITE FONT

The font used across the site and defined as appearing within all <td> tags is: Arial; Helvetica; Sans-serif. This is the "body" definition. Type size is NOT defined because it would cause problems later.

This style affects all copy appearing within a table cell. Copy outside of table cells will render as Times. All copy appearing within the Rethinking Schools web site must be contained within a table cell. That is: within a <td> tag. Since the site layout is controlled with tables, this should never be a problem.

What this style tells the browser is:

Use Arial if it is available on the computer; if Arial is not available, use Helvetica; if Helvetica is not available use the default sans-serif font for this computer.

The code is:

td { font-family: Arial, Helvetica, sans-serif}

NOTE: Changing this style rule affects the font used throughout the entire Rethinking Schools web site. No other font faces are defined in the following styles. WARNING: Most computers have Times and Arial installed. Specifying another font that is NOT installed across all computers, such as "Formata," will cause problems in rendering on computers that do not have that font. DO NOT CHANGE THIS DEFINITION.

HEADS

Headline tag styles (H1, H2, H3, H4.) are pre-defined by font size, leading and color.

In the following rules, pixels (px) are used as a unit because they provide the most consistency between Mac and Windows. You can think of pixels as points, but they are not exactly equivalent.

Heading 1

The Rule:
20 px/22 px, bold, color: blue (000066)
The Code:
h1 { font-size: 20px; line-height: 22px; font-weight: bold; color: #000066}

Heading 2

The Rule:
16 px/17 px, bold, color: blue (000066)
The Code:
h2 { font-size: 16px; line-height: 17px; font-weight: bold; color: #000066}

Heading 3

The Rule:
14 px/15px, bold, color: blue (000066)
The Code:
h3 { font-size: 14px; line-height: 15px; font-weight: bold; color: #000066}

Heading 4

The Rule:
12 px/13 px, bold, color: blue (000066)
The Code:
h4 { font-size: 12px; line-height: 13px; font-weight: bold; color: #000066}

Heading 5

The Rule:
10 px/12 px, bold, color: blue (000066)
The Code:
h5 {font-size: 10px; line-height: 12px; font-weight: bold; color: #000066 }

SPECIAL CLASSES

The list below identifies all classes predefined withiin RSstyle.css. It includes instructions for their use.

txt

This style will be the most often used style. It is usually attached to <table> or <td> tags. It controls the size of type appearing within a table or table cell. The size of all copy in this column is defined by the style "txt" because it was attached to this table cell, or <td> tag: <td class="txt">

SAMPLE sample

The Rule:
12 px/14 px
The Code:
.txt { font-size: 12px; line-height: 14px}

NOTE: This tag controls only the size and leading of copy. Style & weight are still controlled by <i> (italic) and <b> (bold) tags. If another size or type style is desired within a table cell, attach a different class to that copy. (See column at right.)

txt_sml

This style will be the second most used style. It is attached to columns like the gray colimn to the right. These columns generall contain incidental copy, like a table of contents for a specific Rethinking Schools issue of articles. It is also used for author information and the typical "Fall 200" closing at the end of articles. In those cases, it is attached to the <p> tag.

SAMPLE sample

The Rule:
8 pt/9 pt
The Code:
.txt_sml { font-size: 10px; line-height: 13px}

Like the "txt" class, the "txt_sml" class affects only type size.

page_title

Used ONLY for the title of all pages - at the top of the page. It is in the base template for the site. It MUST be attached to a bold tag: <b class="page_title">

SAMPLE sample

The Rule:
22 px/24 px, bold, blue (000066)
The Code:
.page_title {font-size: 22px; line-height: 24px; font-weight: bolder; color: #000066}

You may never need to use this tag because it is part of the template for all pages.

leadin

This style is used for special cases when the first paragraph on a page is intended to stand out from the rest of the copy on that page. It controls size and color. It can be attached to a paragraph <p> tag or a bold <b> tag, depending on how much emphasis is desired. If the <b> tag is used, color may not always appear.

SAMPLE sample - attached to <b> tag

SAMPLE sample - attached to <p> tag

The Rule:
14 px/20 px, bold, blue
The Code:
.leadin { font-size: 14px; line-height: 20px; color: #000066; font-style : italic;}

author

This style is used for author bylines. It MUST be attached to a bold tag:
<b class="author">
Make sure you close the bold tag: </b> OR all copy following will be bold and influenced by this class.

SAMPLE sample

The Rule:
12px/19 px, bold, italic, blue (000066)
The Code:
.author { font-size: 12px; line-height: 18px; font-weight: bold; color: #000066; font-style: italic;}

author_close

This style was created for the paragraph appearing at the end of an article that gives information about the author. It sets a larger size, italicizes this type and makes it blue. Attach it to the <p> tag.

SAMPLE sample

The Rule:
12 px/ 18 px, italic, blue (000066)
The Code:
.author_close { font-size: 12px; line-height: 18px; font-style: italic; color: #000099}

article

This style is used on Journal table of contents pages (typically "17_01.shtml"). It defines a larger font size and a blue color for the title of an article in the table of contents. Attach it to the title of an article in the TOC.

This class is attached to the <b> tag surrounding the title of the article only. For example:

<p><b class="article"><a href="Woun163.shtml">The Wounded Knee Massacre
and Children's Books</a></b><br>

Note that the <b> tags are outside of the <a> tags which create the link. Use care to keep this separate from the "author" class attached to an authors name in a separate <b> tag.

SAMPLE sample

The Rule:
16 px/22 px, bold, blue (000066)
The Code:
.article { font-size: 16px; line-height: 22px; font-weight: bold; color: #000066}

subhead

This class was created for a very special use. When the extra space created by the use of an <H3> tag is not desired, use this tag. It should always be attached to a bold tag: <b class="subhead">

SAMPLE sample

The Rule:
14px/15 px, bold
The Code:
.subhead { font-size: 14px; line-height: 15px; font-weight: bold; color: #000066}

The closing bold tag </b> can be followed by a <br> tag, creating a tighter unit when so desired:

Special Headline
continuing story copy that remains tight to the subhead.

The "subhead" class is useful in table cells or paragraphs controlled with the "txt" or "txt_sml" classes.

smallhead

This class is similar in use to the one noted above. It is most useful within paragraphs or table cells controled by the "txt_sml" class. It must also be attached to a bold tag: <b class="smallhead">

SAMPLE sample

The Rule:
12 px, bold
The Code:
.smallhead { font-size: 12px; font-weight: bold}

It is not useful in text controlled by the "txt" tag. In those cases, the bold tag alone will suffice.

SPECIAL CASE CLASSES

white_head

This style has very speciallized uses. It should only be used when the background of a table cell is darker than 30% gray (999999 or darker). It must be attached to a bold tag.

It is shown below in a table cell with a black (000000) background.

SAMPLE sample

The Rule:
12 px, bold, white
The Code:
.white_head { font-size: 12px; font-weight: bold; color: #FFFFFF}

NOTE: sample above is shown in a floating table cell with a cell padding of 6.

toc_head

This special case class is used only for the headline of a table of contents appearing on article page for individual issues of Rethinking Schools. (Typically "CONTENTS Vol. 17, No. 1".)

It is only used in the right-had column in Journal pages against a light grey background. It MUST be attached to a bold tag.

SAMPLE sample

The Rule:
13 px/13 px, bold, blue (000066)
The Code:
.toc_head { font-size: 12px; font-weight: bold ; line-height: 13pt; color: #000066}

Singling this use out allows for quick modification of the heading of all table of contents throughout the site by changing this definition - if necessary.

legal

This style was created for any legal copy that must appear on any page of the Rethinking Schools web site.

SAMPLE sample

The Rule:
9 px/ 10 px, Verdana or sans-serif
The Code:
.legal { font-size: 9px; line-height: 10px; font-family: Verdana, Geneva, sans-serif}

Verdana is specified because it is very readable on screen at small sizes. The same is true of Geneva

total_price

This style was created for the Order forms and whenever a total price needs to be highlighted. It creates a bold red font that is hard to miss.

SAMPLE sample

The Rule:
16 px, bold , red (FF0000)
The Code:
.total_price { font-size: 16px; font-weight: bold; color: #FF0000}

 

HOME PAGE CLASSES

These classes are used only on the Home Page.They allow independent control of the Home Page fonts. They should NOT be used on any other page.

ALL Home Page styles start with the letters "HP_"

The first four styles define a range of headline styles. They must all be attached to a <b> tag.

HP_head1

This style is the largest headline style for the Home Page. It MUST be attached to a <b> tag.

SAMPLE sample

The Rule:
20 px/22 px, bold, blue (000066)
The Code:
.HP_head1 { font-size: 20px; line-height: 22px; font-weight: bold; color: #000066}

HP_head2

This style is the second largest headline style for the Home Page. It MUST be attached to a <b> tag.

SAMPLE sample

The Rule:
17 px/ 18 px, bold, blue (000066)
The Code:
.HP_head2 { font-size: 17px; line-height: 18px; font-weight: bold; color: #000066 }

HP_head3

This style is the third largest headline style for the Home Page. It MUST be attached to a <b> tag.

SAMPLE sample

The Rule:
15 px/ 18 px, bold, blue (000066)
The Code:
.HP_head3 { font-size: 15px; line-height: 18px; font-weight: bold; color: #000066 }

HP_subhead

This special style is used when a smaller subhead is required. It is similar in size to the site-wide H3 tag, but allows tighter line spacing with the line below it. It is smaller than the Home Page head3 tag.

It MUST be attached to a <b> tag.

SAMPLE sample

Sample Heading
This example shows tighter spacing with copy by using a <br> tag

The Rule:
12 px/ 16 px, bold, blue (000066)
The Code:
.HP_subhead { font-size: 12px; line-height: 16px; font-weight: bold; color: #000066}

HP_subhead_small

This special style is used when a smaller subhead is required. It is similar in size to H5 with more open leading and allows tighter line spacing with the line below it.

It MUST be attached to a <b> tag.

SAMPLE sample

Sample Heading
This example shows tighter spacing with copy by using a <br> tag

The Rule:
10 px/ 15 px, bold, blue (000066)
The Code:
.HP_subhead_small { font-size: 10px; line-height: 15px; font-weight: bold; color: #000066

The following styles affect the text appearing on the Home Page. They can be used with discretion on the Home Page.

HP_leadin

This is similar to the "leadin" style used throughout the site, but has been modified for use on the Home Page ONLY.

SAMPLE sample

The Rule:
13 px/ 16 px, italic, blue (000066)
The Code:
.HP_leadin { font-size: 13px; line-height: 16px; color: #000066; font-style : italic; }

HP_text

This style is slightly larger than the "txt" style used throughout the site. It is modified for use on the Home Page ONLY.

SAMPLE sample

The Rule:
12 px/ 16 px
The Code:
.HP_text { font-size: 12px; line-height: 16px}

HP_txt_small

This style is for small text on the Home Page ONLY.

SAMPLE sample

The Rule:
10 px/ 13 px
The Code:
.HP_txt_small { font-size: 10px; line-height: 13px}

HP_txt_tiny

This style is for tiny text on the Home Page ONLY.

SAMPLE sample

The Rule:
9 px/ 11 px
The Code:
.HP_txt_tiny { font-size: 9px; line-height: 11px}

OTHER CLASSES

The following classes are used primarily in the template and are not intended for general use.

crumbtrail

Used ONLY for the crumbtrail appearing at the top of all pages. This is also built into the template for all pages. It is attached to the table cell holding the crumbtrail.

SAMPLE sample

8 pt, bold
.crumbtrail { font-size: 8pt; font-weight: bold}

nav_txt

This style is used in the template for every page. It controls the display of the text navigation appearing at the bottom of every page. It is attached to the table cell holding the text navigation: <td align="center" class="nav_txt">

SAMPLE sample

8 pt
.nav_txt { font-size: 8pt}

footer

This style is used in the template for every page. It controls the display of the copyright and closing copy appearing at the bottom of every page. It is attached to the table cell holding the the copyright: <td class="footer">

SAMPLE sample

6 pt / 8 pt. Verdana or Arial or Helvetica or sans-serif
.footer { font-family: Verdana, Geneva, sans-serif; font-size: 6pt; line-height: 8pt}

NOTE: This is one of only two classes that define a different font face. Verdana is preferred for very small type because it is very readable at small sizes and available on most computers.

hover

This class is automatically attached to ALL links. It controls the color seen when a cursor rolls over a link.

It is NOT attached to anything else and is never used outside of the style sheet.

SAMPLE sample

The Rule:
Change the color of the link to red when a cursor rolls over it.
The Code:
a:hover{ color : #ff0000; }