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.

Example


Try </>

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.

  • Ordered lists (ol)
  • Unordered lists (ul)

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.

TagsDescription
none
no item markers for list items.
{list-style-type:none;}
</>
upper-roman
defines upper-roman list item markers. For example, I,II,III,IV....... is the list of upper-roman item markers.
{list-style-type:upper-roman;}
</>
lower-roman
defines lower-roman list item markers such as i,ii,iii,iv.....is a list of lower-roman markers.
{list-style-type:lower-roman;}
</>
upper-alpha
upper-alpha means the capital letters as the list item markers i.e. A,B,C,D......
{list-style-type:upper-alpha;}
</>
lower-alpha
lower-alpha represents lower case alphabets as the list item markers i.e. a,b,c,d.....
{list-style-type:lower-alpha;}
</>

unordered lists

The following are the possible values of list-style-type for the ordered lists.

TagsDescription
square
defines square shape list item markers.
{list-style-type:square;}
</>
circle
circle shape type list item markers are defined.
{list-style-type:circle;}
</>
bullets
bullets are the list item markers. This is the default value of list-style type.
{list-style-type:bullets;}
</>

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;

Try </>


Was this article helpful?

 

Email:

Message: