introduction to CSS
Where do style sheets come from?
Before the world wide web, pioneers in electronic documentation recognized the important distinction between what a document looks like ( its appearance) and the underlying structure of the document. Electronic publishing systems have been implemented in a way which separates information about how the document should appear from the document itself. When Tim Berners-Lee first imagined the web there was a mechanism for this. But in the heated rush of the web's early explosion, other, perhaps easier to implement but problematic ways of coding page appearance took off. Among these were the <font> and <b> elements and other stylistic, or presentational HTML elements. To this day, the majority of web developers implement web site appearance in this way, and most web tools, especially WYSIWYG web tools encourage the use of these devices.
In a nutshell, CSS provides a means for web authors to separate the appearance of web pages from the content of web pages. We'll be learning a lot more about this in the coming chapters, how to do it, why it's good to do it, and why it's not so good to keep using the old ways.
Cascading Style Sheets [CSS] is a recommendation of the World Wide Web Consortium (the W3C). The W3C is a consortium of web stakeholders: universities, companies such as Netscape Communications and Microsoft, and experts in many web related fields. Founded by Tim Berners-Lee (who can be said to have invented the web), it exists to enhance and promote the world wide web. One of its roles is to publish "recommendations". You can think of these W3C recommendations as a kind of standard. There are W3C recommendations covering diverse aspects of the web, from wireless content development to HTML 4.0 and XML.
The W3C has published two major CSS recommendations: CSS1 and CSS2.
CSS1 first became a recommendation in late 1996. Support for CSS1 is extensive (if not complete) in Netscape Navigator 6, and acceptable in Internet Explorer, versions 4.5 for Macintosh and 5 onwards for Windows. Opera 3.6 for Windows had very good support for CSS1, and recent versions of this excellent browser have better support still.
CSS2 became a recommendation in May of 1998. It extends CSS1, so CSS1 is a subset of CSS2 with some very minor changes. Support for CSS2 was almost nonexistent in Netscape Navigator 4.x, and very limited in Internet Explorer 4.5, 5 and 5.5 for Windows.
Internet Explorer 5 for Macintosh and 5 and 6 for Windows has quite a bit of support for CSS2, though falls quite a way short of full support.
Netscape 6, and Opera 5 both have quite substantial support for CSS2.
In this guide we cover all of CSS2, and provide compatibility information for all of CSS2 for the most widely used browsers.
Why doesn't everyone use them?
CSS offers web developers a powerful tool that helps simplify the complex task of maintaining web sites, and provides sophisticated layout and design features for web pages without the need for plugins, long download times and expensive tools.
Why, then, after more than 4 years (CSS was first supported by Internet Explorer 3 in late 1996) do so few web developers take advantage of this fabulous web standard?
There are several important answers to this question.
First, CSS only really works at all in Netscape Navigator 4.0x and 4.5 and Internet Explorer 3 (a little), 4, 4.5 and 5. Until recently, this was considered to be a real issue. Developers felt that they had to develop for all those users still using "pre-CSS" browsers, so they avoided style sheets altogether. As we all know, the percentage of web users who use the latest version of a browser is always increasing. So what was almost unused 6 months ago, is widely used today. If you have resisted using or learning style sheets because it is an experimental technology, keep in mind that depending on your site visitors, a sizable majority of web browsers in common use today support style sheets very well. It is no longer experimental.
Secondly, even though the major browsers have supported style sheets for some time, this support is admittedly less than perfect. Many web developers I talk with believe that support is hopelessly inadequate, but this isn't really true. In part, this is an excuse being used to avoid addressing a new technology. It was a valid reason a couple of years ago. Now, it's just an excuse.
What is true is that the process of trial and error which accompanies trying to make a style sheet work in all major browsers can be time consuming, and extremely frustrating. Again, though, as browsers like Internet Explorer 5 and 6 and Netscape Navigator 6 become more and more widely used, this becomes less and less of an issue.
One of the major reasons why we developed our CSS Editor Style Master was to help web developers address browser compatibility confusion. We also developed the Browser Compatibility Guide, to help those new to style sheets avoid many of the frustrating pitfalls of developing for inconsistent browser support. The information from this browser support guide is now incorporated into the paid version of this guide.
Thirdly, and very importantly, style sheets can be a little tricky to understand at first. Cascading style sheets work quite differently from the style sheets you might be familiar with, like those in word processors and page layout applications such as Quark Express and PageMaker. To address this third major hurdle, we have developed this Guide, a tutorial, self paced courses, and many other resources, all of which you can find at the House of Style.
This guide introduces the concepts and ideas associated with CSS. We also have a more hands-on CSS course which takes you through the process of developing an actual style sheet for a real web site. How you approach the learning process is up to you. If you prefer a hands-on approach, then start with the course, then return to the guide to fill in your knowledge, and to use as a reference. If you prefer to have a thorough understanding of something before you start using it, then use this guide first, then get into the hands-on side of things.
next: a href="key_ideas.html">why use CSS?
(C)1997-2001 Western Civilisation Pty. Ltd.