Languages

# Understanding the CSS Specifications

You don't need to be a programmer or a CS major to understand the CSS specifications. You don't need to be over 18 or have a Bachelor's degree. You just need to be very pedantic, very persistent, and very thorough.

A specification is not a manual. There is no excuse for badly written prose and please complain if you find some. But specs do target a specific audience.

## Starting from Zero

J. David Eisenberg has written a useful How to Read W3C Specs for web designers. If reading technical specifications isn't part of your daily fare, I recommend starting with that.

Also, if you are totally clueless about CSS, I recommend you first learn what it is and how to use it. For a very brief tutorial, you can start with the Introduction to CSS 2.1. For a fuller, friendlier introduction, pick up a learning CSS book that focuses on CSS fundamentals rather than on design. Play with CSS in a text editor. Design a few mock homepages. Get introduced to selector specificity and margin collapsing. Add `* { border: 1px dashed gray; }` to a web page so you can see the box model. Having an idea of where this is all headed will help you fit together all the dry technicalities in the specifications.

## Learning the Foundation

Being able to understand the CSS specifications requires understanding the context, vocabulary, and fundamental concepts that the specifications are built out of. If you want to really understand the specs, you need to really understand the specification sections listed below:

1. First, put all the specifications in context by reading the current CSS Snapshot. You may also want to read the CSS Design Principles.
2. Next, read all of CSS 2.1 Chapter 1, which explains how the specifications are organized.
3. Read CSS 2.1 Section 3.1 (Definitions) because you'll need the vocabulary defined here to understand the CSS specifications.
4. Read carefully the following sections of CSS 2.1 since the rules and concepts in these sections have detailed implications for the rest of the spec:
   - Chapter 6, particularly Section 6.1 and Section 6.2
   - Section 8.1
   - Section 9.1
   - Section 9.2
   - Subsection 9.3 (Section 9.3 up to the 9.3.1 heading.)
   - Section 10.1
   You may need to refer back to them as you decipher particularly cryptic parts of the standard.

## An Important Detail

Some CSS specs, such as CSS2.1, have errata, corrections made after the spec's publication. When you are interpreting a spec, make sure you check the errata! The specs are still changing as problems come up through testing and implementation. These corrections have not yet been incorporated into the spec text, but they are critical to a correct understanding of the specification. The errata page is linked from the top of the spec.

## Deepening Your Understanding

The best way to gain a deep understanding of the specification is to work with it (the specification, not just the technology). And the best way to do that is to write test cases and explain why they are correct according the spec. Now you can write test cases on your own just for fun, but you'll learn a lot more and help the CSS community (authors, implementors, and spec writers) at the same time if you get involved in a QA project. You can learn and contribute by writing test cases, improving test cases, making variations of test cases, and answering spec questions about test cases for…

The W3C CSS Conformance Test Suites
  The W3C maintains the official conformance test suites for the CSS specifications.
The Mozilla Project
  The Mozilla Project maintains the Gecko layout engine, which forms the core of Firefox, Netscape, Seamonkey, Camino, Flock, and many other web browsers.
The WebKit Project
  The WebKit Project maintains the WebKit layout engine, which forms the core of Safari, Omniweb, iCab, and other web browsers.
The KDE Project
  The KDE Project maintains the KHTML layout engine, which forms the core of the Konqueror web browser and was the original codebase for WebKit.

## Asking Questions

If you've perused the specifications and something still doesn't make sense, you can ask on www-style.

## Site navigation

- CSS home
- Learn & use
- Software
- Participate / drafts

Last updated 3 May 2011

## Languages

English Русский Українська

About the translations