WPI Style Sheets

This document is under construction and was last updated: Tuesday, 09-Nov-2004 08:58:58 EST

The official style sheet should be used whenever possible to provide a consistent feel to all WPI maintained web sites. Among other things, these style sheets also cause sidebar navigation and bottom navigation to automatically disappear when printing to utilize the whole sheet of paper.

If the template for the site does not currently use style sheets, the official one can be used by inserting the following in your head:

<link rel="Stylesheet" type="text/css" href="/format.css"> <link rel="stylesheet" type="text/css" media="print" href="/formatprint.css">

If you wish to use your own style sheet to customize the official styles for your site, you should include it between these two lines.

When using the WPI style sheets, do not add any formatting tags and attributes such as font, color, bgcolor, or align. The style sheets will automatically these things. However, you can tell the template special cases by adding the class attribute to them. This page describes the styles and possible classes you can use.

For official webmaster@wpi.edu maintained pages, if you cannot find a style that does what you want, do not create a new style sheet, contact Troy Thompson (tbt@wpi.edu) and he can find an applicable style or add a new one to the template.

Alignment

Do not use the "align" attribute anymore. Use class="right" or class="center". They should be primarily used for images, table cells, and paragraph tags. In general, though, let the style sheet align things for you. i.e. don't center headers if the header style doesn't.
To end text wrapping, use class="clear" on the tag you want to start below the text wrapped item rather than the traditional <br clear="all">.

Headings

Spacing below headings has been mostly eliminated to create better visual grouping of the headers and the information below them. Do not over-ride this by adding extra br's after headers.

Do not use header tags unless it is actually a header of a section of the page. i.e. don't use header tags just to make big text, use <p class="promo"> for this instead.
Always use header tags in order. On new templates, the title of the page is generated as an h1, any other section headers should start with h2 then h3 and so on. Do not skip headers numbers such as going from h2 to h4.
If there is a header for a section, use the appropriate header tags. Do not try to emulate the look by using <p><b>title</b></p>
If there is a subheader to a page title (common in press releases) use <p class="subheader"> rather than an h2 or h3 as the subheader is not actually the title of a new section.

Indenting

To indent text, use styles rather than ul, ol, blockquote etc.

For hanging paragraphs in a bibliography/citation, use <p class="citation">.
For other hanging paragraphs, use <p class="hang"> or <p class="hang2"> depending on the amount of indentation needed. In most cases, you should use a bulleted list instead of hanging paragraphs.
If you have sub hanging paragraphs, use <p class="hangsub">.
If you have a mailing address listed on a page for people to send information to, this usually looks nicer indented. To do this, use <p class="address">.

Lists

In ordered and unordered lists, space will be added after each list item so there is no need to add additional code to do this. If you are creating a bulleted menu or a list of few word items and do not want this space, use <ul class="menu"> or <ol class="menu">
If you wish to have a check list, use <ul class="checkboxes"> and use lis as normal.
In definition lists, DTs will automatically be bolded and space will be added after each DD so there is no need to add additional code to do this.
If there is a heading for the list, but it isn't actually a section header, such as "The following things are important:", use <p class="listheader"> which will make it bold and bring it closer to the list.

Block Quotes

Use <blockquote>. This will italicize it.
Use <blockquote class="author"> for the author of the quote. This will right align it.

Big Eye-Catching Text

If you have promotional text or a big link at the bottom of the page you want to catch people's eye, do not use header tags since it is not a header. Instead use <p class="promo">.

Equations

Use <p class="equation">. This will center the equation on the page similar to text books.

Footnotes

Use <p class="footnote">. This will make the text slightly smaller and italicize it.

Fine Print

If you want fine pint, use the <small></small> tags within a <p> or other container tag.

Non-Wrapping Text

If you want don't want an element to wrap onto multiple lines, use class="nowrap". Use this sparingly to prevent breaking of templates.

Images

Border is automatically removed for all images on the site. Do not set hspace, vspace, or border attributes since this is done using CSS.

Right/Left Aligned Images

Caption Here

When aligning images left or right in the copy, the width of the graphic should be 300 pixels or less. If an image is required to be larger than this, see centered images below.
If there is no caption to the photo, use class="right" or class="left" on the img tag rather than the "align" attribute as this will automatically add appropriate spacing for the text around them. You should not set hspace, vspace, or border attributes.
If you want to put a caption on a photo, use code like this:
<div class="photoright300"> <img src="Images/photo.jpg" width="300" height="200" alt=""> <p>Caption Here</p> </div>
This will format the photo and caption like the example to the right automatically. There are a series of styles such as photoright150, photoright200, photoright300, photoleft150, photoleft200, photoleft300 depending on your needs.

Large, Multiple Side-by-Side, or Center Aligned Images

