Styling Lists

Styling Lists

Turn plain lists into pretty menus.

list-style-type

Change the bullet/number style:

ul {
  list-style-type: disc;       /* default */
  list-style-type: circle;
  list-style-type: square;
  list-style-type: none;       /* no bullet */
}
ol {
  list-style-type: decimal;    /* 1. 2. 3. */
  list-style-type: upper-roman;/* I. II. III. */
}

list-style-image

Use a picture as the bullet:

ul {
  list-style-image: url('bullet.png');
}

list-style-position

Inside or outside the box?

ul {
  list-style-position: inside;   /* bullets inside the block */
  list-style-position: outside;  /* default: outside */
}

The shorthand

list-style: type position image (any order):

ul {
  list-style: square inside;
}

Respect markers

Remove bullets but keep layout with list-style-type: none + custom padding:

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Markers color

Bullet color inherits color. To color bullets differently, style ::marker (explained in the pseudo-elements lesson)!

TL;DR

• list-style-type: square, disc, decimal, roman, none.
• list-style-image: url() bullet.
• list-style-position: inside/outside.
• list-style shorthand.
• Nav bars usually set it to none.