Introduction to style sheets

The concept of style sheets first appeared in 1996 when the W3C published a new recommendation entitled "Cascading Style Sheets", or CSS for short.

The principle behind style sheets involves using a single document to store the page layout characteristics associated with groups of elements. All it entails is defining by name a set of page layout definitions and characteristics, and invoking those names to apply them to a piece of text. For example, you can set your section titles to all show up in Arial font, coloured green, in italics.

Style sheets were developed in order to compensate for the shortcomings of HTML when it comes to page layout and design. HTML does have a number of tags for modifying layouts and defining text styles, but every element has its own style, independent of the surrounding elements. Using style sheets, whenever the look of a site containing hundreds of web pages needs to be changed, all that is required is to edit the style sheet definitions in one place to change the appearance of the entire site!

They are called "Cascading Style Sheets" because you can define multiple sheets, and the styles can all be applied to the pages (with a predefined system for resolving conflicts).

Style sheets can be used:

• to achieve a uniform look throughout the site, by invoking a single style definition on every page;
• to change one aspect throughout a website just by editing a few lines;
• to make HTML code more readable, as styles are defined separately;
• to let pages load more quickly, since there is less HTML on each page;
• to position page elements in a more uniform manner.

CSS 2.0

Since 12 May 1998, the standard CSS 2.0 has been the standard in effect. CSS2 adds many new features to the preceding standard (1.0), including:

• Consideration for how a document will be rendered by different media (such as a screen, a printer, braille, voice synthesisers, etc.);
• Adding sound features for the blind and visually impaired;
• Manipulating cursors;
• Managing overflow and element visibility

Browser compatibility

Despite the W3C's recommendations, all browsers do not render style sheets the same way. The earliest browser to have integrated style sheets was Microsoft Internet Explorer 3.0, and the use of style sheets become more widespread with versions 4.0 and higher of Internet Explorer and Netscape Navigator.

Browsers which support style sheets:

• Microsoft Internet Explorer 3.0 (partially)
• Microsoft Internet Explorer 4.x
• Microsoft Internet Explorer 5.x
• Microsoft Internet Explorer 6.x
• Netscape Navigator 4.x
• Netscape Navigator 6.x
• Netscape Navigator 7.x
• Mozilla x.x
• Firefox x.x
• Opera 5.x
• Opera 6.x
• Opera 7.x
• Camino 0.8x
• Safari 1.xx

See also

The website ZenGarden shows the power of style sheets by allowing you to choose different styles to apply to the same content.

Last update on Thursday October 16, 2008 02:43:13 PM.This document entitled « CSS - Style sheets » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the licence, as this note appears clearly.