Cascading Style Sheets

Cascading Style Sheets (commonly called CSS) are a method for applying layout, presentation and appearance related settings to a web document. It is based on the concept that the presentation information should be separated form the content and markup of the page. When presentation information is inserted in line within content and markup of the documents source code, the code can become difficult for a human editor to read. The separation of presentation from content also allows these two aspects of a document to be distributed and sourced separately. One CSS file could be applied to the presentation of many documents. For example, in a RSS feed, the data is sent to the client which then displays the content using it's own CSS. This reduces the quantity of data that is required to be transmitted. The content and presentation, once separated, can then also be edited separately. Potentially, this allows authors to write content without concern over the presentation and likewise, a graphical artist can design the layout and general appearance of a document without concern over content, so long as the document is well formed and structured.

A style sheet consists of a selector combined with definition. The definition is a list of layout and presentation properties and their corresponding values. The selector defines what element or elements of the document those definitions will be applied to. In the event that multiple style sheets apply to the same property of one element, the rules of the cascade determines which property value is dominant and which become recessive. Sheets occurring later in the document have precedence over those occurring earlier.

CSS can be used to layout a wide variety of document types. It is widely used for web sites written in HTML or XHTML, but the design of a style sheet allows CSS to be used on any markup language (most notably XML). There are many proprietary and client specific properties that can be used in CSS but the core specifications and instructions for use are created, developed and maintained by the World Wide Web Consortium (W3C).

CSS allows an array of different style settings to be applied dependent on the media that is to display the document. For example, the font size and colors used on a computer screen display may be set to a different value from the size and colors used in a printed hard copy. This may take the form of setting a white background for the printed version so save printer inks. Other media types such as display on PDA, web TV and non visual user agents for visually impaired readers could all have their own presentation defined in the CSS of the document.

Although CSS separates content from layout and presentation, the CSS may or may not be physically in a separate file. Using a separate CSS file has the advantage of allowing one CSS file to apply to the layout of many documents. The user agent could cache the CSS file thus saving download time and bandwidth compared with resending the CSS data within the content file with each reload. Additionally, the user agent may apply its own CSS file to the presentation of the document, removing the requirement for the presentation data to be transmitted. However, putting the CSS into a separate file may result in page rendering problems as the layout information is delayed till after the content has been received. Such a delay may result in the slow render of the page as the client redraws on receipt of the delayed data.

CSS Levels and Implementations

There are 3 levels of CSS, each adding features onto the previous level.

CSS1

CSS level 1 was released on December 17, 1996 and modified in January 1999. It was written primarily by Håkon Wium Lie and Bert Bos. By the end of 2006, it has finally begun to see wide acceptance in web browsers, including Firefox and Internet Explorer 7. CSS1 is an official W3C recommendation.

CSS2

The most recent version of CSS2 was released on May 12, 1998. It was written by the authors of CSS1 and by Chris Lilley and Ian Jacobs. It extends CSS while adding guidelines for compatibility with nonstandard HTML renderers, including accessibility devices, mobile devices, and printers. CSS2 is an official W3C recommendation.

CSS 2.1 is designed to be a subset of CSS2 that represents the proportion of CSS commonly used and implemented. Many of the CSS2 features dropped by CSS 2.1 are scheduled for inclusion in CSS3. It is currently a Working Draft.

CSS3

CSS3 is a specification being designed by the W3C as a successor to CSS2. It is designed to be modularized to allow for easy updating.

Usage

For HTML/XHTML, CSS is defined in the style tag, and can be either defined as a file name or by the sytle(s) themselves, it doesn't matter. Typically, it is preferred to create a file and name it with the extension .css and edit it externally, as CSS files are cached by the web browser, which will save the entire website some bandwidth as the CSS file might grow to be very large.

Examples of both are below, considering you've started the <html> and <head> tags. The following would use the file "style.css" to apply styles on this XHTML page, on "screen" browsers.

<style type="text/css" media="screen">
	@import "style.css";
</style>

The following would just apply styles on this XHTML page, on "screen" browsers.

<style type="text/css" media="screen">
	body {
		margin: 0;
		background-color: #fff;
		color: #000;
	}
</style>

Another manner in which an external style sheet may be linked is to place, within the <head>...</head> section of the XHTML file, a statement such as:

<link rel="stylesheet" href="mystyle.css" />

...where "mystyle.css" provides the "relative" address of the stylesheet file.

This address may also, of course, may be specified as an absolute address, e.g., "http://www.domain.com/mystyle.css". For such an absolute address, many browsers will pick up element addresses within the stylesheet from the specified domain. For example: if the stylesheet is fetched from "http://www.domain.com" and if it specifies a background-image: url('myimage.gif'), then many browsers will fetch the image 'myimage.gif' from "http://www.domain.com".