Skip to content Accesskey=4Skip to sub-navigation Accesskey=NView our Accessibility Options MIT Information Services and Technology Home About IS&T Contact IS&T Site Map Search Advanced Search
Getting StartedGetting Services by Topic or Alphabetically Getting Help


Home

Web Page Templates

Color Palette

Typography

Common Page Elements

Cascading Style Sheet

Creating Graphics

Publishing Checklist

related links
 

IS&T Graphic Identity

  


IS&T Web Site Style Guide

Cascading Style Sheet

The IS&T web site uses a single cascading style sheet (CSS) document (isstyles.css) to define typographic styles throughout the site. This has the benefit of ensuring consistency from page to page, as well as simplifying the editing process if a style change ever needs to be made.

Since the style sheet is maintained by the IS&T Web team, you will never need to edit the style sheet. The easiest way to apply styles to your pages is to use and follow the style examples set forth in the web page templates. Careful editing of the templates—whether using Macromedia Dreamweaver or a text editor—will help to ensure that the integrity of the styles is maintained. You can also apply and change styles by following the guidelines in the quick reference tables below.

For information about learning CSS, see the W3C's Learning CSS page. CNET also provides a Guide to Get Started with CSS.

isstyles.css Quick Reference

The table below is a quick reference to some of the most common styles on the IS&T Web site. While the easiest way to apply styles to your pages is to use and follow the style examples set forth in the web page templates, this table is provided as a reference to assist web publishers with applying styles to their pages. For help with applying styles and/or to request changes/additions to the style sheet, contact istweb@mit.edu.

Redefined HTML Elements

Style Name/Sample:
How To Apply:
Use For :

Element p

Use the standard HTML <p></p> tag. In Dreamweaver, choose Format > Paragraph from the Properties panel.

HTML code example: 

<p>The quick brown fox jumps over...</p>

Text in paragraphs
Text in tables

Element H1

Use the standard HTML <h1></h1> tag. In Dreamweaver, choose Format > Heading 1 from the Properties panel.

HTML code example: 

<h1>Title of Page</h1>

Main heading at top of page

Element H2

Element H3

Element H4

Element H5
Element H6

Use the standard HTML <h2></h2> - <h6></h6> tags. In Dreamweaver, choose Format > Heading 2, 3, 4, 5 or 6 from the Properties panel.

HTML code examples: 

<h2>Second-level Subhead</h2>
<h3>Second-level Subhead</h3>
<h4>Second-level Subhead</h4>
<h5>Second-level Subhead</h5>
<h6>Second-level Subhead</h6>

Page subheadings

 
Element pre

Use the standard HTML <pre></pre> tags. In Dreamweaver, choose Format > Preformatted from the Properties panel.

HTML code example:

<pre>Prompt</pre>

Preformatted text (e.g., code examples)
Element small

Use the standard HTML <small></small> tags. In Dreamweaver, go into the HTML code and insert around the text you would like to see reduced in size.

HTML code example:

<small>Small Text</small>

Top menu bars, words contained in brackets or parentheses
(e.g., [certificates required])

Special Style Sheet Classes For Text and Lists

Style Name:
How To Apply:
Use For :

Class .subheads

Use class="subheads" inside of an opening <p> tag

HTML code example: 

<p class="subheads">Urgent Notice:</p>

Subheading text, such as that to start a paragraph, where special emphasis is required (use sparingly)
Class .text

Use class="text" inside of opening table data <td> tags

HTML code example: 

<td class="text">table data</td>

Text in tables or content where using the <p></p> tag is a concern
  1. Class .lalphalist

Use standard HTML ordered list tags with class="lalphalist" inside of opening <li> tag

HTML code example: 

<ol>
<li class="lalphalist">list item</li>
</ol>

Lowercase alphabetical list
  1. Class .ualphalist

Use standard HTML ordered list tags with class="ualphalist" inside of opening <li> tag

HTML code example: 

<ol>
<li class="ualphalist">list item</li>
</ol>

Uppercase alphabetical list
  1. Class .lromanlist

Use standard HTML ordered list tags with class="lromanlist" inside of opening <li> tag

HTML code example: 

<ol>
<li class="lromanlist">list item</li>
</ol>

Lowercase roman numeral list
  1. Class .uromanlist

Use standard HTML ordered list tags with class="uromanlist" inside of opening <li> tag

HTML code example: 

<ol>
<li class="uromanlist">list item</li>
</ol>

Uppercase roman numeral list

Special Style Sheet Classes For Tables

Style Name:
How To Apply:
Use For :

Class subjectheads

Use class="subjectheads" inside of opening table data <td> tag

HTML code example: 

<td bgcolor="#4C4C4C" class="subjectheads">
table data
</td>

Text headers inside of table row with dark gray background

Class .border-all

HTML code example: 

<table width="100%" border="1" cellpadding="8" 
cellspacing="0" class="border-all">

Tables with a yellow background color fully surrounded by 1px borders

Class .border-all-blank

HTML code example: 

<table width="100%" border="1" cellpadding="8" 
cellspacing="0" class="border-all-blank">

Tables with no background color (default is white) fully surrounded by 1px borders

MIT Home | Getting Started | Getting Services | Getting Help | About IS&T | Accessibility
Ask a technology question or send a comment about this web page.