complete css guide
<< introduction | why use css? >>
css introduction
Where do style sheets come from?
More than a decade before the world wide web, pioneers in the field of electronic documentation recognized the important distinction between what a document looks like (often referred to as its appearance) and the underlying structure of the document. Complex electronic publishing systems have since then been implemented in a way which separates information about how the document should appear from the document itself. When it was first imagined by Tim Berners-Lee, the web did provide a mechanism for this. But in the heated rush of the web's early explosion other, in some ways easier, but also problematic ways of coding page appearance took off. Among these were the <font> and <b> elements and other stylistic, or presentational HTML elements.
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 this introduction, how to do it, why it's good to do it, and why it's not so good to keep using the old ways.
The W3C
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 Microsoft, Netscape and Macromedia, and experts in many web related fields. Founded by Tim Berners-Lee, 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.
A history of CSS specifications
The W3C has published two major CSS recommendations: CSS 1 and CSS 2. As mentioned before, CSS 2 has now been updated to CSS 2, revision 1.
CSS 1 first became a recommendation in late 1996. Support for CSS 1 is extensive (if not complete) in Netscape 7, and acceptable in Internet Explorer, versions 4.5 for Macintosh and 5 and upwards for Windows. Opera 3.5 for Windows had very good support for CSS 1, and recent versions of this excellent browser have better support still.
CSS 2 became a recommendation in May of 1998. It extended CSS 1, so CSS 1 is a subset of CSS 2 with some very minor changes. Support for CSS 2 was almost nonexistent in Netscape Navigator 4.x, and very limited in Internet Explorer 4.5, 5 and 5.5 for Windows.
While browsers like Internet Explorer 6 and (more so) Netscape 7 and Opera 7 showed promising support for a lot of the basic aspects of CSS 2, it became obvious with time that some of its more complex (and perhaps even esoteric) features were unlikely to ever be implemented. For this reason, CSS 2, revision 1 was released in January 2003, with a number of the more high level aspects of CSS 2 now removed. It's possible that some of these features may find their way back into future iterations of the specification, but don't hold your breath waiting for the text-shadow property to reappear :-).
Developers often write to us expressing concerns about what features are in which version fo the specification. We're never sure what motivates this question, but our answer is always the same: it's quite simply not important from a development point of view. There is scant association between this and the level of browser support in older browsers, none at all in more recent. If you want to work with a property you have heard of the best thing to do is check to see if it is in this guide by looking for it in the contents, and then check its level of support in the browsers you are targetting.
The CSS Mobile Profile
The only specification for which you do need to be aware of what is and isn't included is the CSS Mobile Profile. We've included some information about this in this edition of the guide, in the Advanced CSS section.
Why doesn't everyone use CSS?
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 7 years (CSS was first supported by Internet Explorer 3 in late 1996) are developers only just starting to 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. In the early days, 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 true at all. 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 7 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.