CSS · Chapter 15 of 44

CSS Lists

CSS controls list appearance with list-style-type (bullet or number style), list-style-position, and list-style-image, or the list-style shorthand.

A very common pattern is list-style: none; to remove bullets when using <ul> for navigation menus.

Syntax

list-style: type position image;

Bullet and number styles

list-style-type can be disc, circle, square, decimal, or none, controlling the marker shown before each item.

list-style-image sets a custom marker image. Removing default markers with list-style: none; is standard when styling <ul> as a navigation bar.

Example 1 (css)

ul {
  list-style: none;
  padding: 0;
}
li {
  display: inline-block;
  margin-right: 15px;
}

Output

A horizontal navigation menu with no bullets

Removing list styling and using inline-block creates a common navbar layout.

💡 Note: Removing default ul padding/margin is often needed for precise layout control.