CSS List

There are two types of lists namely, ordered lists and unordered lists. By using CSS properties, you can change the look and feel of your lists. We will discuss these properties of lists here.

Set unordered list style

The list-style-type property allows to set the style of a list. The unordered list can have one of these styles:
circle: The bullet will be a circle.
square: The bullet will be a square.
disc: The bullet will be the shape of a disc. It is the default bullet.
none: There will be no bullet. Example:

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc"><li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
</body>
</html>

Output:

Coffee
Tea
Coke
Coffee
Tea
Coke
Coffee
Tea
Coke
Coffee
Tea
Coke

Set ordered list style

You can set the style of your ordered list by using list-style-type property. Following are the styles that an ordered list can have:
decimal: The bullet is a number.
decimal-leading-zero: The bullet is a number having zeros in the beginning (e.r. 01, 02, 03, etc.).
lower-roman: The bullet is lower-roman (e.g. i, ii, iii, iv, v, etc.).
upper-roman: The bullet is upper-roman (e.g. I, II, III, IV, V, etc.).
lower-alpha: The bullet is lower-alpha (e.g. a, b, c, d, e, etc.).
upper-alpha: The bullet is upper-alpha (e.g. A, B, C, D, E, etc.).
lower-greek: The bullet is lower-greek (e.g. alpha, beta, gamma, etc.).
lower-latin: The bullet is lower-latin (e.g. a, b, c, d, e, etc.).
upper-latin: The bullet is upper-latin (e.g. A, B, C, D, E, etc.).
hebrew: The bullet is traditional Hebrew numbering.
armenian: The bullet is traditional Armenian numbering.
georgian: The bullet is traditional Georgian numbering (e.g. an, ban, gan, etc.).
cjk-ideographic: The bullet is plain ideographic numbers.
hiragana: The bullet is a, i, u, e, o, ka, ki, etc.
katakana: The bullet is A, I, U, E, O, KA, KI, etc.
hiragana-iroha: The bullet is i, ro, ha, ni, ho, he, to, etc.
katakana-iroha: The bullet is I, RO, HA, NI, HO, HE, TO, etc.
Example:

<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>

<body>
<ol class="decimal">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ol>
<ol class="lroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ol>
<ol class="uroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ol>
<ol class="lalpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ol>
<ol class="ualpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ol>
</body>
</html>

Output:

Coffee
Tea
Coke
Coffee
Tea
Coke
Coffee
Tea
Coke
Coffee
Tea
Coke
Coffee
Tea
Coke

Set image as list style

Image can also be used as a list style. You can use an image as a bullet. list-image-style property enables this.
Example:

<html>
<head>
<style type="text/css">
ul.image {list-style-image: url('images/moon.jpg')}
</style>
</head>

<body>
<ul class="image">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
</body>
</html>

Output:

Coffee
Tea
Coke

Set list position

The position of the list can be set by using list-style-position. There can be two possible values, inside or outside. Inside value indents the list. Outside value is the default value of the list.
Example:

<html>
<head>
<style type="text/css">
ul.inside {list-style-position: inside}
ul.outside {list-style-position: outside}
</style>
</head>

<body>
<ul class="inside"><li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
<ul class="outside"><li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
</body>
</html>

Output:

Coffee
Tea
Coke
Coffee
Tea
Coke

Specify all properties in a single command

By using list-style property, all the properties can be specified in a single command.
Example:

<html>
<head>
<style type="text/css">
ul.all {list-style: square inside}
</style>
</head>

<body>
<ul class="all">
<li>Coffee</li>
<li>Tea</li>
<li>Coke</li>
</ul>
</body>
</html>

Coffee
Tea
Coke

CSS Tutorial

CSS List

Set unordered list style

Set ordered list style

Set image as list style

Set list position

Specify all properties in a single command

'w3reference : Learn by examples ... Advanced to beginner's tutorials ...'