list-style - HTML CSS CSS Property

HTML CSS examples for CSS Property:list-style

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. list-style

Description

The list-style CSS property sets the display style for list items.

It is a shorthand property for setting the individual list properties:

  • list-style-type
  • list-style-position
  • list-style-image.

The following table summarizes the list-style Property.

Item Value
Default value: See individual properties
Applies to:List items
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


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

Property Values

The following table describes the values of this property.

Value Description
list-style-type Set the marker style for a list-item.
list-style-position Set the position of the list-item marker.
list-style-imageSet the image to be used as a list-item marker.
initial Sets this property to its default value.
inherit take the value of its parent element list-style property.

The example below shows the list-style property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of list-style shorthand property</title>
  <style type="text/css">
    ul {<!--   w w w  .j a  v a  2s.  co m-->
      list-style: circle inside;
    }
    ol {
      list-style: upper-latin outside;
    }
    </style>
 </head>
 <body>
  <h2>Unordered List</h2>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ol>
 </body>
</html>

Related Tutorials