Skip to content

Using Cascading Style Sheets

The Web Team 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 Link to external website 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 cannot find what you're after in the Pattern Library and require additional styling for web content, you should either submit a design/pattern request or consult with the Web Team and request customisation of the site <head.html> and <style.css>.

View the pattern library for the full range of styles available and different pattern options. The pattern library allows you to view the source code so that you can copy/paste but also so that advanced users can get familiar with the classes used. For further information concerning CSS visit W3C Schools Link to external website.

return to top

Applying Styles to HTML

To apply the styles in a HTML page, you'll need to refer to the Pattern Library. Here you can copy or view the source of each pattern.

If you're familiar with (or not scared to edit the HTML) use the class attribute. First open the webpage in the text editing area of your HTML editor (click the 'HTML' icon if you're using TMS and tick the 'word wrap' checkbox). 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="button">Visit Some File</a>

 

Web Team

Call us: For urgent requests or to speak with someone directly,
please contact one of our team members.
 
Not sure how to do something? Take a look at our FAQs.