CSS

🎯 CSS list-style-type Property

The CSS list-style-type property is used to define how list items appear in HTML. It controls the marker style of <ul> and <ol> elements such as bullets, numbers, letters, or symbols.

In simple terms, it changes the appearance of list markers.

🧩 list-style-type Values (With Examples)

Below are the most commonly used values of the list-style-type property with examples.

1️⃣ disc (Default)

Displays a filled circle. This is the default style for unordered lists.

CSS


ul {
  list-style-type: disc;
}

Result: ● Bullet points

2️⃣ circle

Displays hollow circle bullets.

CSS


ul {
  list-style-type: circle;
}

Result: ○ Circle bullets

3️⃣ square

Displays square-shaped bullets.

CSS


ul {
  list-style-type: square;
}

Result: ■ Square bullets

4️⃣ decimal

Displays numbers in a standard ordered list format.

CSS


ul {
  list-style-type: decimal;
}

Result: 1, 2, 3, 4...

5️⃣ decimal-leading-zero

Adds a leading zero to single-digit numbers.

CSS


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

Result: 01, 02, 03...

6️⃣ lower-alpha

Displays lowercase letters.

CSS


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

Result: a, b, c, d...

7️⃣ upper-alpha

Displays uppercase letters.

CSS


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

Result: A, B, C, D...

8️⃣ lower-roman

Displays lowercase Roman numerals.

CSS


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

Result: i, ii, iii, iv...

9️⃣ upper-roman

Displays uppercase Roman numerals.

CSS


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

Result: I, II, III, IV...

🔟 none

Removes all list markers.

CSS


ul {
  list-style-type: none;
}

Result: No bullets or numbers

⚙️ Special Values

These values control inheritance and default behavior:

initial → Resets to default browser style
inherit → Takes value from parent element

🧪 Practical Example

Here are different list styles used in real projects:

CSS


ul.shop {
  list-style-type: square;
}

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

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

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

This allows you to create visually different list structures for better UI design.

🧠 Summary
list-style-type controls list markers
Works with both <ul> and <ol>
Supports bullets, numbers, letters, and Roman numerals
Improves UI/UX and list readability

CSS font-face

CSS list-style-position

CSS

CSS