CSS Lists

Unordered vs Ordered Lists

Unordered lists (<ul>) display bullet points, while ordered lists (<ol>) show numbers or letters.

Apples
Bananas

Step One
Step Two

List Style Type

Customize bullets and numbers using list-style-type:

Disc (●)

ul { list-style-type: disc; }

Circle (○)

ul { list-style-type: circle; }

Square (■)

ul { list-style-type: square; }

Decimal
Example

ol { list-style-type: decimal; }

decimal-leading-zero
example

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

lower-roman
example

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

upper-roman
example

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

lower-alpha
example

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

upper-alpha
example

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

List Style Position

Defines if the bullet appears inside the list item's content box:

ul {
  list-style-position: inside;
}

Inside positioned bullet

Outside positioned bullet

Removing List Styling

Often used for navigation menus or layout elements:

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

No bullet item 1
No bullet item 2

Shorthand Property

Combine list properties in one line:

ul {
  list-style: square inside;
}

Circle inside

Square outside

Custom List Icons

Use a background image to control size for a custom list marker:

ul {
  list-style: none; /* remove default bullets */
}

ul li {
  background: url('https://cdn-icons-png.flaticon.com/512/32/32355.png') no-repeat left center;
  background-size: 32px 32px; /* adjust size here */
  padding-left: 34px; /* space for the icon */
}

Custom icon bullet 1

Practice Prompt

Try building the following lists:

Unordered list with square bullets and inside positioning
Ordered list with upper-roman numerals
List without bullets

<ul style={{ listStyleType: "square", listStylePosition: "inside" }}>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

<ol style={{ listStyleType: "upper-roman" }}>
  <li>Rome</li>
  <li>Greece</li>
</ol>

<ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
  <li>No bullet 1</li>
  <li>No bullet 2</li>
</ul>

You can copy and paste this code in your IDE to run!

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu