CSS - list-style

Examples

List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

Syntax  

/* type */
list-style: square;

/* image */
list-style: url('../img/dino.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/dino.png') outside;

list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;

Values

Accepts one, two or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used if the image is unavailable.

<'list-style-type'>

See list-style-type

<'list-style-image'>

See list-style-image

<'list-style-position'>

See list-style-position

Formal syntax

<a href="css/list-style-type" title="&lt;counter-style&gt; | &lt;string&gt; | none"><'list-style-type'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/list-style-position" title="inside | outside"><'list-style-position'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/list-style-image" title="&lt;uri&gt; | none"><'list-style-image'></a>

Description  

The list-style property is a shorthand property for setting list-style-type, list-style-image and list-style-position.

Browser Compatibility  

See Also  

• list-style-type, list-style-image, list-style-position

Specifications  

License