Market & Strategic Communications - University Web Guide

You are here:

text zoom : S | M | L

Further Enquiries

Online Media
Marketing & Strategic Communications
The University of Adelaide
SA 5005 Australia
Email

Telephone: +61 8 8303 7511
Facsimile: +61 8 8303 4829

Using Cascading Style Sheets

Online Media has done extensive work creating style sheets that ensure web content looks consistent across multiple pages, web browsers and computer platforms. By separating the presentation style of documents from the content of documents, Cascading Style Sheets simplify Web authoring, development and mark-up.

Explicit formatting can cause unexpected results, and so formatting options other than those listed should be avoided, that is, avoid using font tags to change the font used, the font size and the font colour. These extra font tags are incompatible with the University styles and will not be applied to the text when the page is displayed. They may also interfere with any heading styles applied to the text, causing the text to appear without any of the formatting applied.

The few examples below utilise class properties defined in the Uni global style sheet. If you require additional styling for web content, please consult with Online Media for customisation of the site <header.html> and <style.css>.

View the basic university style sheet for a list of classes and properties. For further information concerning CSS visit W3C Schools.

Suggested Table Colour Schemes

Table row/cell colour styles are available as 'classes' from the University style sheet. It is suggested that web maintainers use styles rather than embedding colours in content tables. These colour schemes are NOT intended to be used all at once, but rather as individual combinations to emphasise aspects of your tabular data. Table content should also incorporate 'headers' and preferably contain a 'table summary'.

Examples of table row/cell colour styles and the corresponding 'class' are displayed below.

<table class="light">

<th>	<th>	<th>
<th class="alt">		<th class="alt">
content	content	content
<td class="alt">
<td class="alt">	<td class="alt">	<td class="alt">
content	content	content
content	content	content

<table class="split">

<th>	<th>
<th class="alt">	<th class="alt">	<th class="alt">
content	content	content
<td class="alt">
<td class="alt">	<td class="alt">	<td class="alt">
content	content	content
content	content	content

Example Content Elements

div class="infohead"

Web Standards Guide

div class="megalink"

class = "news"
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.

table class="subhead"

Web Standards Guide

class = "caption"
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Applying 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.

For example:

<a href="some_file.html" class="news">Visit Some File</a> <table class="widget">Here is a caption</td>