Boxing with CSS, Part I: The Theory - HTML with Style
Boxing with CSS, Part I: The Theory
Forward he cried from the
and the front rank died
And the General sat, and the lines on the map
moved from side to side
- Pink Floyd, Us and Them
War is ugly. Take, for instance, World War I, which ended eighty years ago around this time of year. The highlight of the conflict consisted of untold numbers of men killed over a borderline that moved on an average pace of a few inches a year in a random direction, while historians are still arguing about why the whole business ever happened in the first place. Generally speaking, not one of humankind's brightest moments.
So, generally speaking, there are far worse things in the world than the CSS visual formatting model, which also concerns itself with lines moving, albeit not an a map.
The CSS visual formatting model is a way of laying out documents on visual media (such as a computer screen or a printed page). By all accounts, it is a very simple formatting model, and the publishing world has seen much more complicated ones. Still, it is not something that is simple to explain or grasp in a few words.
Various CSS properties are used to control how a document will appear in the context of this formatting model. You have seen most of them in the examples used so far, but I haven't explained their usage because I have to explain the formatting model first.
As I said, the formatting model is a pretty complicated affair. As if that wasn't enough, though, the implementations that exist, most notably in Microsoft Internet Explorer and Netscape Navigator, are respectably problematic and horrible. Explorer does a pretty good job of sticking to the model, and will behave sensibly with a few exceptions that can be dealt with simply. Navigator, on the other hand, has its own concept of what the various properties should do.
Instead of going through the theory and observing the bugs in Explorer and Navigator along the way, as I have done in the tutorials so far, I will explain the theory, that is how the CSS specification explains formatting should be done, in this tutorial, and deal with the implementations in the next one. I hope this makes the whole process easier to understand.