MLI Home → Writings → Tech Notes → CSS Considered Harmful? → An Example of Bad CSS Use (non-CSS version)

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:

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.

Better:

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.

---

MLI Home → Writings → Tech Notes → CSS Considered Harmful? → An Example of Bad CSS Use (non-CSS version)