Web Services

Web Services Internal Development Standards

Styles

All textual formatting (aside from bold and italics) should be done using styles. Font tags should never be used. To make using styles easier, most commonly used HTML elements (such as <p>, <h1>, etc.) have predefined styles (see below). Use these elements as the basis for all of your formatting. Avoid the temptation to format things the way you want them. Consistency is more important than personal taste.

All font sizes in the standard style sheets are based on pixels, rather than points, ems, or percentages. This introduces greater rendering consistency between browsers and platforms, though it is not resizable in Internet Explorer for Windows.

Central Style Sheet (styles.css)

All predefined styles Web Services uses are stored in a central style sheet at http://www.csuchico.edu/web/_styles/styles.css. Be sure to include a link to this file in all pages that you create. Template files already include a link to the standard style sheet.

Print Style Sheet (print.css)

In addition to the styles.css style sheet, which is used when viewing pages on screen, there is also a style sheet used specifically for print. This sheet is automatically accessed by the browser when the user prints the page. The primary difference in the print style sheet is that it does not print the page banner, left hand navigation menu or page footer, which are typically not desired in a print document. It also prints the text "Department Name - CSU, Chico" at the top of the page in order to clearly identify the source of the printed document.

Style Definitions

A complete list of styles with usage and examples follows.

Custom Style
Style Name
Properties
Redefined HTML Tags
Body body font: Arial; font color: #000000; margin: 0px; padding: 0px;
Headings h1 to h6 font: Georgia;
Heading 1 h1 font size: 20px; font-weight: lighter; color: #666; padding-top: 10px;
Heading 2 h2 font size: 18px: font-weight: lighter; color: #999; padding-top: 7px; margin-bottom: 10px;
Heading 3 h3 font size: 16px: font-weight: lighter; color: #555; padding-top: 5px; margin-bottom: 10px;
Heading 4 h4 font size: 14px: font-weight: normal; color: #777; margin-bottom: 10px;
Heading 5 h5 font size: 12px: font-weight: bold; color: #999; margin-top: 0px; margin-bottom: 0px; line-height: 15px;
Paragraph p font size: 11px; line-height: 16px; margin-top: 0px; margin-bottom: 10px;
Bold strong Use <strong> instead of <b>
Italics em Use <em> instead of <i>
Unvisited links a:link font color: #900; underline
Hover links a:hover font color: #666; underline
Visited links a:visited font color: #900; underline
Unordered list item li font-size: 11px;
     
Custom Styles
Breadcrumbs breadcrumbs font-size = 10px; text-align = left; right-margin = 5px
Fine print text fineprint font-size = 10px
Obsolete information obsolete font color: #999;
Important information important font color: #900; font weight: bold
Code examples code font: Courier New; font size: 12px
Footer footer font-size: 10px;
Skip skip font-size: 1px; color: #FFF;

Top