codescracker


css

CSS List Style Type



« Previous Tutorial Next Tutorial »


The list-style-type property is used to modify the default appearance of list-markers in HTML list structures.

The following is the syntax to use the list-style-type property :

list-style-type: value;

The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists, and the style of numbering characters in ordered lists.

Values Used for Unordered List

Here are the values which can be used for an unordered list:

Value Description
none Does not specify a marker for a list item
disc (default) Specifies a filled circle as a marker for a list item
square Specifies a square as a marker for a list item
circle Specifies a hollow circle as a marker for a list item

Values Used for Ordered List

Following table shows the most commonly used values which can be used for an ordered list:

Value Description Example
decimal Specifies that a marker is displayed as a decimal number 1,2,3,4,5
decimal-leading-zero Specifies that a marker is displayed as a number padded by initial zeros 01, 02, 03, 04, 05
upper-alpha Specifies that a marker is displayed in the upper-alpha style A, B, C, D, E
lower-alpha Specifies that a marker is displayed in the lower-alpha style a, b, c, d, e
upper-roman Specifies that a marker is displayed in the upper-roman style I, II, III, IV, V
lower-roman Specifies that a marker is displayed in the upper-roman style i, ii, iii, iv, v

CSS list-style-type Example

Here is an example on CSS list-style-type:

<html>
<body>

<ul style="list-style-type:circle;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ul>
<ul style="list-style-type:square;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ul>
<ul style="list-style-type:disc;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ul>
<ol style="list-style-type:decimal;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ol>
<ol style="list-style-type:decimal-leading-zero;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ol>
<ol style="list-style-type:lower-alpha;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ol>
<ol style="list-style-type:upper-alpha;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ol>
<ol style="list-style-type:lower-roman;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ol>
<ol style="list-style-type:upper-roman;">
	<li>CSS List Style Type Tutorial</li>
	<li>CSS List Style Type Example</li>
	<li>CSS List Style Type Test</li>
</ol>

</body>
</html>

Here is the live demo output produced by the above CSS list style type example code:

  • CSS List Style Type Tutorial
  • CSS List Style Type Example
  • CSS List Style Type Test
  • CSS List Style Type Tutorial
  • CSS List Style Type Example
  • CSS List Style Type Test
  • CSS List Style Type Tutorial
  • CSS List Style Type Example
  • CSS List Style Type Test
  1. CSS List Style Type Tutorial
  2. CSS List Style Type Example
  3. CSS List Style Type Test
  1. CSS List Style Type Tutorial
  2. CSS List Style Type Example
  3. CSS List Style Type Test
  1. CSS List Style Type Tutorial
  2. CSS List Style Type Example
  3. CSS List Style Type Test
  1. CSS List Style Type Tutorial
  2. CSS List Style Type Example
  3. CSS List Style Type Test
  1. CSS List Style Type Tutorial
  2. CSS List Style Type Example
  3. CSS List Style Type Test
  1. CSS List Style Type Tutorial
  2. CSS List Style Type Example
  3. CSS List Style Type Test

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test