🔢 CSS Tutorial: list-style-type

📌 Introduction

The list-style-type property in CSS defines the marker (bullet, number, symbol) used for list items. It works with both ordered lists (<ol>) and unordered lists (<ul>). With this property, you can choose classic bullets, numbers, Roman numerals, Greek letters, or even remove the marker completely. It’s perfect for customizing list appearance in blogs, nav menus, feature sections, and more! ✨

🎯 Why Use list-style-type?

  • To control the style of bullets in unordered lists 🔵
  • To change numbering formats in ordered lists 🔢
  • To create unique list styles for UI or content sections ✨
  • To remove bullets completely for custom styling 🎨

✨ Syntax

Basic Syntax

selector {
  list-style-type: <type>;
}

🧩 Unordered List Types (UL)

1. disc (default)

disc Example

ul {
  list-style-type: disc;
}

2. circle

circle Example

ul {
  list-style-type: circle;
}

3. square

square Example

ul {
  list-style-type: square;
}

4. none (no bullets)

none Example

ul {
  list-style-type: none;
}

Note

Use none when applying your own custom icons using ::marker orli::before.

🧩 Ordered List Types (OL)

1. decimal (default)

decimal Example

ol {
  list-style-type: decimal;
}

2. decimal-leading-zero

decimal-leading-zero Example

ol {
  list-style-type: decimal-leading-zero;
}

3. upper-roman / lower-roman

Roman Examples

ol.upper {
  list-style-type: upper-roman;
}

ol.lower {
  list-style-type: lower-roman;
}

4. upper-alpha / lower-alpha

Alphabetical Examples

ol.alpha {
  list-style-type: upper-alpha;
}

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

5. Greek, Armenian, Georgian (Language-based)

Language-based Examples

ol.greek {
  list-style-type: lower-greek;
}

ol.armenian {
  list-style-type: armenian;
}

ol.georgian {
  list-style-type: georgian;
}

🔥 Practical Examples

1. Feature List with Square Bullets

Square Bullets

.features {
  list-style-type: square;
  padding-left: 20px;
}

2. Custom Styled Numbering

Roman Numbering

ol.terms {
  list-style-type: upper-roman;
  padding-left: 30px;
}

3. Removing Bullets for Custom Icons

Custom Icons

ul.icons {
  list-style-type: none;
}

ul.icons li::before {
  content: "✔️ ";
}

📊 Comparison Table

CategoryTypesDescription
Unordereddisc, circle, squareBullet variations
Ordereddecimal, roman, alphaNumbering styles
Specialarmenian, georgian, lower-greekCultural numbering systems
NonenoneRemoves marker entirely

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x260/eeeeee/000000&text=list-style-type+demo

>>“Lists are more than bullets — they’re a key part of readable, structured design.” ✨

🎉 Conclusion

The list-style-type property gives you complete control over how list markers appear. Whether you need simple bullets, Roman numerals, alphabetic markers, or no markers at all, this property helps you style lists beautifully and consistently. Use it alongside list-style-position and list-style-image for full control. 🚀