Skip to content

How to style lists using CSS

Styling lists with CSS

Lists are a very important part of many web pages.

CSS can style them using several properties.

list-style-type is used to set a predefined marker to be used by the list:

li {
  list-style-type: square;

We have lots of possible values, which you can see here with examples of their appearance. Some of the most popular ones are disc, circle, square and none.

list-style-image is used to use a custom image as a marker, when a predefined marker is not appropriate:

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

list-style-position lets you add the marker outside (the default) or inside of the list content, in the flow of the page rather than outside of it

li {
  list-style-position: inside;

The list-style shorthand property lets us specify all those properties in the same line:

li {
  list-style: url(list-image.png) inside;
β†’ Download my free CSS Handbook!



You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about css: