How to style lists using CSS
FULL-STACK WEB DEVELOPMENT BOOTCAMP
2024 COHORT SIGNUPS END TOMORROW
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:
We have lots of possible values, which you can see here https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type with examples of their appearance. Some of the most popular ones are
list-style-image is used to use a custom image as a marker, when a predefined marker is not appropriate:
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
list-style shorthand property lets us specify all those properties in the same line:
list-style: url(list-image.png) inside;