HI WELCOME TO SIRIS

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

ValueDescription
diskdisk type list item display, this is default value
circleCircle type list item display
squareSquare type list item display.
noneNothing any style apply in list item

Ordered list value

ValueDescription
decimaldecimal type numeric list style (eg. 1, 2, 3 and so on.)
this is default value.
upper-alphaUppercase alphabetically list style (eg. A, B, C ans so on.)
lower-alphaLowercase alphabetically list style (eg. a, b, c and so on.)
upper-romanUppercase roman numerals list (eg. I, II, III and so on.)
lower-romanLowercase 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>

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>

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>