Review: CSS Stylings - the core syntax of CSS are reviewed here
Feature: How well does CSS separate Presentation/Styling from Content

In our first CSS tutorial the simplicity and power of formating with CSS was explained. And in fact, easy editing has caused CSS to become the killer styling method for an obvious reason - efficiency. For example, say the word comes down from on high that on your websites the font color color has to be blue and the font size has to be increased .This means that if you have used "font=" and "color=" coding in your HTML tags, dozens of entries over many files have to be edited. But if a CSS stylesheet has been used, then changes are made in only one CSS file - and voila all the CSS stylings are changed across all of your web pages. This "one file to change" approach to the always changing formating of Web pages is much simpler than any other method of keeping HTML tags and options.

So for example, this one line in a CSS file:
.serifBigBold   { font-family: Georgia, Times, serif; font-size: 11px; font-weight: bold; color: black; }
changes to this:
.serifBigBold   { font-family: Georgia, Times, serif; font-size: 14px; font-weight: bold; color:blue; }
and wherever the CSS .serifBigBold has been used then literally up to hundreds of changes are done. This is an order of magnitude better efficiency that Web developers can ill afford to ignore. This efficiency along with the widespread adoption of CSS by application tools like Adobe Cold Fusion and Oracle JDeveloper, provides compelling reasons to adopt CSS.

But here is another way to look at CSS. Use of a CSS style like .serifBigBold does four things:
1) it becomes a Web developer's personal styling code or class which s/he can use over and over by means of the attribute, class="serifBigBold", being added to most any HTML tag;
2)it allows styling to be stored in one or a very few .css styling files;
3)it promotes reuse of a set of standardized styles and formatting for a website;
4)it makes changes to styling much easier (one place, one style statement) .
This provides the compelling case for usage of CSS. It is interesting that ActionScript, ASP, JSP, JSF, Java, JavaScript and many other Web languages have adopted CSS as the styling language of choice.

Why Not CSS ?

"Okay you have made your point, so why has CSS not taken off from the very start of Web development?" Four factors have delayed the widespread adoption of CSS. First, HTML with its extra styling tags got their first, and so many Web developers learned and used them first and were reluctant to make the changeover. As we shall see below, CSS syntax, though simple is very different from HTML - and so there is a learning curve. Second, one major player, Microsoft, has thwarted CSS development by failing to implement it completely in its IE browser and other development software. In 1997 and 1998 when IE was starting to overtake Netscape, Microsoft promised to fully implement CSS and other W3C standards. Over ten years later, IE7 and Microsoft's implementation of CSS are still the ones furthest from the CSS standards(and this is not isolated, Microsoft is also remiss on DOM rationalization, SVG and XForms support, retention of proprietary JavaScript extensions while failing to adopt new standards like E4X and JavaScript. So CSS has had to endure a hostile attitude from the major browser vendor.

Third, CSS does compete with other W3C Web Styling standards such as XSLT, XSL, XSL:FO and others. Overtime, even these standards have started to incorporate more CSS-like syntax - but the differences are still notable. Fourth and last but not least, many Web developers have mixed notions on how CSS works. This confusion has been built up by the fact that the IE browser (and its many derivatives)do not implement CSS fully. So devlopers view their CSS as not working where as it is working just fine except for deficiencies in the Microsoft browser. So for these cultural, IT and economic reasons, CSS has taken ten years to "take off".

Web 2.0 to the Rescue

But with the adoption of Web 2.0 technologies like AJAX, Flash, and Web Services (all of which use CSS), there can be no doubt that CSS has come of age. Also Microsoft is relenting somewhat on its thwarting of CSS standards. For example, IE7 came closer to fully implementing CSS. But after being ebullient and gregarious about IE7 and its CSS compliance(it was the headliner at Microsoft's big Mix06 conference), Redmond has fallen completely silent about IE8 and any of its compliance with standards. This is not a good sign.

And as previously noted, many programming tools like JDeveloper and NetBeans as Java IDEs, PHP, JavaScript, ActionScript/Flash , Cold Fusion among others take advantage of CSS and programmatic changes to it to offer dynamic styling options to Web developers. Finally, Web development tools like Dreamweaver CS3, PHP Designer 2007, Oracle JDeveloper, Eclipse, NetBeans, and many other tools support CSS with editing, code completions, and wizard tools. So CSS has arrived and now this tutorial will summarize its core syntax elements.

CSS Basic Syntax


.CSS files are filled with styling statements like this. The Selector detrmines the name and where the style can be applied. The Declaration Block is contained between the curly braces - it contains all the styling Properties. As you can see, a ruling can have more than one property and if so they are separated by semi-colons. Here are some styles from the osstyle.css used to format theOpenSourcery.com files:

All of 3 of these styles have been used just above or below. .underbold is used at the beginning of this paragraph, .indent is used to create the purple box above, and .gogreen is used to highlight the comments below. It is important to note that in CSS there is no programming: no if-then constructs, no looping nor other programmatic statements. The only other legitimate CSS statement is a comment like so:
/* Here is a valid CSS comment and then a CSS statement - the comment may continue onto many lines until matched by a closing=> */
.serifBigBold   { font-family: Georgia, Times, serif;   font-size: 18px;   font-weight: bold;   color: white; }
/* Selector      Declaration with 4 property:value(s) pairs                                                            */  
Of course, the green background above is just my own .gogreen CSS styling - and is nota part of a CSS comment. So with this you see the essential simplicity of CSS. One basic statement type with two elements. First, there is a Selector that determines where and to what the styling rule will apply - this is also called targetting the style. Second, there is a Declaration Block with a series of property:value pairs that specify what and how the styling is to be done. That's all Folks! You are done for CSS syntax.

Okay, so I stretched the truth. As mentioned in the first tutorial, there are a series of Cascading set of rules that determine which CSS statement or property takes precedence if more than one can apply to a specific HTML tag (much more on this later). But before considering any styling rules, lets consider two other CSS Basics: a)what can be styled and b)the 3 ways CSS is used in HTML. These will be the topics of our next tutorial More Core CSS Syntax.

Summary

As can be seen, CSS is ratjher simple and elegant - its has very simple syntax, no programming although it can be used in programs within such languages as JavaScript or ActionScript. The rela power of CSS is learning how to assign style rules to specific textor other Web elements using the Selector for targeting. Then to create the style, specify one or more formating properties to get the exact look and feel you want. Finally we demo-ed some live CSS used in this tutorial. the next tutorial will explore when and where CSS is used most often.