Sample: Color Coding

Here is a snapshot of a page that utilizes both color coding and styling to distinguish between the display of various documented programming elements.

We see a listing of classes and interfaces mixed together. From the color and styling I can tell which are interfaces (green), classes (blue), and abstract classes (italicized blue).

Description:

This technique is absolutely trivial and really has no recipe. Yet I feel that it's one of the most important features enabled by CSS. I feel this feature is not employed as much as it should.

Web pages by definition contain a fairly large amount of information. Why not take advantage of color to distinguish various kinds of information. It has been shown that we naturally filter information much more quickly by color.

Examples abound. Take a media store. Its catalogues abound with information that is associated to one of a number of categories. Each category can have a different color code. For this demo, I'll show color-coding applied to a documentation system for the Java programming language.