CSS Lists

In HTML, lists are used to group related items together and are represented by the <ul> (unordered list) and <ol> (ordered list) elements. The list items are represented by the <li> element.

An unordered list is a list of items with bullet points, while an ordered list is a list of items with numbers or letters.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

You can also nest lists inside other lists by placing an <ul> or <ol> element inside a <li> element.

CSS list-style

The list-style-type property in CSS is used to specify the marker type for a list. It is used to style unordered lists <ul> and ordered lists <ol>.

The list-style-type property can be set to one of the following values:

  • disc (default value for unordered lists)
  • circle
  • square
  • decimal (default value for ordered lists)
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha

Example:

ul {
  list-style-type: square;
}
ol {
  list-style-type: upper-alpha;
}

This will make the bullet points for unordered lists as squares and for ordered lists, upper-case alphabets.

You can also set list-style-type property to none, to remove the bullet points from lists.

ul {
  list-style-type: none;
}

You can also set list-style-image property, to use an image as a bullet point, which can be set by providing the url of the image.

ul {
  list-style-image: url("image.png");
}

You can also use shorthand property list-style to combine all 3 properties list-style-type, list-style-image and list-style-position in one line.

ul {
  list-style: square url("image.png") inside;
}

You can use these properties to style the lists according to your needs.

CSS list-style-position

The list-style-position property in CSS is used to specify the position of the marker (bullet point or numbering) for a list. It can be used to style unordered lists <ul> and ordered lists <ol>.

The list-style-position property can be set to one of the following values:

  • inside (default value): The marker is placed inside the list item's content box
  • outside: The marker is placed outside the list item's content box

Example:

ul {
  list-style-position: outside;
}

This will make the bullet points for unordered lists to be outside the list item's content box.

If you want to remove the bullet points from the lists, you can use list-style-type property and set it to none and also set list-style-position to outside to remove the space left by bullet points.

ul {
  list-style-type: none;
  list-style-position: outside;
}

You can use this property to style the lists according to your needs and design requirements.

How to style lists with colors

There are several ways to style lists with colors in CSS. Here are a few examples:

Change the color of the bullet points:

ul {
  list-style-type: square;
  color: red;
}

This will make the bullet points for unordered lists red.

Change the background color of the list items:

li {
  background-color: yellow;
}

This will make the background color of all list items yellow.

Change the text color of the list items:

li {
  color: blue;
}

This will make the text color of all list items blue.

Change the background color of odd/even list items:

li:nth-child(odd) {
  background-color: #f5f5f5;
}

li:nth-child(even) {
  background-color: #f0f0f0;
}

This will give different background color for odd and even list items.

Change the background color of specific list items:

li:nth-child(3) {
  background-color: pink;
}

This will give background color pink for 3rd list item.

You can use these CSS selectors and properties to style the lists according to your design requirements.

Note: The above examples style all lists on the page. If you want to style specific lists, you can add a class to the <ul> or <ol> element and use that class in your CSS selectors.

<ul class="custom-list">
  <li>item 1</li>
  <li>item 2</li>
</ul>
.custom-list li {
  color: green;
}

This will style only the list items of the list with class custom-list to be green.

CSS Basics