Learn about CSS Lists with example

CSS Lists are used to style and format HTML lists, such as ordered lists (ol) and unordered lists (ul). With CSS, you can change the appearance of list items, list markers (the bullets or numbers), and adjust the spacing between list items.

Here's how you can use CSS to style lists:

1. Basic CSS for Lists: To target and style list elements, you can use the following CSS selectors:

• ul: Targets unordered lists (bullet points).
• ol: Targets ordered lists (numbered points).
• li: Targets list items within both unordered and ordered lists.

Example CSS:

/* Remove default list styles */

ul, ol {

  list-style: none;

}

/* Add custom bullet points for unordered lists */

ul {

  list-style-type: square;

}

/* Change numbers to Roman numerals for ordered lists */

ol {

  list-style-type: upper-roman;

}

/* Style list items with padding and margin */

li {

  margin-bottom: 5px;

  padding-left: 20px;

}

2. Using Images as List Markers: Instead of the default bullet points or numbers, you can use images as custom list markers.

HTML:

<ul class="custom-list">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>

 

CSS

/* Use an image as a bullet point for the list */

.custom-list {

  list-style-image: url('custom-bullet.png');

}

 

3. Nested Lists: You can also have nested lists with CSS styling.

HTML:

<ol class="outer-list">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>

    Item 3

    <ul class="inner-list">

      <li>Nested Item 1</li>

      <li>Nested Item 2</li>

    </ul>

  </li>

</ol>

 

CSS:

/* Style the outer ordered list */

.outer-list {

  list-style-type: decimal;

}

/* Style the nested unordered list */

.inner-list {

  list-style-type: circle;

}

In HTML, there is no fundamental difference between an HTML list and a CSS list. When we talk about "HTML lists" and "CSS lists," we are usually referring to the same thing: the way lists are structured and displayed on a web page using both HTML and CSS together.

HTML provides two main types of lists: unordered lists (ul) and ordered lists (ol). Unordered lists are used for bullet-point lists, while ordered lists are used for lists with sequential numbers or letters.

Here's an example of an unordered list in HTML:

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>

 

Output

• Item 1
• Item 2
• Item 3

And here's an example of an ordered list in HTML:

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ol>

 

Output

1. Item 1
2. Item 2
3. Item 3

CSS (Cascading Style Sheets) is used to control the visual appearance of the HTML elements, including lists. With CSS, we can change the bullet points or numbers' style, adjust the spacing between list items, add custom images as list markers, and much more.

Here's a CSS example that removes default list styles and adds custom bullet points to an unordered list:

ul {

  list-style: none;

}

ul li::before {

  content: "\2022"; /* Unicode character for bullet point */

  margin-right: 10px;

}