CSS Lists

HTML lists (<ul> and <ol>) are used to group related information. CSS provides properties that allow you to set different list item markers for ordered and unordered lists, or even use your own custom imagery.

---

List Style Type

The list-style-type property specifies the type of marker that appears next to each list item.

/* Example Syntax */
ul {
    list-style-type: circle;
}

ol {
    list-style-type: lower-alpha;
}

---

List Item Markers as Images

The list-style-image property allows you to replace the standard marker with a custom image of your choice.

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

---

List Style Position

The list-style-position property defines whether the list-item marker is inside or outside the content flow.

• outside (Default) — The marker is placed outside the list item.
• inside — The marker is part of the text, and wrapped lines appear under the marker.

ul {
    list-style-position: inside;
}

---

Removing Default Styling

A very common task is to remove the default bullets and padding, especially when creating navigation menus.

nav ul {
    list-style-type: none; /* Removes markers */
    margin: 0;             /* Removes default spacing */
    padding: 0;
}

---

List Shorthand

The list-style shorthand property allows you to set all list properties in one declaration.

/* list-style: type position image */
ul {
    list-style: square inside url('sqpurple.gif');
}

---

---