There are three types of lists in HTML.
With CSS we can style them in different ways.
You use the list-style-type
property to set the style of marker for a list.
The allowed values for this property is listed as follows.
The following shows the list-style-type property in use.
<!--from w w w . j a v a 2 s .c o m-->
<html>
<head>
<style rel="stylesheet" type="text/css">
li.a {
list-style-type: none;
}
li.b {
list-style-type: disc;
}
li.c {
list-style-type: circle;
}
li.d {
list-style-type: square;
}
li.e {
list-style-type: decimal;
}
li.f {
list-style-type: lower-alpha;
}
li.g {
list-style-type: upper-alpha;
}
li.h {
list-style-type: lower-roman;
}
li.i {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ul>
<li class="a">Point one</li>
<li class="b">Point two</li>
<li class="c">Point three</li>
<li class="d">Point four</li>
<li class="e">Point five</li>
<li class="f">Point six</li>
<li class="g">Point seven</li>
<li class="h">Point eight</li>
<li class="i">Point nine</li>
</ul>
</body>
</html>
You can apply this property to entire lists or individual list items.
You can use an image as the marker through the list-style-image property.
The following code uses an Image As a List Marker.
<!DOCTYPE HTML>
<html>
<head>
<style>
ul {<!--from ww w. j av a2s . c o m-->
list-style-image: url('http://www.java2s.com/style/download.png');
}
</style>
</head>
<body>
<ul>
<li>XML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Java</li>
<li>SQL</li>
<li>HTML</li>
</ul>
</body>
</html>
You can specify the position of the marker in relation to the li element's content box using the list-style-position property.
The allowed values are inside (the marker is inside the content box) and outside (the marker is outside the content box).
The following code shows the list-style-position property and its values in use.
<!DOCTYPE HTML>
<html>
<head>
<style>
li.inside {<!-- w w w. j av a2 s. c om-->
list-style-position: inside;
}
li.outside {
list-style-position: outside;
}
li {
background-color: lightgray;
}
</style>
</head>
<body>
<ul>
These are the inside items:
<li class="inside">A</li>
<li class="inside">B</li>
<li class="inside">C</li>
These are the outside items:
<li class="outside">D</li>
<li class="outside">E</li>
<li class="outside">F</li>
</ul>
</body>
</html>
list-style is the shorthand property to set all list characteristics.
The format for the list-style shorthand property is as follows:
list-style: <list-style-type> <list-style-position> <list-style-image>
The following code shows how to use shorthand list style property.
<html>
<head>
<style type='text/css'>
li {<!--from w w w .j a v a 2s . c o m-->
background: mistyrose;
}
li#arrow {
list-style: square url('arrow.png') outside;
}
li#arrow-inside {
list-style: url('arrow.png') inside;
}
li#marker-inside {
list-style: square inside;
}
li#marker-image {
list-style: square url('arrow.png');
}
li#arrow-only {
list-style: url('arrow.png');
}
li#marker {
list-style: circle;
}
li#position {
list-style: inside;
}
</style>
</head>
<body>
<ul>
<li id='arrow'>All three styles can be provided.</li>
<li id='arrow-inside'>The image and the position.</li>
<li id='marker-inside'>The marker and the position.</li>
<li id='marker-image'>The marker and the image.</li>
<li id='arrow-only'>Just the image.</li>
<li id='marker'>Just the marker.</li>
<li id='position'>Just the position.</li>
</ul>
</body>
</html>
Property | Description | CSS |
---|---|---|
line-height | Sets the line height | 1 |
list-style-image | Set an image as the list-item marker | 1 |
list-style-position | Set list-item markers to be inside or outside | 1 |
list-style-type | Set the type of list-item marker | 1 |
list-style | Sets list properties in one declaration | 1 |