complete css guide

Introduction

Download the Complete CSS Guide

The first four parts of this guide, including the all important sections on properties and selectors are available here for free as part of our collection of CSS resources, the House of Style. But we also have a downloadable version of the guide which you can purchase for just $24.99. As well as the convenience of having your own copy of this indispensable reference you get

up to date integrated browser support info including Internet Explorer 6, Netscape 7 and Opera 7

an extra section, Real World CSS, full of practical hints and tips for making CSS really work

Save

What is the Complete CSS Guide?

When Cascading Style Sheets were introduced in late 1996, they represented an exciting new opportunity. They enabled much more sophisticated page design (typography and layout) than web developers had been used to, and they helped manage the complex tasks of developing and maintaining sites, and keeping them up to date. They also greatly simplified the process of making web pages accessible to as many people as possible, regardless of the device they use to read a page, and regardless of any disability they might have.

Since then, much about the web has changed. It's hard to believe now but in late 1996, Netscape Navigator was the browser of choice for the majority of web users. Internet Explorer from Microsoft lagged far behind in terms of features, performance, and number of users. Web browsing was something you did on a PC or Mac. HTML was not a single standard which was well adhered to, but a tangle of competing versions, with proprietary extensions. The dotcom boom was still gaining momentum, and the bust was just a twinkle in the naysayers' eyes.

Now, Internet Explorer dominates the browser scene even more than Netscape did back then. Browsers are built into mobile phones and people browse from television based systems, even games consoles. HTML has become a widely adhered to standard, and lots of those old proprietary extensions have either gone the way of all flesh, or become part of the standard. And slowly, slowly, intransigence, reluctance and skepticism towards CSS is fading away. Cascading style sheets are becoming a solid, well supported and easy to use technology for creating the appearance of web pages.

Many (internet) years ago, we put together a quite straightforward guide to getting up to speed with CSS. In time it's grown to accommodate changes in our knowledge and in CSS itself. This single guide has grown into a whole website, the "House of Style", with articles, tutorials, reference materials and more.

But people still seem to get a lot of value out of this guide so yet again we've dusted it off and updated it to take into account what we've learned lately, some recent changes to CSS, and current levels of browser support. The third edition of the guide incorporated browser support details and added a section on real world issues. This fourth edition brings the guide inline with the W3C's January 2003 revision of the specification, CSS 2.1.

Hopefully, with all these amendments, additions and improvements, this guide will continue living up to its original name as "Everything you ever wanted to know about style".

What's new in CSS Level 2, revision 1?

CSS 2.1, as the name suggests, is only a revision of the specification. It does not include anything like the number of new features that were brought in with CSS 2. Rather it corrects a number of errors, and adds a few features that had already been widely implemented in the various user agents that support the standard. Most of all, it actually removes a number of features that were in CSS 2 but unlikely to be implemented in any user agents anytime in the near future. In the words of the specification itself then, it represents a "snapshot of CSS usage". From a developer's point of view, the important changes, which have been taken into account in this edition of the Complete CSS Guide, are

a new color value, orange, has been added

a new value for the display property, inline-block, has been added

a new value for the cursor property, progress, has been added

two new values for the white-space property, pre-wrap and pre-line have been added

the display property can no longer take the values compact or marker

the caption-side property can no longer take the values left or right

the border-collapse property now has a default value of separate

the content property can no longer take URL values

the following properties are not in the specification at all

size

marks

page

font-stretch

font-size-adjust

text-shadow

font descriptors and the @font-face declaration are no longer in the specification

Who is this guide for?

This guide is for anyone who wants to use CSS to develop their web sites. We assume you have a fair understanding of the process of web page development, either hand coding using HTML, or using a visual tool such as Dreamweaver MX, GoLive, FrontPage and so on. A good working knowledge of HTML at a code level will come in handy at times.

We don't assume you know anything about style sheets. Even if you do, I hope that this guide will fill in knowledge that you don't already have, or give you new ideas to further your development using style sheets. The sections Selectors, Properties and Advanced can largely be used as a reference for those of you who are up to speed with the basics of style sheets. They cover just about every aspect of the CSS 2.1 specification, translating it into explanations and ideas that humans can understand.

We've taken a conceptual approach, as I think this works well with style sheets, because they do involve a number of tricky concepts, such as cascading, inheritance, and selection. If you prefer to learn by example, try our self paced CSS course, then you might like to come back here to fill in the details.

What will we cover?

The guide divides into five sections. The first is introductory, and covers a lot of core ideas and concepts, without getting into too much of a practical nature. The second, third and fourth sections cover the actual features of CSS. The last section covers a number of important real world issues, such as building for compatibility, and ensuring accessibility of your pages using CSS. See the table of contents for full details.

How to use this guide

As outlined just above, the guide divides into five sections. The introduction is both for those new to style sheets, and for those with style sheets experience who want to flesh out their knowledge of some of the foundation issues. You can read through the pages of this section in turn, using the right arrows at the top and bottom of each page.

This is one of the slickest designed pieces of sofware I have ever heard of.

The second, third and fourth sections are a reference to all of CSS - selectors, properties, and other more advanced features. You'll find descriptions, syntax information, and information about browser support for every aspect of the technology. While these parts of the guide do have a certain order, and navigating arrows that connect each page to those around it, most likely you will use them as a reference, using the contents page to navigate, rather than reading through them one by one. Unless, of course, like us, reading dictionaries is one of your secret hobbies :-).

If you are new to style sheets, you might like to firstly read through this first introductory section. This leads you from an introduction, through the key ideas, then into the practicalities of using style sheets. Then you'll be ready to start working with selectors, properties and advanced style.

If you are familiar with the ideas behind style sheets, you might simply jump straight in where you are most interested. Each segment is self contained, and links to other parts as necessary. If you're looking for details about a particular selector, property or feature, you'll best find it using the contents.

The last section is a series of articles on theoretical and practical issues in developing standards-based, accessible web pages using CSS. These can be read and returned to at your leisure.

I hope this guide and our other resources enable your web development efforts, and help you get to grips with CSS.

Browser support information

Throughout this guide we include detailed information about the level of support for the different CSS features. Some CSS tests we created ourselves, but we are also extremely indebted for tests created and made available by

Internet Explorer

Version 4.0 Windows

Version 5.0 Windows

Version 5.5 Windows

Version 6.0 (Public Beta) Windows

Version 4.0 Macintosh

Version 5.0 Macintosh

The Windows and Macintosh versions of Internet Explorer up until now have not shared the same code base. One of the results of this is that Version 6.0 Windows still does not have the level of style sheets support of the much older Version 5.0 Macintosh.

Netscape Navigator

Version 4.x Windows

Version 4.x Macintosh

These were found to be so similar that we have combined the information into one entry in our reports. For the one or two occasions where there were differences we have specifically mentioned this in the details section of the table.

Version 6.0 Macintosh

Version 7.0 Macintosh

The Windows and Macintosh versions of this latest version of Netscape Navigator share the same code base, so their support for CSS is assumed to be identical.

Opera

Opera 3.61 (Beta) Windows

Opera 5.0 (Technology Preview 2.278) Macintosh

Opera 7.0 Windows

The Windows and Macintosh versions of Opera share the same code base, so their support for CSS is assumed to be identical.

About the authors

John Allsopp is the technical director of Western Civilisation pty. ltd. This is less sophisticated than it sounds.

John has written on web development issues for numerous web and paper based publications. He maintains a blog, dog or higher, about the travails of a standards based software developer in a non standard world.

Maxine Sherrin is a director of Western Civilisation pty. ltd. Her work here includes