CSS has fundamentally changed web design, it has provided designers with a set of properties that can be tweaked to make various techniques to make your pages just look right.
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:
- 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;
- it allows styling to be stored in one or a very few .css styling files;
- it promotes reuse of a set of standardized styles and formatting for a website;
- 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.
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.