Classification properties

Classification Properties

These properties classify elements into categories rather than setting visual display styles

display
Value: block | inline | list-item | none
Initial: block
Applies to: all elements
Inherited: no
Percentage values: N/A

This property describes how/if an element is displayed on the canvas (which may be on a printed page, a computer display etc.).

An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like <H1> and <P> are of type 'block'. A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, <LI> will typically have this value.

An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.

A value of 'none' turns off the display of the element, including children elements and the surrounding box.

P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none }

The last rule turns off the display of images.

The initial value of 'display' is 'block', but a browser will typically have default values for all HTML elements according to the suggested rendering of elements in the HTML specification.

white-space
Value: normal | pre | nowrap
Initial: normal
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

Declares how white space inside the element should be handled: the 'normal' way (where white space is collapsed) or as the <PRE> element in HTML, or as 'nowrap' (the same as using the <NOBR> element, forcing line breaks with <BR>).

This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.

OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL { list-style-type: lower-alpha } /* a b c d e etc. */ OL { list-style-type: lower-roman } /* i ii iii iv v etc. */5.6.4

list-style-image
Value: <url> | none
Initial: none
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.

UL { list-style-image: url(http://png.com/ellipse.png) }

list-style-position
Value: inside | outside
Initial: outside
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content. Using a list-style of 'inside' causes the same effect as using <UL COMPACT> for a compact list.

list-style
Value: <keyword> || <position> || <url>
Initial: not defined for shorthand properties
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.

UL { list-style: upper-roman inside } UL UL { list-style: circle outside } LI.square { list-style: square }

Setting 'list-style' directly on <LI> elements can have unexpected results. Consider:

<STYLE TYPE="text/css"> OL.alpha LI { list-style: lower-alpha } UL LI { list-style: disc } </STYLE> <BODY> <OL CLASS=alpha> <LI>level 1 <UL> <LI>level 2 </UL> </OL> </BODY>

Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all <LI> elements and only 'lower-alpha' list styles will be used. It is therefore recommended to set 'list-style' only on the list type elements:

OL.alpha { list-style: lower-alpha } UL { list-style: disc }

In the above example, inheritance will transfer the 'list-style' values from <OL> and <UL> elements to <LI> elements.

A URL value can be combined with any other value:

UL { list-style: url(http://png.com/ellipse.png) disc }

In the example above, the 'disc' will be used when the image is unavailable.

Comments: