Back to the Web Design Home Page Buy Now - available at
Overview Chapters Examples Resources
Complete Chapters
Chapter 1

Chapter 5

Chapter 9

Chapter 13

Appendix B

Check Out These Other Books!

Chapter 13: Color
CSS2 Color Use
The main change in CSS2 in regard to color is the ability to set color values that are related to the user's current graphical environment. The idea here is that we can now specify colors in a relative manner so that the Web page integrates itself into the user's graphical environment. Imagine a user with a customized red desktop. We might want our various page and GUI elements to match this desktop. Apart from aesthetics, system settings may be adjusted to suit a user's accessibility needs. If we adjust page colors to suit, it may improve the accessibility of the page. The color values defined in Table 13-4 can be applied to any color property, like color or background-color. They should be cased as presented below for readability.

CSS2 Color Value Description of Color Relation
ActiveBorder Active window border
ActiveCaption Active window caption
AppWorkspace Background color of multiple document interface
Background Desktop background
ButtonFace Face color for 3-D display elements
ButtonHighlight Dark shadow for 3-D display elements
ButtonShadow Shadow color for 3-D display elements
ButtonText Text on push buttons
CaptionText Text in caption
GrayText Grayed (disabled) text
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 3-D display elements
ThreeDFace Face color for 3-D display elements
ThreeDHighlight Highlight color for 3-D display elements
ThreeDLightShadow Light color for 3-D display elements
ThreeDShadow Dark shadow for 3-D display elements
Window Window background
WindowFrame Window frame
WindowText Text in windows
Table 4: CSS2 System Color Values

You use these values just as you would use any other color; for example, a simple rule that sets the background of the page to match the desktop background would be

body {background-color: Background;}
The 6.x generation browsers have provided some support for these values. However, page authors are encouraged to use them carefully, as the distinction between desktop and Web application for now should be kept clear.

Next: Possible CSS3 Color Use

Overview | Chapters | Examples | Resources | Buy the Book!
Available at Available at