list-style

Article
10/10/2017

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

Syntax

{ list-style: sStyle }

Possible values

sStyle

String that specifies up to three of the following values, in any order:

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

The property is read/write and has a default value of disc outside none. It is inherited.

Remarks

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

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

Examples

The following example uses the list-style property to set the list style. This example uses the UL and UL.COMPACT elements as selectors in an embedded (global) style sheet to define the styles of two different unordered lists. For the UL.COMPACT element to override the image that is set with the the UL element selector, you must explicitly set the image property to none:

<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>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee341492.xtlink_newWindow(en-us,Expression.40).png .

Applies to

li, ol, ul