In HTML we have two tags <ul> and <ol> to represent text content in list. The list comes very useful when we want to show data in numbered and bullets points. In this tutorial, we will be discussing how to use the CSS properties to manipulate or control the type, position, and style of an HTML list. Here are some significant list properties which we will be covering in this tutorial.
| Properties: | Description: |
| list-style-type | It controls the appearance of the list marker. |
| list-style-position | If the list text is too long then it specifies whether to align the second line with the first line or start it with the marker. |
| list-style-image | It set image as a marker instead of numbered or bullets points. |
| list-style | It is a shorthand for all the above properties |
CSS list-style-type Property
The list-style-type property determines the appearance of the list bullets and number points. The values vary for an ordered list and unordered list elements. list-style-type property values for Unordered List :
- none for no bullets.
- disc for filled circle bullets.
- circle for empty circle.
- square for square bullets.
list-style-type property values for Ordered list:
| Value | Example |
| decimal | 1,2,3,4,5 |
| decimal-leading-zero | 01, 02, 03, 04, 05 |
| lower-alpha | a, b, c, d, e |
| upper-alpha | A, B, C, D, E |
| lower-roman | i, ii, iii, iv, v |
| upper-roman | I, II, III, IV, V |
Example
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul style = "list-style-type:square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
CSS list-style-position Property
The list-style-property deals with the long text, it determines whether to align the second line of a list text with the marker or with the first line itself.
list-style-position values
- none
- inside
- outside
Example
<html>
<head>
</head>
<body>
<ul style = "list-style-position:outside; ">
<li>HTML stands for HyperText Markup Langugae. It is a standared Languge for web-pages. It is not a programming language </li>
</ul>
<ol style = "list-style-position:inside";>
<li>HTML stands for HyperText Markup Langugae. It is a standared Languge for web-pages. It is not a programming language </li>
</ol>
</body>
</html>
CSS list-style-image Property
The list-style-image property specifies an image as a bullet marker. It accepts the image value using the url() function. If the browser fails to load the image then the default marker would be displayed.
Example:
<ol>
<li style="list-style-image: url(images/img.png);"> HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
CSS list-style Property
It is a shorthand property for all the other properties we have mentioned above. Using this single property we can set list-style-type, list-style-position and list-style-image using a single statement.
Syntax:
{
list-style : list-style-type list-style-position list-style-image;
}
Example:
<ol style = "list-style: square inside; url('images/bullet.png')">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Summary
- HTML has two lists tags <ol> and <ul>
- <ol> or ordered list use numbering as a marker
- <ul> list use bullets points as a marker.
- To change the appearance of the marker we can use the list-style-type property.
- To change the alignment of the list text we can use the list-style-position property.
- To set an image as a marker we can use the list-style-image property.