CSS Lists

HTML has two types of lists: unordered lists (<ul>) and ordered lists (<ol>). CSS provides properties to control the appearance of list markers (bullets and numbers), their position, and the ability to replace them with custom images. Lists are also the foundation of most navigation menus on the web.

Default List Appearance

By default, <ul> displays with filled circular bullets and <ol> displays with sequential numbers. Both have default padding on the left side provided by the browser.

CSS List Properties

1. list-style-type

Controls what kind of marker appears before each list item.

For Unordered Lists (ul)

ul.disc   { list-style-type: disc; }    /* Default — filled circle */
ul.circle { list-style-type: circle; }  /* Hollow circle */
ul.square { list-style-type: square; }  /* Filled square */
ul.none   { list-style-type: none; }    /* No marker */

For Ordered Lists (ol)

ol.decimal     { list-style-type: decimal; }      /* 1, 2, 3 — default */
ol.upper-alpha { list-style-type: upper-alpha; }  /* A, B, C */
ol.lower-alpha { list-style-type: lower-alpha; }  /* a, b, c */
ol.upper-roman { list-style-type: upper-roman; }  /* I, II, III */
ol.lower-roman { list-style-type: lower-roman; }  /* i, ii, iii */

2. list-style-position

Defines whether the list marker appears outside or inside the text block.

ul {
    list-style-position: outside;  /* Marker sits outside the text (default) */
}

ul.inside {
    list-style-position: inside;  /* Marker is part of the text flow */
}

With outside, the text aligns cleanly. With inside, the first line of text wraps around and aligns under the marker character.

3. list-style-image

Replaces the default bullet marker with a custom image.

ul {
    list-style-image: url("images/checkmark.png");
}

Controlling the image size through this property is limited. Using a background image on the <li> with list-style: none gives more control.

4. list-style Shorthand

ul {
    list-style: square inside;
}

/* Equivalent to: */
ul {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: none;
}

Removing Default List Styling

To remove all default browser list styling — commonly done when building navigation menus:

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

Styling a Navigation Menu with a List

Navigation menus are almost always built from <ul> and <li> elements with list markers removed and items displayed horizontally.

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;      /* Horizontal layout */
    gap: 5px;
}

nav ul li a {
    display: block;
    padding: 10px 18px;
    color: white;
    background-color: #2c3e50;
    text-decoration: none;
    border-radius: 4px;
}

nav ul li a:hover {
    background-color: #3498db;
}

Customizing List Items with CSS

ul.checklist {
    list-style: none;
    padding: 0;
}

ul.checklist li {
    padding: 8px 8px 8px 30px;
    position: relative;
    border-bottom: 1px solid #eee;
}

ul.checklist li::before {
    content: "✓";
    position: absolute;
    left: 8px;
    color: #27ae60;
    font-weight: bold;
}

This creates a custom checklist using a CSS-generated checkmark symbol before each item instead of the default bullet marker.

Summary

CSS list properties give full control over how list markers appear. list-style-type changes the marker symbol, list-style-position controls its alignment with text, and list-style-image enables custom image markers. Setting list-style: none with zeroed margins and padding is the foundation for building navigation menus. Custom markers can be added using CSS ::before pseudo-elements for creative and branded list designs.