How to style a list with CSS

Style list with CSS

Lists are a very important part of many web pages.

CSS can use multiple properties to set styles.

list-style-typeUsed to set the predefined tags to be used in the list:

li {
  list-style-type: square;
}

We have many possible values, you can see herehttps://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-typeAn example of appearance is attached. Some of the most popular aredisc,circle,squarewithnone.

list-style-imageWhen the predefined mark is not suitable, it is used to use a custom image as a mark:

li {
  list-style-image: url(list-image.png);
}

list-style-positionLet you add tagsoutside(Default) orinsideContent in the content of the list, in the page flow rather than outside the page flow

li {
  list-style-position: inside;
}

Thislist-styleShorthand attributes allow us to specify all these attributes on the same line:

li {
  list-style: url(list-image.png) inside;
}

Download mine for freeCSS Manual


More CSS tutorials: