Using style sheets

What is a style sheet?

A style sheet is used to apply a formatting style for a block of text. It has the advantage that several HTML tags such as BOLD and FONT can be combined to form a single style, called an HTML style. The style can be saved to be used again to apply the same formatting to other blocks of text within the webpage. This saves time and makes it easier to create webpages that have a consistent style. HTML styles are supported by all browsers, and you can update pages through a browser.

Why use style sheets?

Style sheets make webpages easier to maintain and the pages themselves will look more consistent. This consistency in the University’s web presence is significant in projecting the University as a unified entity comprising many parts rather than a collection of disparate elements.

Style sheets are an important way of separating the actual content of a webpage from the appearance of the content. This allows the content of a webpage to be updated without affecting the appearance of the appearance and vice versa.

The Online Media Unit has done extensive work on a set of global stylesheets that ensure that web content looks consistent across different browsers and platforms. A special javascript chooser in the header of each file is used to detect the browser and platform requesting each page and provides the appropriate stylesheet to display the page. These global stylesheets have a range of standard headings and styles available for use within webpages.

The table below shows the globally defined styles available for use in University webpages created using the University web templates:

Style Name	Used For	Example
subhead	Sub Headings	Web Information & Standards Guide
footer	Page Footers	Web Information & Standards Guide
caption	Captions	Web Information & Standards Guide
breadcrumb	Bread crumbs	Web Guide > How-to Guides > Style Sheet Usage
secnav	Secondary Navigation (normal)	Web Information & Standards Guide
secnav2	Secondary Navigation (small)	Web Information & Standards Guide
secnav3	Secondary Navigation (v. small)	Web Information & Standards Guide

Applying these styles to HTML

To apply the styles in a HTML page, use the class attribute. First open the webpage in the text editing area of your HTML editor. In the HTML tag of the text you want to format, use the class attribute with the appropriate style from the table above. For example:

<a href="some_file.html" class="secnav">Visit Some File</a>
<p class="footer">
<td class="caption">Here is a caption</td>

Develop your site

© 2006 The University of Adelaide Last Modified 28/06/2006 M&C CRICOS Provider Number 00123M	Copyright | Privacy | Disclaimer