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:

  1. They produce pages that fit the user's defined look and feel.
  2. 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] [Caption Sample]
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.


Return to James Card home page. Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Last modified: 2019-04-28 18:38:56 -- Page loaded at: 2019-06-17 04:02:34