Styling Lists with CSS

suggest change

There are three different properties for styling list-items: list-style-type, list-style-image, and list-style-position, which should be declared in that order. The default values are disc, outside, and none, respectively. Each property can be declared separately, or using the list-style shorthand property.

list-style-type defines the shape or type of bullet point used for each list-item.

Some of the acceptable values for list-style-type:

(For an exhaustive list, see the W3C specification wiki)

To use square bullet points for each list-item, for example, you would use the following property-value pair:

li {
    list-style-type: square;

The list-style-image property determines whether the list-item icon is set with an image, and accepts a value of none or a URL that points to an image.

li {
    list-style-image: url(images/bullet.png);

The list-style-position property defines where to position the list-item marker, and it accepts one of two values: “inside” or “outside”.

li {
  list-style-position: inside;

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents