Styling Lists with CSS

Styling lists in CSS means changing the look and feel of HTML lists (<ul>, <ol>, <li>), such as the type of bullets, the style of numbering, the position of the bullets, or using custom images.

List properties & selectors in CSS are:

  • list-style
  • list-style-type
  • list-style-image
  • list-style-position
  • ::marker

list-style

list-style is a shorthand property that controls three properties at once:

1. list-style-type → type of marker (disc, number, roman, etc.)

2. list-style-position → whether the marker will be inside or outside the list-item text

3. list-style-image → custom image to use as marker

Default:

list-style: disc outside none;

list-style-type

This property decides what kind of marker (bullet/number) will be there.

Example:

list-style-type: circle; /* list style will be circle */

There are many values ​​available, they are considered group wise:

a) Basic Bullets

  • disc → Solid circle (default for <ul>)
  • circle → Hollow circle
  • square → Solid square
  • none → No marker will show

b) Numeric Styles

  • decimal → Normal numbers (1, 2, 3, …) (default for <ol>)
  • decimal-leading-zero → Numbers with leading zero (01, 02, 03, …)

c) Alphabetical Styles

  • lower-alpha / lower-latin → a, b, c, d, …
  • upper-alpha / upper-latin → A, B, C, D, …

d) Roman Numerals

  • lower-roman → i, ii, iii, iv,v,…
  • upper-roman → I, II, III, IV, V, …

list-style-position

This property tells where the marker will appear relative to the list-item text.

outside (default) → The marker is outside the text, and the text is properly aligned.

ul {
list-style-position: outside;
}

inside → The marker is inside the text. If the text breaks in 2 lines, the text is aligned with the marker.

ul {
list-style-position: inside;
}

Example:

<ul style="list-style-position: inside;">
<li>This is a very long line that will break in the second line.</li>
</ul>

list-style-image

This allows us to use a custom image as a marker.

  • none (default) → No image (only one type of marker will be displayed)
  • url(“path/to/image.png”) → Image will be made a marker

Example:

ul {
list-style-image: url("star.png");
}

If the image is not loaded, then list-style-type is used as a fallback.

Shorthand Usage

ul {
list-style: square inside url("star.png");
}

The order here is:

list-style-type (square)

list-style-position (inside)

list-style-image (url)

Order is not mandatory, but these 3 properties can be written together in shorthand.

Most important Questions

What is the function of the list-style-type property in CSS?

List-style-type controls the bullets or numbering of list items.

If you’re using ul (an unordered list), the default is bullets.

If you’re using ol (an ordered list), the default is numbering.

Example:

ul {
list-style-type: square; /* square bullet instead of the default disc */
}
ol {
list-style-type: upper-roman; /* Numbering will be converted to I, II, III... */
}

This property is useful if you want bullets or numbers in different styles.

What does list-style-position do?

This property determines whether the bullet or number appears inside or outside the list item:

inside: The text wraps around the bullet.

outside: The bullet appears outside the list item (default).

Example:

ul {
list-style-position: inside;
}

This is important for layout and readability, especially if the list text spans multiple lines.

When and how is list-style-image used?

List-style-image allows you to use a custom image in place of a bullet.

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

If your design requires custom bullets, this property is a must. It’s a logical alternative to the default bullets.

How does the list-style shorthand work?

List-style shorthand combines three properties: list-style-type, list-style-position, and list-style-image.

ul {
list-style: square inside url('bullet.png');
}

If you need to set three things at once, the shorthand is a fast and clean way.

How to create inline lists?

If we want to display li horizontally, we use display: inline or inline-block:

ul {
list-style: none; /* remove bullets */
}
li {
display: inline;
margin-right: 10px;
}

Displaying list items horizontally is a common requirement in menu bars and navbars.

How do you style nested lists?

A nested list means a list within a list. It inherits from the parent, but can also be styled differently:

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

If you have a complex menu or content hierarchy, it’s important to control the nested list’s style separately.

What is the marker selector and when is it used?

The ::marker pseudo-element lets you style bullets or numbers (by color, font-size, etc.):

li::marker {
color: red;
font-size: 20px;
}

Styling bullets used to be difficult, but now in modern CSS, ::marker is an easy solution.

How do you completely remove bullets from a list?

list-style: none; or list-style-type: none; removes bullets.

Example:

ul {
list-style: none;
padding: 0;
margin: 0;
}

If you want custom icons or a pure text layout, removing bullets is essential.

How to design a list for accessibility?

Use ul and ol correctly.

Set list style, position, and padding so that screen readers can easily read them.

Maintain proper hierarchy in nested lists.

Structuring content logically is essential for accessibility. This is important for both UX and SEO.

✅Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel
✕

CSS

Scroll to Top