Use Of Cascading Style Sheets (CSS)

Background

This document reviews the importance of Cascading Style Sheets (CSS) and highlights the importance of ensuring that use of CSS complies with CSS standards.

Why Use CSS?

Use of CSS is the recommended way of defining how HTML pages are displayed. You should use HTML to define the basic structure (using elements such as <h1>, <p>, <li>, etc.) and CSS to define how these elements should appear (e.g. heading should be in bold Arial font, paragraphs should be indented, etc.).

This approach has several advantages:

Maintenance:: It is much easier to maintain the appearance of a Web site. If you use a single CSS file updating this file allows the Web site look-and-feel to be altered easily; in contrast use of HTML formatting elements would require every file to be updated to change the appearance.
Functionality:: CSS provides rich functionality, including defining the appearance of HTML pages when they are printed.
Accessibility:: Use of CSS provides much greater accessibility, allowing users with special needs to alter the appearance of a Web page to suit their requirements. CSS also allows Web pages to be more easily rendered by special devices, such as speaking browsers, PDAs, etc.

There are disadvantages to use of CSS. In particular legacy browsers such as Netscape 4 have difficulty in processing CSS. However, since such legacy browsers are now in a minority the biggest barrier to deployment of CSS is probably a lack of understand or inertia.

Approaches To Use Of CSS

There are a number of ways in which CSS can be deployed:

External CSS Files:: The best way to use CSS is to store the CSS data in an external file and link to this file using the <link> HTML element. This approach allows the CSS definitions to be used by every page on your Web site.
Internal CSS:: You can store CSS within a HTML by including it using the <style> element within the <head> section at the top of your HTML file. However this approach means the style definitions cannot be applied to other files. This approach is not normally recommended.
Inline CSS:: You can embed your CSS inline with HTML elements: for example <p style="font-color: red" > uses CSS to specify that text in the current paragraph is red. However this approach means that the style definitions cannot be applied to other paragraphs. This approach is discouraged.

Ensure That You Validate Your CSS

As with HTML, it is important that you validate your CSS to ensure that it complies with appropriate CSS standards. There are a number of approaches you can take:

Within your HTML editor:: Your HTML editing tool may allow you to create CSS. If it does, it may also have a CSS validator.
Within a dedicated CSS editor:: If you use a dedicated CSS editor, the tool may have a validator.
Using an external CSS validator:: You may wish to use an external CSS validator. This could be a tool installed locally or a Web-based tool such as those available at W3C [1] and the Web Design Group [2] .

Note that if you use external CSS files, you should also ensure that you check that the link to the file works.

Systematic CSS Validation

You should ensure that you have systematic procedures for validating your CSS. If, for example, you make use of internal or inline CSS you will need to validate the CSS whenever you create or edit an HTML file. If, however, you use a small number of external CSS files and never embed CSS in individual HTML files you need only validate your CSS when you create or update one of the external CSS files.

References

Validator CSS, W3C, <http://jigsaw.w3.org/css-validator/>
CSSCheck, WDG, <http://www.htmlhelp.com/tools/csscheck/>