Cascading Style Sheets

Cascading Style Sheets (commonly called CSS) are a mechanism for applying consistent layout, presentation and appearance to web documents. The basic point is that the presentation information should be divorced from the content and markup of the page. The separation of presentation from content allows these two aspects of a document to be edited separately; once divided, they can also be distributed and sourced separately.

Potentially, this allows authors to write content without concern over the presentation; 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. Also, 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. Finally, one CSS file could be applied to the presentation of a group of documents. In this way, style changes for individual pages can be made en masse.

As example of what this separation allows, in a RSS feed, the data is sent to the client, which then displays the content using its own CSS. This reduces the quantity of data that is required to be transmitted.

Details

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 as to save printer inks. Also, some print stylesheets select different font for printed copy to reflect research that has shown serif more legible for printed copy, and sans-serif more relaxing for screen print. 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.

In addition to preference levels of style sheets, browsers ([user agents]) apply different levels of precedence or "weight" to styles. Hence, the webmaster may specify that paragraphs are to be displayed in Georgia font, but that paragraphs in the "sidebar" are to be displayed in Verdana, but a paragraph whose id is "note" is to be displayed in "Comic Sans". All these, within an external style sheet, may be overwhelmed by a style rule within the <head>...</head> section of the XHTML file, if that style rule is marked as !important. Style precedence is detailed in Eric Meyer's classic, Cascading Style Sheets: The Definitive Guide.

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".

Helpful Tips

More sophisticated HTML editors, like Dreamweaver or Microsoft Expression Web, allow users to mouse-click onto page elements to view their CSS properties. This ability can be helpful to new CSS coders unsure of the rules applying to a particular element. As a form of code completion, these editors also offer users selectable options for CSS rules. Applicable rules can be chosen from a pre-populated list.

When using style sheets externally, it is often useful to use background images as opposed to image elements, i.e., elements inside the <img> tag. If the images appear on multiple pages, these background images can efficiently be modified using just the CSS.

See Also

• W3 Schools - CSS - comprehensive reference along with an introductory tutorial and examples that can be edited and tested online.