Styling Lists

You will control list markers, marker placement, and vertical spacing using CSS list properties.

What it is

Styling lists in CSS means changing how ul, ol, and li elements display their markers and content. The marker is the bullet, number, letter, or symbol generated by the browser. Its type is controlled by list-style-type, its placement by list-style-position, and the space around the list by margin and padding. Related terms include the list-style shorthand, nested lists, and the ::marker pseudo-element.

Why it matters

• It keeps bullets and numbers visually consistent across pages.
• It lets you remove default markers for navigation menus or card lists.
• It controls indentation so nested lists remain readable.
• It improves spacing between items without adding extra HTML.
• It preserves semantic list markup while changing appearance.

Syntax or steps

1. Select the list container, such as ul or ol.
2. Set list-style-type to choose a marker, or none to remove it.
3. Set list-style-position to inside or outside.
4. Use padding-left on the list to control indentation.
5. Use margin-bottom on li to space items vertically.

Example

/* Basic unordered list */
ul {
  list-style-type: square;
  list-style-position: inside;
  margin: 0;
  padding-left: 1rem;
}

li {
  margin-bottom: 6px;
}

/* Nested list */
ul ul {
  list-style-type: circle;
  padding-left: 1.5rem;
}

/* Ordered list */
ol {
  list-style-type: decimal;
  padding-left: 1.75rem;
}

ol li {
  margin-bottom: 4px;
}

/* Remove markers */
.no-bullets {
  list-style-type: none;
  padding-left: 0;
}

This CSS styles a normal list with square markers placed inside the item text. The margin: 0 removes extra outer space, while padding-left: 1rem keeps the list indented from the page edge. The li rule adds 6 pixels of space below each item. The nested rule changes inner bullets to circles and adds more indentation. The .no-bullets class removes markers and resets padding, which is useful for menus.

Common mistakes

• Removing markers but leaving default padding. Fix: set list-style-type: none and padding-left: 0.
• Using margin-left on every li for indentation. Fix: use padding-left on the list container for cleaner nested behavior.
• Choosing list-style-position: inside for long multi-line items. Fix: use outside when you want a hanging indent.
• Forgetting that ordered lists need different marker types. Fix: set list-style-type on ol separately from ul.

When to use it

The closest choice is between list-style-position: outside and inside.

Practice

Guided exercise: create a list with three items, set square markers inside, add 6 pixels of bottom margin, and indent the list by 1 rem. Expected result: each item begins with a square marker and has visible space below it.

Challenge: style a nested list so the outer list has no bullets and the inner list uses circle markers. Hint: use list-style-type: none on the outer ul, then target ul ul with list-style-type: circle and padding-left.

Quick check

Question: Which property controls where the marker appears relative to the list item text?

Answer: list-style-position, with values inside or outside.

Summary

CSS list styling separates marker type, marker position, and spacing. Use list-style-type and list-style-position for the marker, and padding-left plus margin-bottom for layout. This keeps semantic lists readable and visually controlled.