Skip to main content
CSS is fun and cool and I like it.

List Style Recipes

Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a navigation menu. Not only are they an opportunity for styling, but they have accessibility implications. For example, the number of items in a list is announced in a screen reader to give some context to the list.

Let’s focus on styling lists here, mostly just ordered and unordered lists (with apologies for snubbing … Read article “List Style Recipes”



The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

ul {
  list-style: <list-style-type|| <list-style-position|| <list-style-image;

Here’s an example of the syntax:

ul {
  list-style: square outside none;

Which would be the same as the following longhand version:

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-typeRead article “list-style”