Styles

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
Bodybodyfont: Arial; font color: #000000; margin: 0px; padding: 0px;
Headingsh1 to h6font: Georgia;
Heading 1h1font size: 20px; font-weight: lighter; color: #666; padding-top: 10px;
Heading 2h2font size: 18px: font-weight: lighter; color: #999; padding-top: 7px; margin-bottom: 10px;
Heading 3h3font size: 16px: font-weight: lighter; color: #555; padding-top: 5px; margin-bottom: 10px;
Heading 4h4font size: 14px: font-weight: normal; color: #777; margin-bottom: 10px;
Heading 5h5font size: 12px: font-weight: bold; color: #999; margin-top: 0px; margin-bottom: 0px; line-height: 15px;
Paragraphpfont size: 11px; line-height: 16px; margin-top: 0px; margin-bottom: 10px;
BoldstrongUse <strong> instead of <b>
ItalicsemUse <em> instead of <i>
Unvisited linksa:linkfont color: #900; underline
Hover linksa:hoverfont color: #666; underline
Visited linksa:visitedfont color: #900; underline
Unordered list itemlifont-size: 11px;
   
Custom Styles
Breadcrumbsbreadcrumbsfont-size = 10px; text-align = left; right-margin = 5px
Fine print textfineprintfont-size = 10px
Obsolete informationobsoletefont color: #999;
Important informationimportantfont color: #900; font weight: bold
Code examplescodefont: Courier New; font size: 12px
Footerfooterfont-size: 10px;
Skipskipfont-size: 1px; color: #FFF;

Top