An Example of Bad CSS Use

In the following examples, each colored line denotes either a heading or a subheading. Can you distinguish them in each example?

This example is closely based on styles found in an earlier version of an online CSS reference.


[headings and subheadings have identical background colors]

See? The only practical way to distinguish subheadings from headings is by their indentation. On a page with a half-dozen headings and twenty subheadings, that's a real problem.


[properties and subheadings have very different background colors]

The only change is to the background color of the <H5> element. There are still many ways to improve this, but at least it's now possible to distinguish headings from subheadings.

Better still:

The current version of the CSS Reference fixed the problem, and looks better than my solution.

Last updated 1 February 2002
All contents ©2002 Mark L. Irons