Proposed exercise: Changing list bullets and numbers

Let's practice customizing list markers with CSS:

1
Create HTML lists
Add both unordered (ul) and ordered (ol) lists to your HTML
2
Change unordered list bullets
Use list-style-type to change from default disc to square or circle
3
Change ordered list numbering
Use list-style-type to change from numbers to letters or roman numerals
4
Remove list markers completely
Use list-style-type: none to remove all markers and style with custom properties
lightbulb Tips
You can also use list-style-image to use custom images as bullets, or ::marker pseudo-element for more control over marker styling
/* CSS for list styling */
ul.disc {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ol.decimal {
  list-style-type: decimal;
}

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

ul.no-bullet {
  list-style-type: none;
  padding-left: 0;
}
Result Preview
Unordered Lists:
  • Default disc bullet
  • Second item
  • Square bullet
  • Second item
Ordered Lists:
  1. Decimal numbering
  2. Second item
  1. Upper Roman numbering
  2. Second item
No Bullets:
  • • No bullet style
  • • Second item