Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

Essentially, CSS is the preferred way of styling HTML elements. That includes colors, fonts, positioning and other. CSS is the preferred way for setting the look and feel of a website. 

HTML was not originally designed to handle the presentation of web pages, just the structure of hypertext documents.

Prime examples would be the <font> tag, the color attribute and the annoying <blink> tag. None of these are supported in current XHTML specs.

The consequences and legacy of HTML 3.2 still haunt us now, we surf a web of pages that are bloated, display poorly, and in extreme cases are downright butt ugly.. Not to mention the fact that the majority of pages that are written using this kind of code are an accessibility nightmare.

The basic idea behind CSS is to outsource the presentational elements of an HTML document, leaving us with neatly structured, semantically sound markup and content.

The cascading means that a style applied to a parent element will also apply to all children elements within the parent. For example, setting the colour of body text will mean all headings and paragraphs within the body will also be the same colour.

This allows the document to be shown on a wider variety of devices and media and gives people with special requirements such as the blind or physically handicapped greater control over how they interact with the vast amount of information available on the net that most of us take for granted.

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed.

Why use Cascading Style Sheets?

• The decreased amount of code allows for faster downloads.
• The decreased amount of code allows search engines to easily access the true content of a page.
• CSS-based design is easier to modify than table-based design.
• By editing a single CSS file, you can make sitewide design changes in seconds.
• CSS lets you output to multiple formats quickly.
• CSS lets you use logical names for page elements. You can, for example, give a DIV the name "header", or a H1 the class "headline". It's self-describing.
• External CSS files are cached by browsers, improving load time.
• CSS eliminates the need for messy code -- namely font tags, spacer gifs and nested tables. This improves load time and makes developers' lives easier.
• CSS lets you do things normal HTML doesn't. Examples: better font control, absolute positioning, nifty borders.
• Practical use of CSS encourages proper HTML structure, which will improve accessibility and search engine placement.
• CSS's :hover Pseudo Class cuts down on the need to use Java Script onmouseover calls.