User Preferences For Stylesheets

Introduction

This stylesheet is based on system values, which means that the user's color and font choices for the operating system (or windowing environment) user interface are used to the greatest extent possible.

To get some idea of what a difference this can make, temporarily set your system colors to a different color scheme. Look especially at those labelled high-contrast and (on Windows systems, at least) high-color. Watch the effect it has on the various elements on this page.

Where there are matched values - that is, background, text, and border colors - for a particular user-interface element, you will see style samples for the various properties separately, and then a sample that combines the associated properties. It is generally not a good idea to mix-and-match color values; for example: if you wanted to use the Button background color with the Info text color, you could not necessarily expect that the system color scheme selected by the user would have values for those two elements that would provide good contrast.

User preferences for colors

Derived from Cascading Style Sheets, level 2 CSS2 Specification.

In addition to being able to assign pre-defined colors to text, backgrounds, etc., CSS2 allows authors to specify colors in a manner that integrates them into the user's graphic environment. Style rules that take into account user preferences thus offer the following advantages:

They produce pages that fit the user's defined look and feel.
They produce pages that may be more accessible as the current user settings may be related to a disability.

The set of values defined for system colors is intended to be exhaustive. For systems that do not have a corresponding value, the specified value should be mapped to the nearest system attribute, or to a default color.

The following lists additional values for color-related CSS attributes and their general meaning. Any color property (e.g., 'color' or 'background-color') can take one of the following names. Although these are case-insensitive, it is recommended that the mixed capitalization shown below be used, to make the names more legible.

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

For example, to set the foreground and background colors of a paragraph to the same foreground and background colors of the user's window, write the following:

  p {
    color: WindowText;
    background-color: Window
    }

The following values refer to system fonts.

Derived from Cascading Style Sheets, level 2 CSS2 Specification.

caption: The font used for captioned controls (e.g., buttons, drop-downs, etc.). [In Windows, this is the font specified for Title Bar and Inactive Title Bar.]
icon: The font used to label icons. [In Windows, this is the font specified for Icons.]
menu: The font used in menus (e.g., dropdown menus and menu lists). [In Windows, this is the font specified for Menu and for Selected Items.]
message-box: The font used in dialog boxes. [In Windows, this is the font specified for Message Box.]
small-caption: The font used for labeling small controls. [In Windows, this is the font specified for Palette Title.]
status-bar: The font used in window status bars. [In Windows, this is the font specified for ToolTips.]

System fonts may only be set as a whole; that is, the font family, size, weight, style, etc. are all set at the same time.These values may then be altered individually if desired.

Original version of this page.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Last modified: 2022-09-17 15:22:02 -- Page loaded at: 2024-11-28 00:31:10