Your browser's CSS support is partial or nonexistent, so this page will not demonstrate the problem for you. You may either view a version of this page that replaces the CSS-dependent sections with screen shots, or return to the essay.
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.
This is used to set the top margin. The margin is space outside the element. The margin is filled with the parent element's background color, not the element's background color.
margin-top can be measured in pixels, ems, percent, or ergs. (Just kidding about the last one.)
The only 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.
This is used to set the top margin. The margin is space outside the element. The margin is filled with the parent element's background color, not the element's background color.
margin-top can be measured in pixels, ems, percent, or ergs. (Just kidding about the last one.)
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 a heading from a subheading.
The current version of the CSS Reference fixed the problem, and looks better than my solution.
Last updated 1 February 2002
http://www.rdrop.com/~half/Creations/Writings/TechNotes/Bad.CSS.example.html
All contents ©2002 Mark L. Irons