Website Styleguide

To retain a consistent and clear presentation of information throughout the Mesa Community College web site, please refer to this style guide before publishing your online content. This site was designed within the guidelines outlined in the Mesa Community College branding workshop.

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.

See the CSS Index section below for specifics.

Links

Link colors are assigned by the color-scheme within the main.css. Whenever possible, use a title attribute as in this example:
<a href="directions.html" title="Campus map, directions, and parking information">

Color Schemes and Stylesheets

Each section of the website has its own color scheme, which is controlled by the main stylesheet. The default color scheme (blue) is defined in the main.css file. This automatically sets 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	#914B82		Link
Academics	green	#6A8F30		Link
Student Services	red	#CF2526		Link
Employee Resources	yellow	#E7B20E		Link
Community, Alumni & Friends	brown	#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: main.css).

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

Images

Width (fixed) Height (recommended)   Width (fixed) Height (recommended) Home Page photos 87px x 130px Revised N/A x N/A Internal Page photos 100px x 200px Revised 150px x 250px

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.
<img src="images/nameofimage.jpg" height="200" width="100" alt="Students studying in the Library" >  For pixel.gif, use alt="spacer".

Directory Structure

Photos uploaded for content should be stored in the /images/ 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:

About MCC	/about/
Academic Departments	/departments/
Degrees & Programs	/programs/
Student Services	/students/
Employee Resources & Services	/employees/
Community, Alumni & Friends	/community/

Accessibility

The Mesa Community College Website has been developed in compliance with the World Wide Web Consortium's Web Accessibility Initiative (WAI). However, it is your responsibility to ensure the content you are publishing meets these same standards.

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

<h1>	Large Department Name
<h1 class="smaller">	Smaller Department Name
<h2>	Standard Headline (used for page titles)
<h3>	Sub-headline (used to separate sections with headings)
<p>	Normal text
<strong><p>	Bolded text
<small>	Small text
class="shaded"	Shaded background
class="color"	Main accent color