Introduction

This tutorial aims to guide you on how to style lists using Cascading Style Sheets (CSS). CSS is a stylesheet language used for describing the look and formatting of a document written in HTML.

By the end of this tutorial, you will learn how to:

• Apply CSS styles to unordered and ordered lists
• Customize bullet points and numbers in lists
• Add background color and borders to lists

Prerequisites:
Knowledge of basic HTML and CSS is required.

Step-by-Step Guide

CSS provides several properties that can be used to style lists. The list-style-type property is used to change the bullet point of an unordered list or the numbering system for an ordered list. The list-style-image property allows you to replace the list-item marker with an image. The list-style-position property specifies the position of the list-item marker.

Code Examples

1. Changing the bullet point of an unordered list

/* CSS */
ul {
  list-style-type: circle;
}

In the above example, the list-style-type: circle; changes the bullet points of the unordered list to circles.

1. Changing the numbering system of an ordered list

/* CSS */
ol {
  list-style-type: upper-roman;
}

In the above example, the list-style-type: upper-roman; changes the numbering system of the ordered list to uppercase Roman numerals.

1. Using an image as list items marker

/* CSS */
ul {
  list-style-image: url('marker.png');
}

In the above example, the list-style-image: url('marker.png'); replaces the bullet points with the specified image.

1. Changing the position of list-item markers

/* CSS */
ul {
  list-style-position: inside;
}

In the above example, the list-style-position: inside; sets the position of the list-item markers to inside.

Summary

In this tutorial, we've learned how to style lists using CSS. We've covered how to change the bullet points of an unordered list, the numbering system of an ordered list, how to use an image as the list items marker, and how to change the position of the list items marker.

Practice Exercises

1. Exercise 1: Create an unordered list and change the bullet points to squares.

Solution:

css /* CSS */ ul { list-style-type: square; }

1. Exercise 2: Create an ordered list and change the numbering system to lowercase alphabetical.

Solution:

css /* CSS */ ol { list-style-type: lower-alpha; }

1. Exercise 3: Create an unordered list and use an image as the list items marker.

Solution:

css /* CSS */ ul { list-style-image: url('marker.png'); }

To further practice, try combining different CSS properties to style lists. Experiment with different values and observe the changes.