headerphoto

Home » Support » Online Help » Web Standards » CSS Styles

CSS Styles

Cascading Style Sheets (CSS) is a web standard that enables the separation of the layout and styles of a web page (the 'presentation') from the data or information (the 'content'). Style details, such as font families, font sizes, margins, colors and positioning, can be specified in one place (the CSS style sheet), with the styles applying throughout a series of web pages or across the entire site.

As a very simple example, consider the following heading style:

This is a level 2 heading 

The style properties for this heading are specified in a single style sheet. If we wanted to change the appearance of level 2 headings across the site, we would only need to adjust the appropriate styles in this one file.

Why we develop sites using CSS 

This approach offers several key benefits:

  • Consistent appearance;
  • Ease of maintenance;
    and
  • More portable content.

Ad-hoc inline text formatting should be avoided

Excessive ad-hoc inline formatting of short sections of text (e.g., font color, size, family, etc.) results in messy and inconsistent pages that do not reflect the CSS styles configured by your web developer. To remove or change such formatting, each individual instance of formatting must be painstakingly edited. Sometimes, the only way to clean a page of such formatting is to edit the raw HTML code. For this reason, we discourage our clients from using the inline formatting options in the rich text editor (RTE) in the CMS. Instead, we recommend that a small set of common styles are developed and clients use these styles (selected from a drop-down list in the RTE) to change the appearance of content elements within their web pages.

Problems with MS Word or other sources of formatted text

Copying and pasting formatted content directly from a word processor, such as MS Word, or from any other source of 'rich' or formatted text (e.g., emails) is to be avoided. The reason? Undesirable behind-the-scenes formatting 'junk' is inadvertently copied across with the text, and this results in various problems, including CSS styles not working properly and, consequently, web pages not displaying correctly. In worst case circumstances, such content may even cause a user's web browser to crash.

We recommend instead that clients copy and paste plain text only into the RTE (using the "paste from Word" or "paste as plain text" functions) and then apply or insert the necessary formatting (headings, bullets, tables, etc.) using the functionality provided within the RTE. This will ensure that your website looks great, displays consistently, and works correctly when people view it in their browsers.

If you have an especially long document or excessively complex formatting then we recommend that you first convert the document to PDF format, and then make the PDF file available for download.