CSS Stylesheets and the Uses of Styles



			Dos and Don'ts


			Do: Apply CSS styles to control text appearance Don't: Use HTML <font></font> font controls Do: Use bold, italic and bold italic for emphasis Don't: Use too many variations in text size, emphasis and/or color, which makes pages look busy and amateurish Caution: Colors not specified by the design, should be used sparingly, if at all

Cascading Style Sheets (CSS) are bits of code understood by the browser and used to interpret the display of text. Here is the primary stylesheet for the school:

/Templates/som_stylesheet.css

Standard HTML markup

Ensures proper display across browsers and enhances accessibility. Use for headlines and body text, i.e.
Headline 1 <H1>,
Headline 2 <H2>,
Headline 3 <H3>,
Paragraph <P>
etc.

Avoid setting HTML font face, size or color and clear any HTML formatting from content imported from older sites or Microsoft Office documents.

<H1> Headline

<H2> Headline

<H3> Headline

<H4> Headline

<H5> Headline

<H6> Headline

<p> Paragraphs look
like this - 14px sans-serif.
Bold, italic and bold italic
can also be applied.

Regular (body section)
links look like this...
Bold, italic and bold italic
can also be applied.

Special Classes

In addition to the native HTML formats, any text can have "special class" styles applied to them. These classes will generally take over all the specified text attributes, whether the text is a paragraph or a headline. Examples:

This is a headline. See how small text overrides the headline style. You can also introduce sans-serif text into an otherwise serif headline.

This is a paragraph of body text. In it you can see the application of a number of special class styles, from large text to small text. You can also have serif text within a sans-serif paragraph.

Names of Special Classes

Special style classes have names that are descriptive of their function, such as link_nounderline, link_nounderline, link_nounderline, BreadCrumbs, text_leadinheadline , text_caption, text_leadinheadline (for beginnings of paragraphs), text_bodysmall and text_bodytiny.

For details and samples of various classes, please see the following pages:

Navigation and Links
Headlines
Body Text Format
Tables and Lists

Be cautious about over-use of text effects. Most of your text should be a <H>tag headlines or <P>paragraphs. You can be creative, applying highlights and effects sparingly. Too much variation in text size, color and font can make pages look busy and amateurish.

Previous | Home | Next