How to Style Lists with CSS

HTML lists can have a number of different styles applied using CSS. Here are some of the commonly used ones.

List Style Type

Determines what the bullet looks like. For info on the possible values see the list-style-type page.

List Style Image

For more information on using images for your bullet points, see list-style-image.

List Style Position

Determines whether the bullet is located inside the list's containing box or outside. For more info, see list-style-position.

List Style

The list-style property is shorthand for setting the list properties.

Unstyled Lists

By default, most browsers style lists in a certain way. For example, most lists have a bullet point or other list marker for each item. Lists also typically have padding and margin applied.

However, you might not always want lists to appear this way. In fact, it's very common for developers to use unstyled lists. Unstyled lists are those that have had any padding, margin, and list marker removed.

Unstyled lists are often used in website navigation, and other places where any list marker, padding, and margins, would just get in the way.

Here's an example of an unstyled list:

Inline Lists

You can take it a step further and turn the unstyled list into an inline list.

You can do this by setting display: inline-block; against the li elements.