introduction ~ selectors ~ properties ~ advanced ~ real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values

user interface properties

CSS2 introduced user interface properties, which allow the shape of the cursor to be set based on the object that it is hovering over, and to define the outline of an element. When the cursor is inserted in a field, and keystrokes will be directed to that field, it is said to have the focus. It is usual for some kind of outline to indicate this fact.

CSS2 also introduced a series of color keywords which refer to system values such as the color of window borders. You can learn more about these in the section on color values.

Lastly, CSS2 introduced the system font concept, which allows you to specify fonts based on those used by the system for various kinds of object, such as menu items and the default text for window items. For more on this, see the section on text style properties.

cursor

What it does

This property sets the shape of the cursor when the mouse is hovering over a selected element.

Possible values

The cursor can be specified as either one of several keyword values, or as a URL that points to a file of type .cur (a cursor resource file).

The possible keyword values for the cursor property, as spelt out in the CSS2 specification are

• auto The browser determines the cursor to display based on the current context.
• crosshair A simple crosshair (e.g., short line segments resembling a "+" sign).
• default The platform-dependent default cursor. Often rendered as an arrow.
• pointer The cursor is a pointer that indicates a link.
• move Indicates something is to be moved.
• *-resize Indicates that the edge is to be moved. * is replaced with N, S, E, W, NE, NW, SE, SW for each of the edges (north, south, east, west and so on).
• text Indicates text that may be selected. Often rendered as an I-bar.
• wait A cursor to indicate that the program is busy and the user should wait. Often rendered as a watch or hourglass.
• help Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

Default values

The default cursor value is auto, which corresponds to the current way in which browsers draw cursors.

Is it inherited?

Child elements inherit the cursor of their parent elements. Remember, inherited properties can be overridden.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

outline

What it does

This property sets the outline around an element, usually used to indicate that the element has the keyboard focus, that is it will receive keystrokes. Elements do not need to have the focus to have an outline, however, good user interface principles should be followed. As a general rule, users expect the outline to indicate that the outlined element has the focus.

This property is particularly helpful when designing forms for web pages.

Possible values

outline is a shorthand for three properties described below, outline-style, outline-width and outline-color. It takes a list of width, style and color values (as described for the individual properties below.)

Default values

The default value is the same as for each of the values described below.

Is it inherited?

Child elements do not inherit the outline of their parent.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

outline-color

What it does

outline-color specifies the color to be used for drawing the outline around an element. Unlike a border, the color of each edge of an outline is the same.

Possible values

outline-color is specified by a color. We discuss color values in detail in our values section. In addition, the keyword invert can be used.

invert inverts each of the pixels in the border. This ensures that an outline is visible regardless of background color.

Default values

If no color is specified for the outline, the outline is invert, which means the outline will be the inverted color of the background.

Is it inherited?

The outline-color of an element is not inherited from its parent element.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

outline-style

What it does

In addition to width and color, the outline of an element can have a style. There are several possible styles.

Possible values

Outline styles are specified using keywords.

The outline-style keywords are

• none
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

Default values

If no outline-style property is specified, the style of an outline is none.

Is it inherited?

Elements do not inherit the outline-style of their parent elements.

Browser support

outline-width

Possible values

Outline widths can take either keyword values, or length values.

The keyword values that can be used are

• thin
• medium
• thick

There is no specification for what these keywords mean, so different browsers will probably draw them as different thicknesses. The only guarantee is that thin is not thicker than medium which is no thicker than thick.

Length values are discussed in detail in our section on values. Using relative length values you can create borders that are in proportion with the size of an element, or its contents.

Default values

If no outline-width is set, the thickness of an outline is medium.

Is it inherited?

An element does not inherit the outline-width of its parent element.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

next: values

(C)1997-2001 Western Civilisation Pty. Ltd.