CSS Lists
Lists play an important role in presenting the information in more elegant way rather than using simple paragraphs. Lists represent the important points of a huge topic.
Lists are mostly used to make a navigation bar. Then we use navigation bar to navigate other pages.
There are two important types of lists.
In the following section, we will discuss how to design a list.
list-style-type
This property defines the type of list item markers for both ordered and unordered lists.
ordered lists
The following are the possible values of list-style-type for the ordered lists.
| Tags | Description |
|---|---|
| none | |
| no item markers for list items. | |
| |
| upper-roman | |
| defines upper-roman list item markers. For example, I,II,III,IV....... is the list of upper-roman item markers. | |
| |
| lower-roman | |
| defines lower-roman list item markers such as i,ii,iii,iv.....is a list of lower-roman markers. | |
| |
| upper-alpha | |
| upper-alpha means the capital letters as the list item markers i.e. A,B,C,D...... | |
| |
| lower-alpha | |
| lower-alpha represents lower case alphabets as the list item markers i.e. a,b,c,d..... | |
|
unordered lists
The following are the possible values of list-style-type for the ordered lists.
| Tags | Description |
|---|---|
| square | |
| defines square shape list item markers. | |
| |
| circle | |
| circle shape type list item markers are defined. | |
| |
| bullets | |
| bullets are the list item markers. This is the default value of list-style type. | |
|
list-style-image
It represents the image as the list item markers instead of the bullets.
Example
<style>
ul{list-style-image:url("/images/codingb-16x16.png");}
</style>
Try </>
list-style-position
It defines the position of the item markers. See the simple examples to understand each value of list-style-type.
Example
- The position of this list is inside. The position of this list is inside.
- The position of this list item is inside. The position of this list is inside.
list-style-position:inside;
- The position of this list is outside. The position of this list is outside.
- The position of this list item is outside. The position of this list is outside.
list-style-position:outside;
Next Previous
Was this article helpful?
