8 out of 10 rated this helpful - Rate this topic

list-style property

Sets or retrieves up to three separate list-style properties of the object.

Syntax

list-style: [ type || position || image ]

Property values

A variable of type String that specifies or receives up to three of the following values, in any order:

type: Any of the range of type values available to the list-style-type property.
position: Any of the range of position values available to the list-style-position property.
image: Any of the range of image values available to the list-style-image property.

CSS information

Applies To	All elements
Media	visual
Inherited	1
Initial Value

Standards information

CSS 2.1, Section 5.6.6

Remarks

The list-style property is a composite property. When specifying both the type and image values, the image value takes precedence, unless the image value is set to none or the image pointed to by the URL cannot display.

The list-style property also applies to all elements on which the display property is set to list-item. To make the bullet points appear, you must explicitly set the margin property or set the list-style-position property to inside on these elements.

Examples

The following examples use the list-style attribute and the list-style property to set the list style.

This example uses ul and UL.compact as selectors in an embedded (global) style sheet to define the styles of two different unordered lists. For UL.compact to override the image that is set with the ul selector, you must explicitly set the image attribute to none.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/list-style.htm


<STYLE>
    UL { list-style: outside url(dot.gif) }
    UL.compact { list-style-image:none; list-style: inside circle }
</STYLE> 
</HEAD>
<BODY> 
<UL>
    <LI>...
    <LI>...
</UL>
<UL CLASS=compact>
    <LI>...
    <LI>...
</UL>

This example uses inline scripting to change the style of the list. If the default image cannot be located, a hollow circle is used.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyle.htm


<UL onmouseover="this.style.listStyle='url(dot.gif) circle'">

The following example sets the display property to list-item, a new possible value as of Internet Explorer 6, to demonstrate that the list-style property can also apply to elements on which the display property is set.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyle_2.htm



<SPAN onmouseover="this.style.display='list-item'">A line of text...</SPAN>

Community Additions

ADD