CSS List Properties

CSS list properties you can apply on HTML list element like CSS list-style-type, CSS list-style-image and CSS list-style-position property.

CSS list-style-type

CSS list-style-type property use for display list item either Ordered or Unordered list.

Ordered list possible value roman, alpha, numeric and many more.
Unordered list possible value circle, square, disk and none.

List Style Type possible values see the list-style-type:

Unordered list value

Value Description
disk disk type list item display, this is default value
circle Circle type list item display
square Square type list item display.
none Nothing any style apply in list item

Ordered list value

Value Description
decimal decimal type numeric list style (eg. 1, 2, 3 and so on.)
this is default value.
upper-alpha Uppercase alphabetically list style (eg. A, B, C ans so on.)
lower-alpha Lowercase alphabetically list style (eg. a, b, c and so on.)
upper-roman Uppercase roman numerals list (eg. I, II, III and so on.)
lower-roman Lowercase roman numerals list (eg. i, ii, iii and so on.)

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS unordered list style type</title>
</head>
<body>
  <ul style="list-style-type: square;">
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <ul style="list-style-type: lower-roman;">
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</body>
</html>

Run it...   »

CSS list-style-image

CSS list-style-image property set list style URL specified image.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS unordered list style image</title>
</head>
<body>
  <ul style="list-style-image: url(../../images/new.png);">
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</body>
</html>

Run it...   »

CSS list-style-position

CSS list-style-position set list style position either inside or outside.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS unordered list style position</title>
</head>
<body>
  <ul style="list-style-position: outside; list-style-type: lower-roman;">
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <ul style="list-style-position: inside; list-style-type: lower-alpha;">
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</body>
</html>

Run it...   »