A series of ‘one page’ tutorials, designed to teach and showcase various CSS techniques.
The greatest (most accurate) understanding of CSS can only be gained by studying the spec, a 400-page document with language typical of the following excerpt:
Percentage intrinsic widths are first evaluated with respect to the containing block’s width, if that width doesn’t itself depend on the replaced element’s width. If it does, then a percentage intrinsic width on that element can’t be resolved and the element is assumed to have no intrinsic width.
Notwithstanding the complexity of this undertaking, other problems face the beginner and intermediate web designer. The spec itself has relatively few examples. Although there are some excellent diagrams, some sections persist solely in block text, and none of the examples presented are actually real-world demonstrations. Moreover, the CSS spec has been implemented and used in ways that the original authors did not (and probably could not) consider. Floats, layout techniques, and even basic typography have all been stretched to the limit to achieve effects far beyond what was originally intended. Some of these techniques may require specific implementations, some were pioneered in a specific browser, then adopted by the rest.
In short, the original spec is, if not quite out-of-date, not entirely up-to-date. And it’s certainly a hefty barrier to those starting out.
Hence, the proliferation of CSS guides, tutorials, hacks, and a whole wealth of information on the web. Loath as I may be to add to that body of work, I believe there is a gap, and that’s where these one-page tutorials come in. Taking some inspiration from Richard Rutter’s excellent The Elements of Typographic Style Applied to the Web, amongst others, I am building a living series of ‘one-page’ articles, demonstrating through - hopefully - engaging visual style, how CSS really works. They should not necessarily be taken in isolation, and further reading will reward the persistent reader. However, I want to provide a good place to start, a good place to continue, and a good place to come back to when the minutiae of a certain technique, style property, or browser behaviour demand real-world evidence.
- Your Editor