If the image needs to be larger than 300px wide, you have multiple images that need to appear side-by-side with a single caption, or you want it to appear centered on the page rather than wrapping text around it such as for technical figures or graphs, use code like this:
<div class="photocenter"> <img src="Images/photo.jpg" width="500" height="200" alt=""> <p>Caption Here</p> </div>

Thumbnails Page

To set up thumbnails for a photo album, instead of using a table, use style sheets. This way, the thumbnails will fill the width of the window. Thumbnails should be 100px x 150px or 150px x 100px.

If you want to create a thumbnails page, use code like this:
<div class="album"> <div><a href="photo1.html"><img src="Images/photo1-t.jpg" width="100" height="150" alt=""></a></div> <div><a href="photo2.html"><img src="Images/photo2-t.jpg" width="100" height="150" alt=""></a></div> </div>
If all of the thumbnails are portrait oriented, you can use <div class="albumportrait"> instead of album to bring them closer together.
If all of the thumbnails are landscape oriented or you wish to add very short captions, you can use <div class="albumlandscape"> instead of album. Captions should be enclosed in P tags within the div for the particular photo.

Multiple Columns

In general, you should not put body text in multiple columns. If, however, you have long lists of dates, options, etc with very few words in each item, multiple columns can save vertical space and scrolling.

Rather than use a table for these lists, use style sheets. This way, the list can be put back into one column if being viewed on a narrow screen such as a PDA or if people have style sheets disabled.

To do two equal columns: <div class="half"><p>Text in column one.</p></div> <div class="half"><p>Text in column two.</p></div>
To do three equal columns: <div class="third"><p>Text in column one.</p></div> <div class="third"><p>Text in column two.</p></div> <div class="third"><p>Text in column three.</p></div>
There are also "quarter", "threequarter" and "twothird" styles defined.
Be sure to add a class="clear" to the element following the multiple columns to prevent it from wrapping strangely.

Callouts

Callouts are used to add additional tidbits of information, a tool related to the page, or portal type module information. They should not be used to have multiple columns of body text.

Standard Callout

Standard Sample

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

If you want to use a callout as shown, use code like this:
<div class="callout"> <h2 class="callout">Standard Sample</h2> <p>Text here.</p> </div>
which will create a 250px wide callout. You can also use a callout300 div if you need a wider callout for table or 300px wide photo.
If you wish to stack callouts, lay out the page using multiple columns, or enclose them inside a div.callout300
The color of the callout title bar is set in the department stylesheet. The default is black.

Filled Callout

Filled Sample

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

If you want to use a callout as shown, use code like this:
<div class="calloutfilled"> <h2>Filled Sample</h2> <p>Text here.</p> </div>
which will create a 250px wide filled callout.

Tables

class="format", border, and cellpadding has been depricated. Please see below.

Tables should be coded properly using tds for data cells, and ths for column and row headers.

Do not set widths to tables or their cells.
th's will be formatted automatically by CSS. There is no need to add bgcolor to the cells.
If you have two rows of th's at the top of a table for a main header and sub-header, use <th class="main"> for the main header and a regular th for the sub headers
If in rare cases, you want to left align a th, use <th class="left">.
To achieve the alternating tinted row effect, use <tr class="tint"> on every other tr to give a background, tint, background, tint pattern. if there is a top th row on the table, start with a plain row. if there is no th row, start with a tinted row.
To format a particular column (such as centering it), us the colgroup tag for formatting rather than assigning class="center" to each cell.
<colgroup> <col> <col class="center"> <col> </colgroup>

Depending on the type of table you're creating, you should use a different table class.

Data tables

Data tables should be formatted using <table cellspacing="1" class="data">.
Use <th class="right"> for the row labels.
Example:

Column 1 Column 2 Column 3

Row 1 Data 1 Data 2 Data 3

Row 2 Data 4 Data 5 Data 6

	Column 1	Column 2	Column 3
Row 1	Data 1	Data 2	Data 3
Row 2	Data 4	Data 5	Data 6

Forms

Forms should be formatted using <table cellspacing="1" class="form">. This will set the width to 100% and set a fixed width for the side TH's.
Use <th class="right"> for the field labels.
Example:

Field 1

Field 2

Field 1
Field 2

Schedules & Agendas

Schedules & agendas should be formatted using <table cellspacing="1" class="schedule">.
Use <th class="right"> for the time labels.

Example:

Time	Place	Event
10 a.m.	Building Alpha, Room 123	Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
11 a.m. - Noon	Building Alpha, Room 123	Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Calendars

Calendars should be formatted using <table cellspacing="1" class="calendar">.
Example:

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

1 2 3 4 5 6 7

8 9 10 11 12 13 14

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
1	2	3	4	5	6	7
8	9	10	11	12	13	14

Archive lists

Archive lists should be formatted using <table cellspacing="1" class="archive">.

Example:

1990	Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1991	Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Maintained by webmaster@wpi.edu
Last modified: Nov 09, 2004, 08:58 EST