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 - the list items are marked with bullets
- ordered lists - the list items are marked with numbers or letters
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>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:
Syntax:
UL
{
list-style-image: URL ('sqpurple.gif');
}
{
list-style-image: URL ('sqpurple.gif');
}
No comments:
Post a Comment