CSS List Styles

In web design, lists organize content neatly and clearly. CSS lets you style both unordered (bulleted) and ordered (numbered) lists to improve readability and match your website’s look.

Unordered List Styling

Unordered lists use bullets by default. You can change the bullet style using list-style-type.

Syntax:

				
					 ul {
  list-style-type: value;
}

Available Values:

disc : Default filled circle
circle : ○ Hollow circle
square : ■ Filled square
none : No bullet

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .arshyan-disc { list-style-type: disc; }
    .arshyan-circle { list-style-type: circle; }
    .arshyan-square { list-style-type: square; }
    .arshyan-none { list-style-type: none; }
  </style>
</head>
<body>

  <ul class="arshyan-disc">
    <li>Learn With Arshyan</li>
    <li>Course Modules</li>
  </ul>

  <ul class="arshyan-circle">
    <li>Enroll Now</li>
    <li>Weekly Tests</li>
  </ul>

  <ul class="arshyan-square">
    <li>Live Sessions</li>
    <li>Certificates</li>
  </ul>

  <ul class="arshyan-none">
    <li>Hidden Style</li>
    <li>No Bullet Here</li>
  </ul>

</body>
</html>

Ordered List Styling

You can also change how numbers or letters appear in ordered lists.

Syntax:

				
					ol {
  list-style-type: value;
}

Common Values:

decimal : 1,2,3
decimal-leading-zero : 01,02,03
lower-roman : i, ii, iii
upper-roman : I, II, III
lower-alpha : a, b, c
upper-alpha : A, B, C

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .lesson-decimal { list-style-type: decimal; }
    .lesson-zero { list-style-type: decimal-leading-zero; }
    .lesson-roman { list-style-type: upper-roman; }
    .lesson-alpha { list-style-type: lower-alpha; }
  </style>
</head>
<body>

  <ol class="lesson-decimal">
    <li>Introduction</li>
    <li>Box Model</li>
  </ol>

  <ol class="lesson-zero">
    <li>Setup</li>
    <li>Typography</li>
  </ol>

  <ol class="lesson-roman">
    <li>Selectors</li>
    <li>Specificity</li>
  </ol>

  <ol class="lesson-alpha">
    <li>Project Plan</li>
    <li>Final Review</li>
  </ol>

</body>
</html>

List Style Position

This property controls where the bullet/number appears – inside the element or outside (indented).

Syntax:

				
					ul {
  list-style-position: inside | outside;
}

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .inside-list { list-style-position: inside; }
    .outside-list { list-style-position: outside; }
  </style>
</head>
<body>

  <ul class="inside-list">
    <li>Inside marker stays with text</li>
    <li>Good for compact layouts</li>
  </ul>

  <ul class="outside-list">
    <li>Outside marker is indented</li>
    <li>Looks more traditional</li>
  </ul>

</body>
</html>

Removing Default List Style

You can remove all bullets or numbers using:

				
					ul, ol {
  list-style: none;
}

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .unstyled {
      list-style: none;
      padding: 0;
    }
  </style>
</head>
<body>

  <ul class="unstyled">
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
  </ul>

</body>
</html>

Custom List Marker

You can use : :marker or list-style-type with a Unicode/emoji character (with limitations).

Example:

				
					<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .emoji-list {
      list-style-type: "✔️ ";
    }
  </style>
</head>
<body>

  <ul class="emoji-list">
    <li>Lesson Complete</li>
    <li>Task Submitted</li>
  </ul>

</body>
</html>