JavaScript Tutorial

CSS List

Lists in HTML can be styled using CSS to enhance their appearance and layout. There are two main types of lists in HTML: unordered lists (<ul>) and ordered lists (<ol>). 

CSS properties allow us to:

  • Set the distance between the text and the marker in the list.
  • Specify an image for the marker instead of using the number or bullet point.
  • Control the marker's appearance and shape.
  • Place the marker outside or inside the box that contains the list of items.
  • Set the background colors to list items and lists.

Note:- The list also includes the default padding and margin. To remove this, we need to add padding:0 and margin:0 to <ol> and <ul>.

Here are some common CSS properties used to style lists:

The list-style-type property

This property is responsible for controlling the appearance and shape of the marker.

It allows us to change the default list type of marker to any other type such as Roman numerals, squares, circles, Latin letters, and many others.

By default, the ordered list items are numbered with Arabic numerals (1, 2, 3, etc.), and the items in an unordered list are marked with round bullets (•). If we set its value to none, it will remove the default markers/bullets.

Input:-

 

Output:-

 

The list-style-position property

It represents whether the appearance of the marker is inside or outside of the box containing the bullet points. It includes two values:-

  • inside: It represents that the bullet points will be in the list item. In this, if the text goes on the second line, then the text will be wrapped under the marker.
  • outside: It is the default value and represents that the bullet points will be outside the list item. It can also make our ordinary text links look like buttons using CSS. To do this we need to utilize a few more CSS properties such as color, background-color, border, padding, margin, etc.

Input:-

 

Output:-

 

The list-style-image property

Using this property, we can set the image bullets. Its syntax is similar to the background-image property. If it does not find the corresponding image, the default bullets will be used.

Input:-

 

Output:-

 

The list-style property

It is the shorthand property that is used to set all list properties in one expression. The order of the values of this property is type, position, and image. But if any property value is missing in it, then the default value will be inserted.

Input:-

 

Output:-

 

Styling Lists with colors

To make the lists more attractive and interesting, we can style lists with colors. The addition of anything to the <ul> or <ol> tag will affect the entire list, whereas the addition to the individual <li> tag will affect the items of the corresponding list only.

Input:-

 

Output:-

 


Go back to Previous Course