Skip to main content

Getting StartED with CSS

User Interface Properties

These properties affect the display of the cursor and outlines. An outline is similar to a border in that it surrounds an element. However, outlines do not add to the overall width or height of an element, and all four sides must be the same color, style and width. The main purpose of outlines is to improve accessibility through a visual indication of the element that currently has focus. Neither IE6 nor IE7 supports outlines. See Chapter 12 for details.

cursor

Accepted values:
A comma-separated list of URL values, or one of the following keywords: auto, crosshair, default, help, pointer, move, progress, text, wait, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Default:
auto
Inherited:
Yes

Changes the appearance of the cursor. The shape depends on the individual browser. The difference between auto and default is that auto leaves the choice of cursor up to the browser dependent on context, whereas default forces the browser to display the default cursor (usually an arrow) regardless of context. Examples of each value.

Prior to IE6, Internet Explorer used the non-standard value hand instead of pointer to display the hand-shaped cursor normally used for links. Although all versions of Internet Explorer still support hand, you should now use pointer.

outline-color

Accepted values:
A color value or the keyword invert
Default:
invert
Inherited:
No

Sets the color of all four sides of an outline. The invert keyword instructs the browser to choose a color that ensures the outline remains visible against the background. Firefox 3.5 does not support invert.

Example of outline-color: invert. In browsers that support invert, you should see a 20px outline around the text.

outline-style

Accepted values:
dashed, dotted, double, groove, inset, none, outset, ridge, solid
Default:
none
Inherited:
No

Sets the style for all four sides of an outline.

Example demonstrating how an outline can be applied to form elements indicating which field currently has focus. Tab through the form fields to see the effect.

outline-width

Accepted values:
A percentage, or size with a unit of measurement
Default:
medium
Inherited:
No

Sets the width for all four sides of an outline.

outline

Default:
See individual properties
Inherited:
No

Shorthand property that allows you to set the color, style, and width of an outline in a single declaration.