CSS Lists:
The CSS list properties allow you to:
·
Set different list item markers for ordered lists
·
Set different list item markers for unordered lists
·
Set an image as the list item marker
List
In HTML, there are two types of
lists:
- unordered
lists (<ul>) - the list items are marked with bullets
- ordered
lists (<ol>) - the list items are marked with numbers or letters
With CSS, lists can be styled
further, and images can be used as the list item marker.
Different
List Item Markers
The type of list item marker is
specified with the
list-style-type property:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type:
circle;
}
ul.b {
list-style-type:
square;
}
ol.c {
list-style-type:
upper-roman;
}
ol.d {
list-style-type:
lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
</body>
</html>
An Image as The List Item Marker:
To specify an image as the list
item marker, use the
list-style-image property:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image:
url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ul>
</body>
</html>
List -
Shorthand property:
The
list-style property is a shorthand property. It is
used to set all the list properties in one declaration:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square
inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ul>
</body>
</html>
Comments
Post a Comment