Mesa Community College Style Guide

Formatting Text

Do not alter the color, font or size of the text except through the CSS outlined in this document. The <font> tag should not be used.

For headlines, use the <h2> tag.

For a situation that requires a larger headline, use <h1>. For smaller text, enclose in <small> tags.

Links

Link colors are assigned by the color-scheme CSS file (See below). Whenever possible, use a title attribute.

Color Schemes and Style Sheets

Each section of the web site has its own color scheme, which is controlled by style sheets. The default color scheme (blue) is defined in the standard style.css file. To change the scheme, include one of the five CSS files, outlined below, in the page header just after the style.css declaration. This will automatically set the color of the background, links, titles and sub-navigation.

Section	CSS file	Hex code	Sample	Link	class="shaded"
Home page, Top Navigation and Footer Navigation	(default)	#012A6C		Link
About MCC	purple.css	#914B82		Link
Academics	green.css	#6A8F30		Link
Student Services	red.css	#CF2526		Link
Employee Services	yellow.css	#E7B20E		Link
Community, Alumni & Friends	brown.css	#73440E		Link

Tables and Horizontal Rules

When creating tables, set the border to 0. border="0". If you would like a border, use the "style" element. Ex: for a border 1 pixel wide, use: style="border: 1px;".

To shade the background of a table cell, use <td class="shaded">. This will shade to the page's assigned color palette. If the color does not appear correctly, be sure you have included the proper css file in the header (ex: yellow.css).

To create a horizontal rule, use the <hr> tag. It will appear as a single-pixel gray line.

Images

Colored accent bar

The colored accent bar is coded into the HTML and should not be included as part of the image JPEG. The color will be automatically assigned in the page's corresponding color-scheme style sheet (ex: yellow.css) through the CSS declaration of class="color".

For accessibility purposes, use descriptive alt tags. For pixel.gif, use alt="spacer".

Directory Structure

Photos uploaded for content should be stored in the /images/content/ directory.

The home page and the pages linked to in the footer and top navigation are stored in the root directory.

All css files are stored in the root directory.

The remaining content is divided as follows:

Accessibility

The Mesa Community College Website has been developed in compliance with the World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG). However, it is your responsibility to ensure the content you are publishing meets these same standards. Use the Bobby tool to test your pages.

You may also read about Section 508 here:   http://www.section508.gov/

Before You Publish

Spell-check and manually proof-read your text.

Be carefully when pasting copy from sources like Microsoft Word. Some characters will not display properly, such as copyright symbols, emdashes and quotation marks.

Test your links.

Test in multiple browsers in both Windows and Mac.

CSS Index

Your web support staff includes:

• Jon Baney, Web Manager 480-461-7283
• Trisha Brazda, Web Technician 480-461-7491
• Peter Kalapuziak, Web Programmer 480-461-7056]
• Bonny Smith, Web Technician, WSS [1/2 time]