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, you might want to 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, and CSS 2.1 Section 3.1 (Definitions) which introduces some commonly-used terminology.
  3. Read carefully the following CSS spec sections, since the concepts in these sections are crucial to understanding the rest of the specs: 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 CSS 2.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…

Web Platform Tests Project
The WPT project maintains a shared test suite for the CSS specifications and other Web Platform technologies.
The Mozilla Project
The Mozilla Project maintains the Gecko layout engine, which forms the core of the Firefox web browser, among others.
The WebKit Project
The WebKit Project maintains the WebKit layout engine, which forms the core of Safari web browser.
The Chromium Project
The Chromium Project maintains the Blink layout engine, which forms the core of the Chrome, Edge, and Brave web browsers, among others.

Asking Questions

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

Elika J. Etemad
Copyright © 1994–2022 W3C® Privacy policy

Last updated Fri 01 Apr 2022 03:21:29 PM UTC


About the translations