Cascading Style Sheet

In web development, a cascading style sheet or CSS is a computer language used to describe the presentation of document written in markup language (such as HTML or XHTML). It is most common in HTML and XHTML, but can also be applied to SVG, XUL and XML.

CSS is used by both the authors and readers (browsers) of web pages to define colors, fonts, layout, and other aspects of document presentation.

One of its main features is to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS), which improves content accessibility, provides more flexibility and control in the specification of presentational characteristics, and reduces complexity and repetition in the structural content.

By using cascading style sheets, the entire presentation of a website can be modified by simply altering one file, the external stylesheet or “.css” file.

• Saves time - any formatting changes made to the css file will cascade through all web pages using the relevant css classes. Thus HTML formatting changes need not be made on every webpage separately.
• Pages load faster - less code needs to be translated and thus allows for pages to load faster
• Easy maintenance - to change the style of an element only the css file needs editing
• Better styles than HTML - CSS has many more attributes than HTML.

This is a copy of the stylesheet used to render this page:

div.clearer {clear: both; line-height: 0; height: 0;}

div.error{
	background: #ff6666 url(../images/error.png) 0.5em 0px no-repeat;
	font-size: 90%;
	margin: 0px;
	padding-left: 3em;
}

div.info{
	background: #ffff66 url(../images/info.png) 0.5em 0px no-repeat;
	font-size: 90%;
	margin: 0;
	padding-left: 3em;
}

div.success{
	background: #66ff66 url(../images/thumbup.gif) 0.5em 0px no-repeat;
	font-size: 90%;
	margin: 0;
	padding-left: 3em;
}

/* syntax highlighting code */
.code .br0	{ color: #66cc66; }
.code .co1	{ color: #808080; font-style: italic; }
.code .co2	{ color: #808080; font-style: italic; }
.code .coMULTI	{ color: #808080; font-style: italic; }
.code .es0	{ color: #000099; font-weight: bold; }
.code .kw1	{ color: #b1b100; }
.code .kw2	{ color: #000000; font-weight: bold; }
.code .kw3	{ color: #000066; }
.code .kw4	{ color: #993333; }
.code .kw5	{ color: #0000ff; }
.code .me0	{ color: #006600; }
.code .nu0	{ color: #cc66cc; }
.code .re0	{ color: #0000ff; }
.code .re1	{ color: #0000ff; }
.code .re2	{ color: #0000ff; }
.code .re4	{ color: #009999; }
.code .sc0	{ color: #00bbdd; }
.code .sc1	{ color: #ddbb00; }
.code .sc2	{ color: #009900; }
.code .st0	{ color: #ff0000; }

• CSS Tips & Tricks
• Wikipedia's entry on CSS