How to style lists using 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 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type 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;
}

More css tutorials:

• The Flexbox Guide
• CSS Grid Tutorial
• CSS Variables (Custom Properties)
• Introduction to PostCSS
• The CSS margin property
• How to center an element with CSS
• CSS System Fonts
• How to print your HTML with style
• An introductory guide to CSS Transitions
• A CSS Animations Tutorial
• Introduction to CSS
• The CSS Guide
• How to setup Tailwind with PurgeCSS and PostCSS
• The Tailwind Cheat Sheet
• How to continuously rotate an image using CSS
• Making a table responsive using CSS
• How to debug CSS by bisecting
• CSS Selectors
• CSS Cascade
• CSS Specificity
• CSS Attribute Selectors
• CSS Colors
• CSS Units
• CSS url()
• CSS Typography
• The CSS Box Model
• The CSS position property
• CSS Media Queries and Responsive Design
• CSS Feature Queries
• CSS Transforms
• How to style lists using CSS
• CSS Vendor Prefixes
• CSS Inheritance
• CSS Pseudo Classes
• CSS Pseudo Elements
• Styling HTML Tables with CSS
• The CSS Display property
• The CSS calc() function
• CSS Borders
• Importing a CSS file using @import
• CSS Error Handling
• CSS Filters
• CSS Box Sizing
• CSS Backgrounds
• CSS Comments
• CSS Fonts
• CSS Padding
• The CSS float property and clearing
• CSS Normalizing
• The CSS z-index property
• How to disable text selection using CSS
• How to put an item at the bottom of its container using CSS
• How to invert colors using CSS
• Responsive pre tags in CSS
• Responsive YouTube Video Embeds
• What are good CSS Breakpoint values for Responsive Design?
• How to align center in flexbox