How to Change List Style in HTML

Use the CSS list-style-type property when you want to change how bullets or numbers look in an HTML list. This helps you match the list style to your page design while keeping the structure clean.

What you’ll build or solve

You’ll learn how to change bullet and number styles for HTML lists using CSS. You’ll also know when to style unordered lists, ordered lists, or remove markers completely.

When this approach works best

This approach is the right choice when the default bullets or numbers do not match the design or purpose of your list.

Common real-world scenarios include:

• Changing bullets from discs to squares or circles
• Switching numbered lists to letters or Roman numerals
• Styling navigation menus without bullets
• Matching portfolio or landing page designs

This is a bad idea when the default list style already communicates the content clearly and the design does not need customization.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Add list-style-type to the list

Apply list-style-type to the <ul> or <ol> element.

<ul class="skills">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<style>
  .skills {
    list-style-type: square;
  }
</style>

For numbered lists, switch to another supported marker style.

<ol class="steps">
  <li>Open the editor</li>
  <li>Create the file</li>
  <li>Save the page</li>
</ol>

<style>
  .steps {
    list-style-type: upper-roman;
  }
</style>

What to look for:

• disc, circle, and square work well for bullet lists
• decimal, lower-alpha, and upper-roman work well for numbered lists
• Use none to remove bullets or numbers
• Apply the style to the list container, not individual <li> items
• Keep the correct list structure with <ul> or <ol>

Examples you can copy

Square bullets

<ul style="list-style-type: square;">
  <li>Responsive design</li>
  <li>Clean code</li>
  <li>Fast loading</li>
</ul>

Roman numerals

<ol style="list-style-type: upper-roman;">
  <li>Setup</li>
  <li>Build</li>
  <li>Launch</li>
</ol>

Remove bullets for navigation

<ul style="list-style-type: none;">
  <li>Home</li>
  <li>Courses</li>
  <li>Pricing</li>
</ul>

Common mistakes and how to fix them

Mistake 1: Applying the style to <li> instead of the list

What the reader might do:

<li style="list-style-type: square;">HTML</li>

Why it breaks: the list marker is controlled by the parent list container, so styling one item often gives inconsistent results.

Corrected approach:

<ul style="list-style-type: square;">
  <li>HTML</li>
</ul>

Mistake 2: Removing bullets without adjusting spacing

What the reader might do:

<ul style="list-style-type: none;">
  <li>Home</li>
  <li>Pricing</li>
</ul>

Why it breaks: the left padding may still remain, which can make the alignment feel off.

Corrected approach:

<ul style="list-style-type: none; padding-left: 0;">
  <li>Home</li>
  <li>Pricing</li>
</ul>

Mistake 3: Using an ordered style on an unordered list by accident

What the reader might do:

<ul style="list-style-type: upper-roman;">
  <li>HTML</li>
  <li>CSS</li>
</ul>

Why it breaks: Roman numerals imply sequence, which may confuse readers if the order does not matter.

Corrected approach:

<ol style="list-style-type: upper-roman;">
  <li>HTML</li>
  <li>CSS</li>
</ol>

Troubleshooting

If the marker style does not change, confirm the CSS selector targets the <ul> or <ol> element.

If bullets disappear but spacing stays, reset padding-left to 0.

If the list still shows default markers, check whether another CSS rule overrides list-style-type.

If the list becomes hard to scan, switch back to a simpler bullet or numbering style.

Quick recap

• Use list-style-type to change bullets or numbers
• Apply the style to the <ul> or <ol>
• Use bullet styles like square and circle
• Use ordered styles like lower-alpha and upper-roman
• Use none to remove markers completely