First base

Where the reset.css tool breaks down the default stylesheets of the different browsers, the base.css tool then builds upon this level foundation to provide basic styling across a range of commonly used elements.

There are certain elements on your page that just should be styled differently from other elements. Heading text for example, simply should stand out from body text; that's the whole point of heading text in the first place.

So the Base CSS Tool reintroduces some of the presentational styles of the common elements that the Reset CSS Tool neutralizes, but it does so in a way that is consistent across browsers. Italics and boldface are restored to those elements where you would expect them.

Headings are all made bold and given increasing sizes that can be rendered reliably in all browsers. Those sizes are expressed in relative (percentage) units so the headings will scale correctly if the user zooms in. Space is provided both above and below each heading and also after paragraphs and other block elements.

Ordered, unordered, and definition lists are given a left margin to indent by the same amount. Ordered lists are given a decimal marker, while unordered lists are given a disc marker, both placed on the outside of the list item's box.

Table cells are given a solid, black, 1-pixel border and an overall padding of half an em. This helps to space things out and make tables a little more readable. <th> elements are also given a bolder typeface.

Why then does reset.css cancel all styles if we then restore them with base.css? The separation is done so we are not forced to use base.css, but can use our very own style. In fact, there is no aggregate that includes base.css as we are not expected to use it as supplied. In such cases, we would still use reset.css to start from a reliable, known state, and from there we can build. We can use base.css as a template for this customization.

As base.css builds upon reset.css, and also upon fonts.css, which we'll see in a moment, if included, it must come after them. We will probably use the aggregate reset-fonts-grids.css so base.css should come after that aggregate file. Reversing the order would have reset.css destroying the styles set by base.css.

If we include a reference to the base.css stylesheet in our test page, some of the elements that were normalized by the Reset CSS Tool will have styling applied, as demonstrated by the following screenshot: