CSS Lists

css

In CSS, you can use the list-style property to control the appearance of lists (ordered or unordered). The list-style property is a shorthand property for the following individual list style properties:

  • list-style-type: specifies the type of marker (e.g., disc, circle, square) to use in the list.
  • list-style-position: specifies whether the marker should appear inside or outside the list item.
  • list-style-image: specifies an image to use as the marker.

Here’s an example of how you might use the list-style property to change the appearance of an unordered list:

ul {
    list-style: square inside;
}

This would change the marker for the list items in the unordered list to squares and position the squares inside the list items.

You can also use the individual list style properties to specify different values. For example:

ul {
    list-style-type: circle;
    list-style-position: outside;
    list-style-image: url(images/custom-marker.png);
}

This would change the marker for the list items in the unordered list to circles, position the circles outside the list items, and use the image custom-marker.png as the marker.

For ordered lists, you can use the list-style-type property to specify the type of numbering to use (e.g., decimal, lower-alpha, upper-roman).

Here’s an example of how you might use the list-style property to change the appearance of an ordered list:

ol {
    list-style: upper-roman inside;
}

This would change the numbering for the list items in the ordered list to upper-case Roman numerals and position the numerals inside the list items.