Styling Lists with CSS

CSS provides properties to control list markers, positioning, and styling for ordered and unordered lists.

List Style Properties

list-style-type controls the marker style: disc, circle, square, decimal, etc.

list-style-position: outside (default) or inside.

list-style-image uses a custom image as the marker.

list-style shorthand combines all list properties.

Set list-style: none to remove markers completely.

/* List markers */
ul.disc {
  list-style-type: disc;
}

ul.circle {
  list-style-type: circle;
}

ol.decimal {
  list-style-type: decimal;
}

ol.roman {
  list-style-type: upper-roman;
}

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

/* Remove markers */
ul.none {
  list-style: none;
  padding-left: 0;
}