Loading...

CSS Lists

HTML gives you ul and ol. CSS decides how those lists look — round bullets, squares, numbers, letters, or no marker at all when you build a navigation menu.

A list-style toolkit

📊 List styles at a glance

Property Everyday job
list-style-type Marker shape or numbering style (disc, square, decimal…)
list-style-position Marker inside or outside the content box
list-style-image Use an image as the marker
list-style Shorthand for type, position, and image
list-style: none Remove markers (common for nav menus)

Markers belong to the list item, but you usually set list styles on ul or ol so every li inherits the same look.

Bullet types

Unordered lists often start with disc. Switch to circle or square when the design needs a quieter or sharper mark.

Bullet marker types

css
CSS Code 
ul.features {
list-style-type: square;
}

ul.notes {
list-style-type: circle;
}

Numbered and lettered lists

Ordered lists use numbering styles. decimal is the everyday choice; lower-alpha or upper-roman fit outlines and legal-style steps.

Ordered list types

css
CSS Code 
ol.steps {
list-style-type: decimal;
}

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

Marker position — inside or outside

list-style-position: outside (the usual default) hangs the marker in the margin. inside tucks it into the text flow — useful in tight cards.

Markers inside the flow

css
CSS Code 
ul.card-list {
list-style-position: inside;
padding-left: 0;
}

Remove markers for menus

Navigation lists rarely want bullets. list-style: none clears them — then add your own spacing with padding/margin as needed.

Clean nav list

css
CSS Code 
nav ul {
list-style: none;
margin: 0;
padding: 0;
}

Image markers and shorthand

A small image can replace the bullet. Prefer tiny assets. The list-style shorthand can set type, position, and image in one line.

Image marker + shorthand

css
CSS Code 
ul.custom {
list-style: square outside none;
}

ul.icons {
list-style-image: url("/icons/check.svg");
}

A calm list habit

Pick one clear marker style per list, keep image markers tiny, and when you use none for menus, reset padding so items align cleanly.

Readable article list

css
CSS Code 
article ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}

Try it yourself

  1. Change a ul to list-style-type: square.
  2. Style an ol with lower-alpha.
  3. Set list-style-position: inside on a short card list.
  4. Strip bullets from a nav ul with list-style: none and zero padding.
  5. Try a tiny list-style-image, then fall back to a type if the image fails.

Common mistakes

  • Expecting color on li alone to restyle complex custom markers everywhere
  • Using list-style: none but leaving large default padding that looks broken
  • Huge list-style-image files that dominate the line
  • Numbering a ul with CSS instead of using semantic ol when order matters
  • Mixing this lesson with link hover/visited states (previous session)

Summary

  • list-style-type chooses bullets or numbering styles
  • list-style-position places markers inside or outside
  • list-style: none clears markers for menus
  • list-style-image and the list-style shorthand add extras
  • Keep markers calm and padding intentional after removing bullets

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 31 of 35
Css Tutorial