Cascading Style Sheets

From Citizendium
Revision as of 09:49, 9 April 2007 by imported>Dustin Meany (Added usage.)
Jump to navigation Jump to search

Cascading Style Sheets (commonly called CSS) is a stylesheet language. CSS is usually used for web sites written in HTML or XHTML, but the design of a stylesheet allows CSS to be used on any markup language (most notably XML). CSS specifications and instructions for it's use were created by the World Wide Web Consortium (W3C).

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>