Contents Updates to The XHTML Language and Design Sourcebook

Test of System Colors Specified in CSS 2

CSS Level 2 defines several additional color names that represent the special system-specific colors used by the Windowing system for colors such as the standard text background color, the colors of scrollbars, the color of the title bar in active windows, and so on. By using these named colors, you can design a document, using CSS2, that closely integrates itself with the look and feel of the other windows on the page. These named colors are summarized in the following table. Of course, the colors that actually appear in the "demonstration" column (the middle one) will depend on the system colors set for your computer.

NOTE: Systems Colors Don't Work with Navigator 4/ Internet Explorer 4

The system colors defined here work on Navigator 5 and Internet Explorer 5, but not on Navigator 4 or Internet Explorer 4. In the latter cases, the browser interprets the names as if they were hexadecimal RGB color codes - and will produce bizarre and totally incorrect colors!

Table: System color names defined in CSS 2. These color names are supported by Navigator 5 and greater, and by Internet Explorer 5 and greater.

CSS 2 Color Name Example (Using Background-color) Description
ActiveBorder   Active window border.
ActiveCaption   Active window caption.
AppWorkspace   Background color of multiple document interface.
Background   Desktop background.
ButtonFace   Face color for three-dimensional display elements.
ButtonHighlight   Dark shadow for three-dimensional display elements (for edges facing away from the light source).
ButtonShadow   Shadow color for three-dimensional display elements.
ButtonText   Text on push buttons.
CaptionText   Text in caption, size box, and scrollbar arrow box.
GrayText   Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight   Item(s) selected in a control.
HighlightText   Text of item(s) selected in a control.
InactiveBorder   Inactive window border.
InactiveCaption   Inactive window caption.
InactiveCaptionText   Color of text in an inactive caption.
InfoBackground   Background color for tooltip controls.
InfoText   Text color for tooltip controls.
Menu Menu background.
MenuText Text in menus.
Scrollbar   Scroll bar gray area.
ThreeDDarkShadow   Dark shadow for three-dimensional display elements.
ThreeDFace   Face color for three-dimensional display elements.
ThreeDHighlight   Highlight color for three-dimensional display elements.
ThreeDLightShadow   Light color for three-dimensional display elements (for edges facing the light source).
ThreeDShadow   Dark shadow for three-dimensional display elements.
Window   Window background.
WindowFrame   Window frame.
WindowText   Text in windows.


© 2000, by Ian S. Graham Last Modified: 22 February 2000