Stylesheets in the new web visual standard are more complex than the stylesheets in the previous visual standard but are easier to use, with less styles, greater accessibility and greater options for use before having to create your own styles.

The site developer kit comes with in-depth information on the stylesheets provided in the document stylesheet reference [PDF, 839KB]. Following is some general information on the stylesheets.

Key Points

• Stylesheets use percentage fonts allowing text to increase or shrink in size.
• Style colours have been carefully considered to cater for coloured impaired users.
• Stylesheets now use inheritance, so many styles are applied at the top level and everything under that inherits from above, e.g. Tables
• Stylesheets use H1-H5 as the main headings similar to Word, rather than PageTitleLevel1 used in the old web visual standard.
• All new styles should be put in custom.css.

Stylesheets

The new SDK comes with 4 stylesheets: common.css, custom.css, print.css and central.css. The first two stylesheets are located in your local site. The last two are located on the central server.

Common.css

The main style sheet in your local site is common.css. It is used for the majority of template styles and should not be edited because it will be overwritten when the templates are updated by other areas. An example of the styles in common.css can be found in the examples page of the SDK .

Custom.css

The custom.css is available for you to create any new styles that may be needed for your site that common.css does not cater for. Limited use of new styles is recommended to stay within the web visual standard.

Print.css

This stylesheet is located centrally and is used by all users who have the new SDK. It enables printer friendly versions of pages for printing using the level 2 template e.g.

Central.css

This style sheet is used for image cornering in tables and form style attributes and is linked from the central server only. Editing of this style sheet is not necessary.

You may see such class styles as cornertopright, cornertopleft, cornerbottomright, cornerbottomleft, these are referenced from the central.css. If you delete these styles from a table you will lose the rounded corner effects.

Back to Top