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.

Bad:

margin-top

Purpose

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.

Values

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.

Better:

margin-top

Purpose

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.

Values

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.

Better still:

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