Review: CSS - Cascading Style Sheets role in Web and general IT development
Feature: Why and how Cascading Style Sheet have become so popular

CSS - Cascading Style Sheets are important because they have become the scripting language of choice for styling most pages used in IT. Notice that I said pages in general not just Web pages where CSS is most often used. This is because major development apps like Adobe with Flash, PDF and Flex; JavaScript with the DOM which allows dynamic manipulation of styles/formatting using CSS (see basic how-to here); Sun with its Java plus JavaFx; and Microsoft in various of its development tools are all using CSS for styling and formatting So CSS now extends well beyond usage for HTML pages.

And why not ? CSS is designed to do one thing very well; format and style pages. CSS overlaps some HTML tags that are already used for styling purposes - think of such tags as <b>, <strong>, <em>, <font>, and about a dozen others. This overlapping use of HTML tags can cause confusion between formatting + styling and content in HTML. The argument can be made that stylings such as <b> - bolding, <em> - italics, <font> - font settings, etc should not be a part of HTML tag system which should concentrate on the structure (<frame>, <form>, <table>, <ul>, etc) and the content (<p>, <img>, <object>, <blockquote>, etc). So this is the first compelling reason not to mix presentation styling with HTML layout and content tags - the confusion of structure, content and styling tags.

A second reason is simplicity, CSS styles are much more effective than HTML tags. Here is why. Styling tags, like <font>, <color>, and <size>, which tend to occur much more frequently and be much longer than other HTML tags, can overrun and overwhelm an HTML file making it hard to understand and edit. For example here is the HTML the code found in a recent article on the French team at the Euro2008 tournament:
<p align="center"> <font face="Georgia, Times, serif" size="+3" color="red" style="font-weight:bold">In Euro2008, the French were red faced when they picked up a red card to score in the half, <font face="Georgia, Times, serif" size="+3" color="white" style="font-weight:bold"> white with dismay when Riberry went down <font face="Georgia, Times, serif" size="+3" color="blue" style="font-weight:bold">and finally blue when deRossi scored the second goal for Italy midway thru the second half.</p>The above HTML produces the lines below. Nice, but let me assure you,the code above is difficult to maintain.

In Euro2008, the French were red faced when they picked up a red card in the first half, white with dismay when Riberry went down, and finally blue when de Rossi scored the second goal for Italy midway thru the second half.

Finally, there is another very compelling reason for use of CSS - simple efficiency. HTML files with presentation code embedded in them are not only huge but also unwieldy and time consuming to edit. Instead of dozens of variations on this:
<font face="Georgia, Times, serif" size="+6" color="#FFFFFF" style="font-weight:bold">use this:
<p class="serifBigBold"> Not only is it shorter but CSS has one more killer ingredient, it is very reusable. Thus CSS styling rules can be collected into one separate file (of filetype .css) and then linked or attached to several HTML pages, just like JavaScript files (.js files). So then the same styling rules can be used over again for dozens if not hundreds of web pages that are all going to have the same basic stylings. These reusable CSS stylesheets (sometimes called template) are what really make CSS so effective. But there is one more Cascading advantage.

The Cascading Advantage

With this CSS file setup, users go to one or more .css files to make changes that will be applied sitewide. This again, speaks to efficiency. For example one website I worked on had 3 standalone .css stylesheet files. One for tables and reports, a second for forms and letters, and a third for the basic layout. All web pages linked to the basic layout .css file and then some pages added one or both of the other .css files depending on their purpose. This had the big advantage that if any changes to reports and tables had to be made for example, one .css file was edited and immediately all web pages reflected those changes. Big savings in time

But some web pages have their own specific styling rules that sometimes have to override the sitewide rules. So one method to do this is to add to the <style> block in the <head> section of that web page specific rules that replaced the sitewide rules. This depends on the cascading nature of CSS rules. Think of the Cascading rules as saying if two or more CSS rules could apply to a styling, CSS uses the one "closer" to the application of the CSS rule. Take this one step further the <style> CSS rules can be overridden by a style="" rule embedded in a specific HTML tag ( for example <p style="background_color: green"> cause the background of this paragraph alone to become green). So users have 3 basic CSS syntax choices:
1)put the CSS in one or more separate .css files which then can be used to style one or more pages sitewide;
2)put the CSS in a <style> block at the top of a HTML page in the <head> section. All of these styles will apply to that page(but that page alone)and will make it easier to understand and maintain the file;
3)put the CSS style rules in the individual HTML tags using a style=".. " option. This is the most specific use of styling and is very much like the HTML styling tags like font=".. ".

With this simple and elegant system CSS provides Web designers with very powerful rules for formatting their Web pages. However, I have saved the CSS kicker for last. It is possible using JavaScript + DOM to add or change CSS styling dynamically - depending on what the user is doing. This was one of the programming advantages mentioned at the start of this So for example, if the user hovers over or clicks a row in a table, the Web designer can have the font size increase to make that row of data easier to read!

Summary

So CSS has gone to the head of the styling class over rivals like XSS and other styling scripts for several reasons.
1)It is elegant and simple in design;
2)It allows short, but descriptive naming of styles which can then be reused;
3)It allows for cascading rules starting from sitewide linked files down to <tag> specific stylings;
4)It promotes separation of formatting and presentation from the contents and structure;
4)It can be scripted using JavaScript in HTML or ActionScript in Flash files and other app tools for dynamic formatting of content.
The result is that CSS is one of the key success factors of DHTML=JavaScript+CSS+DOM in Web 2.0 development. But as noted CSS has now been applied in other application development tools from Adobe, IBM, Microsoft, Sun and others. So if you are going to do Web development, you are going to be using CSS all of the time. So come on board and learn the basics of CSS in the next 10-12 tutorials.

And remember if you want to see the underlying CSS used on these tutorial pages do one of three things:
1)Choose the menus command View | Page Source and all of the HTML tag formatting and the CSS Web page styles (also known as internal styles) plus inline CSS styles (the style= setting inside an HTML tag will be revealed. However, the external web styles contained in this sites linked CSS file, osstyle.css, require the second step;
2)Download and save the Web Page (be sure to use the Web page, Complete option in Firefox and IE, HTML file with Images option in Opera, and HTML Files in Safari)This will download the osstyle.css file which is theOpenSourcery.com's sitewide CSS stylesheet.
3)Use the Firebug extension in Firefox and it will reveal all the CSS styling plus JavaScript coding, DOM settings - it is a masterpiece of debugging tool for any Web 2.0 or CSS application. This is the best Web debugging tool by far. Finally, the best way to learn CSS is to see how good CSS is done - visit a site like CSSZenGarden and follow the clever CSS stylings used there to pick up ideas for your own Web coding.