
Web Services
Web Services Internal Development Standards
- Introduction
- Basic Standards
- Web Page Design Standards
- Accessibility
- HTML Standards
- Include Files
- Navigation Elements
- Styles
- Coding Standards (HTML/ASP/JavaScript)
- Browser Support
- Site Development Procedures
- Maintaining Sites with Dreamweaver
- Collage 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; |
