Learning Code

Lists

Both ordered and unordered lists can be customized to change from the default style.

List Style Type

Use list-style-type: to change the list marker (bullet, number or etc.) for both ordered (ol) and unordered lists (ul).

Unordered Lists

Unordered lists usually have markers such as:
  • square
  • circle
  • disc (the default)
ul {list-style-type: square;}

To remove the markers from an unordered list, set the value to none:
ul {list-style-type: none;}

Ordered Lists

By default, ol will display as a numbered list. The markers can be changed to a variety of options including (but not limited to) the following:

  1. upper-alpha
  2. lower-alpha
  3. upper-roman
  4. lower-roman
  5. decimal (the default)
ol {list-style-type: upper-alpha;}

You could potentially use alpha or numeric type list markers for an unordered list or use circle (or etc.) markers for an ordered list, but it's better to keep your HTML and CSS consistent.

List position

You can also adjust the spacing of the markers for either list type with list-style-position. The 2 values are:
  • inside - inside the text area
  • outside - outside the text area


ol {list-style-position: inside;}

Images as Markers

You can add an image to replace the list-style-type from the default bullet to the image of your choice. The image should be quite small:
ul {list-style-image: url('images/marker.gif');}

Can you use the Try-it Editor to try out these concepts?