Interface Styles

2008 Nov 16

System Colors

The following keywords can be used anywhere a color value can appear:

Value	Color of the
ActiveBorder	outside border of an active window
ActiveCaption	background of the caption of currently active window
AppWorkspace	background in an application allowing multiple documents
Background	background of the desktop
ButtonFace	face of 3d buttons
ButtonHighlight	edges of 3D display elements that face away from light source
ButtonShadow	3D display display elements
ButtonText	text on push buttons
Captiontext	text in captions, the size box and the symbol in a scrollbar arrow box
GrayText	grayed or disabled text (black if not supprted)
Highlight	item(s) selected in a control
HighlightText	text of item(s) selected in a control
InactiveBorder	outside border of an inactive window
InactiveCaption	background of captions in an inactive window
InactiveCaptionText	text in an inactive caption
InfoBackground	background in tooltips
InfoText	text in tooltips
Menu	background of a menu
MenuText	text in a menu
Scrollbar	background of a scrollbar
ThreeDDarkShadow	shadow of 3D display elements
ThreeDFace	face of 3D display elements
ThreeDHighlight	light color of 3D display elements
ThreeDLightShadow	edges facing light on 3D display elements
ThreeDShadow	dark shadow on 3D display elements
Window	background of a window
WindowFrame	frame of a window
WindowText	text in a window

System Cursors

cursor
Values	[[<uri>,]*][auto \| default \| crosshair \| hand \| help \| move \| pointer \| progress \| text \| wait \| e-resize \| n-resize \| s-resize \| w-resize \| ne-resize \| nw-resize \| se-resize \| sw-resize ]] \| inherit
Initial Value	auto
Applies to	all elements
Inherited	yes

auto : has the agent choose the appropriate cursor
default : the OS system default cursor (usually an arrow)
pointer : same as over a hyperlink, a[href] { cursor: pointer; }
<uri> : e.g. url(foo.cur) or url(fee.ani), see C:\Windows\Cursors\
Note that after the uri there is a comma and zero or more fallback cursors, and a required non uri cursor value as a fallback in case the uri's are not found or the format is not supported by the agent.

CSS+HTML

Results

span.grn { color: #006600; 
           font-family: Monospace; 
           font-weight: bold; }
...
Hover mouse over each<br> 
  <span class=grn><b>keyword</b></span> 
  to see cursor:<br><br>
<table border=2 bgcolor=#333333>
<tr align=center bgcolor=white>
<td><span class=grn style="cursor: 
  default">default</span>
<td><span class=grn style="cursor: 
  crosshair">crosshair</span>
<td><span class=grn style="cursor: 
  hand">hand</span>
<tr align=center bgcolor=white>
<td><span class=grn style="cursor: 
  help">help</span>
<td><span class=grn style="cursor: 
  move">move</span><br>
<td><span class=grn style="cursor: 
  pointer">pointer</span>
<tr align=center bgcolor=white>
<td><span class=grn style="cursor: 
  progress">progress</span>
<td><span class=grn style="cursor: 
  text">text</span>
<td><span class=grn style="cursor: 
  wait">wait</span>
<tr bgcolor=#CCCCCC>
  <td colspan=3 height=3></td>
<tr align=center bgcolor=white>
<td><span class=grn style="cursor: 
  nw-resize">nw-resize</span>
<td><span class=grn style="cursor: 
  n-resize">n-resize</span>
<td><span class=grn style="cursor: 
  ne-resize">ne-resize</span>
</tr>
<tr align=center bgcolor=white>
<td><span class=grn style="cursor: 
  w-resize">w-resize</span>
<td bgcolor=#999999><span class=grn"></span>
<td><span class=grn style="cursor: 
  e-resize">e-resize</span>
</tr>
<tr align=center bgcolor=white>
<td><span class=grn style="cursor: 
  sw-resize">sw-resize</span>
<td><span class=grn style="cursor: 
  s-resize">s-resize</span>
<td><span class=grn style="cursor: 
  se-resize">se-resize</span>
</tr>
</table>

Hover mouse over each
keyword to see cursor:

default	crosshair	hand
help	move	pointer
progress	text	wait

nw-resize	n-resize	ne-resize
w-resize		e-resize
sw-resize	s-resize	se-resize

System Fonts

The following values, which can be used only for the font property, are the fonts used by the OS:

Value	The font styles used
caption	for controls with captions (e.g. buttons and menus)
icon	to label icons (e.g. files, folders, shortcuts)
menu	for text in menus of any kind
message-box	to present text in dialog boxes
small-caption	for labeling small caption controls
status-bar	for text in window status bars