learn2kode.in

Menu

CSS Tutorial

Menu

CSS Lists

CSS provides properties to control the appearance of HTML lists, including:

  • Bullet styles (for <ul>)
  • Numbering styles (for <ol>)
  • Custom images as bullets
  • List position
  • List layout

1. list-style-type

Defines the type of bullet or numbering for a list

For Unordered Lists (<ul>)

Copy Text 
ul {
  list-style-type: square; /* circle, disc, square */
}

Examples:

  • disc (default)
  • circle
  • square
  • none

For Ordered Lists (<ol>)

Copy Text 
ol {
  list-style-type: upper-roman; /* decimal, lower-alpha, upper-latin etc. */
}

Examples

  • decimal (1, 2, 3…)
  • decimal-leading-zero (01, 02…)
  • lower-alpha (a, b, c…)
  • upper-alpha (A, B, C…)
  • upper-roman (I, II, III…)

2. list-style-image

Use an image instead of a bullet.

Copy Text 
ul {
  list-style-image: url('bullet.png');
}

3. list-style-position

Defines where the bullet appears. 

outside (default) Bullet stays outside the text

Copy Text 
ul {
  list-style-position: outside;
}

inside

Bullet is placed inside, and text aligns with it

Copy Text 
ul {
  list-style-position: inside;
}

4. Shorthand Property: list-style

You can combine all three in one:

Copy Text 
ul {
  list-style: square inside url('icon.png');
}

Order doesn’t matter.

5. Removing Bullets Completely

Useful for navigation menus:

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

Example: Styled List

Copy Text 
<ul class="custom-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
Copy Text 
.custom-list {
  list-style-type: square;
  list-style-position: inside;
  color: #444;
  font-size: 18px;
}

Output Summary

CSS List Properties:

Property Description
list-style-type Bullet or numbering style
list-style-image Custom image bullet
list-style-position Bullet inside/outside
list-style Shorthand for all list properties
CSS Box Model