Cascading Style Sheets (CSS) Guidelines

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colours, spacing) to web documents.

All Manitoba government templates must incorporate the government style sheet into their site while ensuring that pages are usable without the style sheet. The government of Manitoba style sheet follows W3C CSS standards. This style sheet also lets the users view their pages in either large, medium or small font. See the Accessibility, Usability and Access Key guidelines for specific information on accessibility.

There are several CSS files used in this template to manage various layouts and custom styles.

Usage:
In the “_resources” folder:
common.css - This CSS file sets the layout of the page.
print.css - This CSS file sets the printer friendly web page. It is loaded automatically from within the functions.js file.
screen.css - default layout currently blank, and not used. Some functions call this file if print.css is not selected. It is loaded automatically from within the functions.js file.
sIFR-screen/print.css – Inman Flash Replacement CSS. It is loaded automatically from within the functions.js file.
hide.css – this style sheet is used to hide the side menu for display purposes. It is loaded automatically from within the functions.js file.

Outside the “_resources” folder:
format.css – This CSS file can be modified to accommodate custom styles that departments may need to add. This CSS is located at the site level.

NOTE: older versions of the government of Manitoba standard style sheet must be updated as pages are revisited. There are changes in the new style sheets that will affect the formatting of pages.

Heading and titles must be used with the proper coding.

Fonts from different families in the same style of face (ex: serif and sans serif) should not be used on the same screen under any circumstances.

Avoid using all capital letters. Words set in all capitals use up to 30 per cent more space for letters and slow reading speed by 12 per cent.

A popular technique that search engines and accessibility software use to score relevance of content on a webpage is by looking at the heading tag. Headings are in larger print, and are considered the most important content on your page since they contain the topic of the page, or offer a summary of the content on the page. Headings come in various sizes represented by the HTML tags <H1>, <H2>, <H3> and so on, where <H1> is larger than <H2>. Your most important keywords should be placed in the biggest heading tags, as they will be granted more importance than keywords in the body text.

Contact standards@gov.mb.ca for more help in creating a style sheet.