Property | Description |
---|---|
list-style | Sets all the properties for a list in one declaration |
list-style-image | 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 |
<html>
<head>
<title>List Style</title>
</head>
<body>
<ul style="list-style: inside circle;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
<ol style="list-style: outside upper-roman;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
</html>
<html>
<head>
<title>List Style Image </title>
</head>
<body>
<ul>
<li style="list-style-image: url(images/start.png);"> Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
<ol>
<li style="list-style-image: url(images/start.png);"> Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
</html>
<html>
<head>
<title>List Style Position </title>
</head>
<body>
<ul style="list-style-type:upper-roman; list-style-position:outside;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
<ul style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
<ol style="list-style-type:upper-alpha;list-style-position:outside;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
</html>
<html>
<head>
<title>List Style Type </title>
</head>
<body>
<ul style="list-style-type:circle;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
<ul style="list-style-type:square;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
</html>