Classification properties

These advanced properties classify elements into categories, as is seen below...


Valueinline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Used withall elements

This property describes how / if an element is displayed on the screen or printed page. If the language doesn't support a certain elemet, of if you want an element to behave like something else, this is the property to use.

Run-in boxes

An object specified as a Run-in object will be displayed as an inline object if the following object is a normal block item (such as a <P> block). Otherwise, it becomes a block object.

For example, H3s are normally block objects - they cause line breaks. However, if we use H3 { display: run-in }, and a <P> block follows, then the heading will appear as the first line of the <P> block, and the text of the <P> block will continue on from the end of the heading.


Valuenormal | pre | nowrap
Used withblock elements

Specifies how white spaces (line feeds, tabs, etc) are displayed : normally (they are ignored), like the <pre> HTML element, or with line wrapping only done with <BR> elements.



This property describes what type of cursor to be displayed when the mouse or other pointing device is on the element.
Valueurl list + auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | inherit
Used withall elements
ExampleIMG { cursor : url("picture.cur"), crosshair; } }
  • crosshair a cursor of the + shape
  • default usually an arrow
  • pointer The cursor used for links
  • move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resizeThe cursors used by the operating system for these actions. The resize cursors are preceded by a compass direction, with North being the top of screen
  • text The icon usually used over text boxes
  • waitThe symbol which indicates the computer is busy.
  • helpUsually a question mark or balloon.
  • urilist a comma seperated list of addressed of cursors, in order of preference.


Creates an outline around, and "on top" of the element to make it stand out. It is drawn just outside the border edge.
Valueoutline-color || outline-style || outline-width | inherit
Used withall elements
ExampleIMG { outline : red inset thick } }
This is a short way of specifying each of the outline properties below. See each property for a description of allowable values.


Valuethin | medium | thick | length | inherit
Used withall elements
Example IMG { outline-width : thin } }


| inherit
Valuenone | dotted | dashed | solid | double | groove | ridge | inset | outset
Used withall elements
ExampleIMG { outline-style : inset } }


Valuecolor | invert | inherit
Used withall elements
Example :focus { outline-color: invert } }
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.