CSS Lists

CSS Lists

CSS list properties allow you to control the appearance of ordered and unordered lists. You can remove default markers, change list styles, and fully customize list layouts.

Styling Lists

By default, lists have bullets or numbers. These can be changed or removed using CSS.

ul {
  list-style-type: square;
}

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

Common list-style-type values include disc, circle, square, decimal, and none.

Removing Default List Styles

To create custom layouts or navigation menus, default list styles are often removed.

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

List Position

The list-style-position property defines whether the marker appears inside or outside the content box.

ul.outside {
  list-style-position: outside;
}

ul.inside {
  list-style-position: inside;
}

Custom List Spacing

Spacing between list items can be adjusted using margin or padding.

li {
  padding: 6px 0;
}

List Shorthand

The list-style shorthand combines type, position, and image.

ul {
  list-style: square inside;
}

Code Challenge

Goal: Style the list below to look like a simple menu.

HTML:

<ul class="menu">
  <li>Home</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

Task:

• Remove default list bullets
• Add spacing between items
• Add a border around each item
• Round the corners slightly

Try a Solution:

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 300px;
}

.menu li {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 8px;
}

What’s Next?

Next, you will learn how to style tables using CSS.