Cascading Style Sheets

Cascading Style Sheets contain rules for the presentation of text in web pages and can be used to control colours, fonts and the layout of HTML elements from which web pages are made.

CSS enable a web site's presentation to be separated from its content and structure.

Use StylePicker to create your own CSS and to visual demonstration the power of CSS.

( More infromation about CSS can be found in the resources directory.)

A Brief History

The Web was established in the scientific community where publishers are concerned primarily with the quality of their content and care little about the nature of its presentation. The first browsers reflected the needs of these initial users - web pages were presented solely in accordance with the structural definitions (structural HTML) of the page content - (eg. the formatting of the main title, sub titles, paragraphs etc. of every page was consistently the same).

The desire for groovy looking sites, and competition between the visual browsers changed everything:

• presentational HTML was introduced enabling the use of many different fonts and colours,
• structural HTML (eg. tables) began to be misused to create web versions of paper-based designs.
• images of text began to be used instead of the text itself.

While this is great for visual design it brought with it some major problems, especially the time pages took to download and accessibility problems for people with disabilities.

Now, with the growing Browser support for cascading style sheets, it's possible return to structural markup and control presentation using external style sheets. This means that websites can have thousands of pages all referring to a single style sheet that controls everything from the font to the layout.

Benefits of Using CSS

There are considerable advantages in using CSS to control the presentation of a website:

• Site maintenance - As all pages refer to a CSS for presentation information, their content may be updated readily, given a structural knowledge of an appropriate markup language. Also, by changing the CSS solely, you may radically change the presentation of a complete site.
• User specific presentation - The use of CSS allows you to present your content in a manner that serves the needs of your site users. For example, you can view this site using a range of different style sheets, including one which provides High Visibility, and one designed for Clear Printing.
• Download times - Without using CSS, all presentational information must be reproduced in each webpage. This increases the file size and consequently the download times of each webpage.
• Accessibility - Without a clear separation of a site's presentation from its content and structure, there is a tendency for structural markup to be used improperly for presentational effect. For example, a piece of text may be incorrectly marked up as being a title, in order to increase its font size. This makes it difficult to render a page intelligibly to other devices such as speech synthesis and Braille display.