about this guide
Introduction to the third edition
by John Allsopp
When Cascading Style Sheets were introduced in late 1996, they represented an exciting 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 readers 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. 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 (and bust) was still gaining momentum.
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 (RIP the "blink" tag), or become part of the standard.
But some things change more slowly. Looking at the code of an average web page in 1996 or today, you'd find the HTML itself remarkably similar. Above all, the appearance of the page, the fonts used, the color of text, effects like bold and italics would all be marked up with HTML elements. Back then, it was unavoidable. Now, there are many good reasons for avoiding that approach altogether. There's also a solid, well supported, easy to use technology to make it happen - Cascading Style Sheets or CSS.
Many (internet) years ago, I put together a quite straightforward guide to getting up to speed with CSS. In time it's grown to accommodate changes in my 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, I've dusted it off, and attempted to update it to take into account what I've learnt lately, and the changes to CSS, and to browser support for CSS. This is the first time we've incorporated browser support details directly into the guide. We've also added a section on real world issues, which brings together a lot of my thinking and writing about these issues over the last few years.
Hopefully, with all these amendments, additions and improvements, this guide will start living up to its original name as "Everything you ever wanted to know about style".
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 Home Page, PageMill, 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 CSS2 specification, translating it into explanations and ideas that humans can understand.
I'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.
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.
If you are new to style sheets, you might like to firstly read through the 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 table of 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 help enable your web development efforts, and help you get to grips with CSS.