The CSS List property allows you to set different list item markers for ordered and unordered list. In HTML, there are two kinds of list, unordered list and ordered list. With CSS, it can be styled further and images can be used as lists.
List Style
The list-style property is used to set all list styles in one declaration. The properties are in the order: list-style-type, list-style-position, list-style-image.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style:square url('square.gif');
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>
List Style Image
The list-style-image property replaces the list-item marker with an image.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-image:url('square.gif');
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>
List Style Position
The list-style-position property is used to specify if the list item markers should appear inside or outside of the content flow.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-position:inside; }
ul.b {list-style-position:outside; }
</style>
</head>
<body>
<p>The following list has the list-style-position inside:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<p>The following list has the list-style-position outside:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>
List Style Type
The list-style-type property is used to specify the type of list-item in a list.
For example:
<!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>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
</body>
</html>
0 comments:
Post a Comment