Learn Web Design

CSS 2 aids the programmer if he desires to reuse the colors which are already specified in the user's operating system. It does this by defining a series of system color keywords. Wherever a value is allowed, any of these values can be used. It is thus possible to match the color of the user's desktop with the background color of a certain element; this is done through this code:

Also, the system's default text and background color can be attributed to a document by using this line:

Despite the fact that there are in total 28 color keywords, CSS does not define them individually. Generic (and thus very short) descriptions of each keyword are used instead. The most important of the 28 keywords are presented in the list which follows. There are cases when there is a direct analog with the options present in the "Appearance" tab in Windows and these cases will be noted accordingly.

These keywords are:

• ActiveCaption. This setting controls the color of the caption of the current active window (this is also the first color in the "Active Title Bar").
• ActiveBorder. This way the color applied to the outside border of the active window is set (this is also the first color option in "Active Windows Border").
• AppWorkspace. This keyword controls the background color used in software that support multiple documents; this is the case with the color found behind the open documents in Microsoft Word (this is the first color from the "Application Background" setting).
• ButtonText. The ButtonText defines the color which can be attributed to push buttons (it is the font color option in "3D Objects" setting).
• ButtonShadow. This attribute allows for setting the color for three dimensional elements.
• ButtonHighlight. When three dimensional display elements are displayed, this keyword defines the highlight color on the edges of the specific element that is faced opposing the virtual light source. For example this will be the color of the right and bottom edges of the three dimensional element if the virtual light sources comes from the upper left part.
• CaptionText. Through this keyword programmers can set the caption's color, the size box's, and of the symbol in a scrollbar arrow box. (this is the first color in "Active Title Bar").
• GrayText. This value is used on the grayed text, or the text which is disabled.
• Highlight. This option can let one set the color of the items selected in a control.
• Menu. The color found in a menu's background cat be set using this value (it is also the first color in the "Menu" setting).
• MenuText. This sets the color of the text in menus.
• InfoText. This is the color which is found in tool tips (the same as the font color in "ToolTip").
• Scrollbar. The scrollbar's gray are is defined this way.
• WindowText. The text's color in windows is set this way (the font color in the "Window" menu).
• WindowFrame .The frame of the window will have the same color as set by this keyword.
• Window. The same as the first color in "Window" and it sets the color found in the background of a window.
• ThreeDFace. The color of three dimensional elements will be defined like this.
• ThreeDShadow. The dark aspect of the shadow of three dimensional display elements.

CSS uses the case-insensitive setting for the system color keywords, but it is advisable to use the aspect presented above (mixed capitalization) in order to make the color names more readable.