What
CSS, or Cascading Style Sheets, is a standard developed by the W3C promoting the separation of content from formatting. It is part of their effort to create technological standards that promote Interoperability, Evolution, and Decentralization. They operate by allowing text in a XML compliant document to be formatted, since XML is intended for documents with logically structured data, not as an user interface system.
There are 3 consecutive versions, called levels, of CSS: 1, 2, and 3, respectively. CSS 1 was implemented partially (and badly) by both Netscape Navigator 4 and IE 5. CSS 2 is currently standard, with certain features of CSS 3 already supported in IE 6, though the standard was still in flux at the time of this writing.
Why
It makes web programming so much easier. Also, the separation of content from form is important in order to allow certain things that those who design the web, chiefly the W3C wants from the Web, elegance and ease of use. Each of these goals is laudable in and of themselves, but they also help the rest of the Internet and it's users. Firstly, a display system like CSS saves a huge amount of space, when programmed correctly. Secondly, it allows form changes and content changes to be made easily and separately. I can change the way my data displays without changing my data, or even skinnable displays, like right here on E2. (A really neat example of this was Chris Casciano's project changing the CSS stylesheet, but not the actual page, to a different design each day for a month, though he only ended up doing 19 designs. The project can be found at http://placenamehere.com/neuralustmirror/200202/fun.php) A better one, even, is the CSS Zen Garden, at http://www.csszengarden.com/
Another advantage is that it's pretty standardized, and works well basically on all browsers being used today (with the notable exception of those .6% who sill use Netscape 3 and 4.) This eliminates one of the biggest hassles with Web Design: browser-proof design, AKA getting the page to look decent in Netscape, IE, and Opera. As XHTML, XML, and CSS develop, they are supposed to be usable on hand-held, graphics-less devices, and even text-to-speech devices for the visually impaired (or those who want email by telephone.)
Until now, I have focused on benefits for the viewer and the programmer. CSS, however, benefits the Internet as a whole. Imagine that a search engine wants to find a page containing information on Joey Tribiani. It would be wonderful if everyone would just use plain text to write their pages, but they don't, so it's difficult to know, if Google finds a page containing those words, to know that the page referenced is a frame in another site.
How
CSS allows all of this, essentially, by telling a computers (specifically a
Web Browser like
Internet Explorer,
Opera, or even
Lynx) how to display a document, separate from the document itself. It allows a designer to identify sections of documents in various ways, then to format them. For example, if I had a list of my CD's, in an XML-like format (or another
data format, which could be converted,) and I wanted to display my list them on the
Web, I could write a new standard
HTML document, or I could add a simple tag to my XML document, and write a style sheet.
For instance, my CD collection is stored as follows: (Shamelessly stolen straight from www.w3schools.com tutorial on XML)
<?xml version="1.0" encoding="ISO-8859-1" ?>
- <!-- Edited with XML Spy v4.2
-->
- <CATALOG>
- <CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
- <CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
etc.
I can re-write this in html, or I can write a CSS file to diplay this, as follow;
CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE,AUTHOR
{
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
}
And it will display very nicely. (You can try this manually, or just check out http://www.w3schools.com/xml/cd_catalog_with_css.xml)
The Differences between CSS 1, 2, and 3
In CSS 1, which was officially recommended by the W3C Dec 1996, there were essentially all of the ideas that the W3C felt were needed in CSS; A method of selecting which parts of the document ot apply styles to, A method of placing those elements on the page, and various color, text formatting, and link display features (including, notably, mouseovers.)
CSS 2, finalized Nov 1997, included as design goals, complete device independance, and network performance, 2 notable extensions. The practical upshoot was, most importantly, absolute positioning (for instance, 20 pixels from the top of the page,) but also a new processing model, an extension of the box model of displaying text, audio feature supports, and a lot of neat new font and layering effects. These all gained acceptance only after IE 5 and 6 gained widespread acceptance, and Netscape Navigator 7 was released. Revision 1 to CSS 2 was released Aug 2002, to formally document features that were already accepted, and to correct an error regarding absolute positioning and the clip property.
CSS 3, which will implement new selectors (to pick where a style applies,) fancier borders and backgrounds, and vertical text, will be finalized Nov 2004. The most important feature of this recommendation is one that will not really be seen by users; the recommendation will be compartmentalized, so that the updated recommendations for each different feature set will come independently from now on. This means more newer features in the areas that people want most, which is good.
Sources:
www.w3c.org
www.w3schools.com