CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

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

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

Run it...   »

Example Result:

  • Item one
  • Item two
  • Item one
  • Item two

CSS list-style-image

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

Example Code:

<body>
		<ul style="list-style-image:url(jix/new.png);">
				<li>Item one</li>
				<li>Item two</li>
		</ul>
</body>

Run it...   »

Example Result:

  • Item one
  • Item two

CSS list-style-position

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

Example Code:

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

Run it...   »

Example Result:

  • Item one
  • Item two
  • Item one
  • Item two