CSS Lists

By /

In this chapter, you will learn how to style HTML lists using CSS. You can change the list markers, remove bullets, change their position, and create cleaner-looking lists for your web pages. Let’s look at the most commonly used CSS lists properties step by step.

What are CSS Lists?

HTML provides two common types of lists:

  • Unordered lists use <ul> and usually show bullet points.
  • Ordered lists use <ol> and usually show numbers.

For example:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

By default, an unordered list displays bullet points before each list item. CSS allows you to change how these markers look.

1. List Style Type

The list-style-type property is used to change the marker of a list.

Unordered List Markers

Some commonly used values are:

list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: none;

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS List Style Type</title>

  <style>
    .circle {
      list-style-type: circle;
    }

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

<body>

  <h2>Circle List</h2>

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

  <h2>Square List</h2>

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

</body>
</html>

The first list will use circle markers, while the second list will use square markers.

2. Ordered List Markers

You can also change the numbering style of an ordered list. For example:

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

Some commonly used values are:

list-style-type: decimal;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: lower-roman;
list-style-type: upper-roman;

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Ordered List</title>

  <style>
    .letters {
      list-style-type: upper-alpha;
    }

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

<body>

  <h2>Letter List</h2>

  <ol class="letters">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>

  <h2>Roman Number List</h2>

  <ol class="roman">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>

</body>
</html>

The first list will use capital letters, and the second list will use Roman numerals.

3. Removing List Markers

Sometimes, you may want to remove bullets or numbers from a list. You can do this using:

ul {
  list-style-type: none;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>Remove List Markers</title>

  <style>
    ul {
      list-style-type: none;
    }
  </style>
</head>

<body>

  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>

</body>
</html>

The list will appear without bullet points. This is commonly used when creating navigation menus.

4. List Style Position

The list-style-position property controls where the list marker appears.

It has two common values:

  • outside
  • inside

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS List Style Position</title>

  <style>
    .inside {
      list-style-position: inside;
    }

    .outside {
      list-style-position: outside;
    }
  </style>
</head>

<body>

  <h2>Inside</h2>

  <ul class="inside">
    <li>This list marker appears inside the content area.</li>
  </ul>

  <h2>Outside</h2>

  <ul class="outside">
    <li>This list marker appears outside the content area.</li>
  </ul>

</body>
</html>

The difference becomes easier to notice when a list item contains a longer line of text.

5. Using an Image as a List Marker

CSS also allows you to use an image as a list marker with the list-style-image property. For example:

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

The image file should be available in your project folder.

For example:

my-project/
│
├── index.html
└── marker.png

In modern web design, custom markers are often created using other CSS techniques, but list-style-image is still useful to know.

6. List Style Shorthand

You can also use the list-style shorthand property. For example:

ul {
  list-style: square inside;
}

This combines multiple list style properties in one line. For now, using individual properties can be easier while you are learning CSS.

Quick Recap

  • <ul> creates an unordered list.
  • <ol> creates an ordered list.
  • list-style-type changes the bullet or numbering style.
  • list-style-type: none removes list markers.
  • list-style-position controls the position of list markers.
  • list-style-image can use an image as a marker.
  • list-style is a shorthand property for list styling.

Frequently Asked Questions (FAQs)

Q1. What are CSS Lists?

CSS Lists are used to change the appearance of HTML ordered and unordered lists. You can style bullets, numbers, markers, and their position using CSS properties.

Q2. How to style lists in CSS?

You can style lists in CSS using properties such as list-style-type, list-style-position, list-style-image, and the list-style shorthand property.

Q3. What is CSS list-style-type?

The list-style-type property changes the type of marker used in a list. It can display bullets, circles, squares, numbers, letters, or Roman numerals.

Q4. What is the difference between ordered and unordered lists in CSS?

An ordered list displays items with numbers or another sequence, while an unordered list usually displays bullet points. CSS can style both types of lists.

Q5. Can I use an image as a list marker in CSS?

Yes. CSS provides the list-style-image property, which allows an image to be used as the marker for list items.

Q6. Is CSS list styling important?

Yes. CSS list styling is useful for creating organized content, navigation menus, and better-looking lists on web pages.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top