CSS Lists

Subject: css

CSS Lists

HTML provides two main types of lists: ordered lists (<ol>) and unordered lists (<ul>). CSS allows you to style these lists to match your website’s design by customizing markers (bullets or numbers), spacing, alignment, and more.

CSS List Properties

  • list-style-type: Defines the shape or style of the marker (e.g., disc, circle, square, decimal, roman numerals).
  • list-style-position: Specifies whether the marker appears inside or outside the list item's content box.
  • list-style-image: Replaces default markers with a custom image.
  • list-style: A shorthand to define all three list properties in one line.

Example: Styling Ordered and Unordered Lists

🚀 Try it in Compiler

list-style-type Values

  • For <ul>: disc (default), circle, square, none
  • For <ol>: decimal, decimal-leading-zero, lower-alpha, upper-roman, etc.

list-style-position Values

  • outside (default): Marker is placed outside the text content box.
  • inside: Marker is inside the text block and aligned with the text.

Shorthand Property: list-style

You can combine all list styles into one line:

🚀 Try it in Compiler

Key Takeaways

  • Use list-style-type to define bullet or number appearance.
  • Use list-style-position to place markers inside or outside the text box.
  • Use list-style-image to apply custom images as list markers.
  • Apply list-style shorthand for cleaner code.
  • Adjust padding and margins to fine-tune list alignment.
Next: CSS Table