CSS Lists

0 3511

The list-style-type property is used for the shape or style of bullet point in the case of unordered lists and the style of numbering characters in ordered lists.

type-images: Specifies an image as the list-item marker

List-style-position: Specifies if the list-item markers should appear inside or outside the content flow

list-style-type: Specifies the type of list-item marker

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">

</style>
</head>
<body>
<h2> CSS list </h2>
<h3> List-style-type </h3>
<ul style="list-style-type:circle">
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
</ul>
<h3> List-style-images </h3>
<ul>
<li style="list-style-image:url(img.png);"> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
</ul>
<h3> List-style-position </h3>
<ul style="list-style-position:inside;">
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
<li> lorem ipsum </li>
</ul>

</body>
</html>