Lists are very helpful in conveying a set of either numbered or bulleted points.
There are following CSS properties which can be used to control lists:
1. The list-style-type Allows you to control the shape or appearance of the marker.
2. The list-style-position Specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
3. The list-style-image Specifies an image for the marker rather than a bullet point or number.
4. The list-style Serves as shorthand for the preceding properties.
Example:
<html>
<head>
<style type='text/css'>
ul
{
list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
<li>jQuery</li>
<li>Json</li>
</ul>
</body>
</html>
<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
The list-style-position:
The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.
Property Values
Value Description
inside Indents the marker and the text. The bullets appear inside the content flow
outside Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default
Example:
<html>
<head>
<style type='text/css'>
ul
{
list-style-position:inside;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
<li>jQuery</li>
<li>Json</li>
</ul>
</body>
</html>
The list-style-image Property:
The list-style-image allows you to specify an image so that you can use your own bullet style.
Example:
<ul>
<li style="list-style-image: url(unsure.gif);">HTML</li>
<li>JavaScript</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<ol>
<li style="list-style-image: url(unsure.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
Example:
<html>
<head>
<style type='text/css'>
ul
{
list-style:square url("https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/unsure.gif");
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
<li>jQuery</li>
<li>Json</li>
</ul>
</body>
</html>