Nearby lessons
14 of 19🎨 CSS Lists
📌 What are CSS Lists?
CSS allows you to customize the appearance of HTML lists to match your website design.
Lists are commonly used for navigation, tasks, menus, and more. With CSS, you can style:
- 🔸 Bullet shapes (disc, circle, square)
- 🔸 List item spacing and alignment
- 🔸 Custom icons or emojis
- 🔸 Remove default bullets
🔹 Default Unordered List Style
By default, unordered lists (
<ul>) use a disc bullet.Example02
🔹 Circle Style List
You can change the bullet style using
list-style-type: circle;.Example03
📏 Margin Shorthand (All sides)
The margin property sets all four margins using one value.
Example04
🔄 Individual Margins
You can set margin-top, margin-right, margin-bottom, and margin-left separately for more control.
Example05
↕️ Margin - Two Values
The margin property can take two values: vertical (top & bottom) and horizontal (left & right).
Example06
🧭 Margin - Three Values
With three values: first is top, second is left & right, third is bottom.
Example07
🧭 Margin - Four Values
Four values are applied in clockwise order: top, right, bottom, left.
Example08
🎯 Margin Auto
Use margin: auto; to center block elements horizontally (requires fixed width).
Example09
🔹 Decimal Ordered List
Ordered lists (
<ol>) by default use numbers.Example10
🔹 Upper Alpha Ordered List
Use
list-style-type: upper-alpha; to use capital letters.Example11
🔹 Lower Roman Ordered List
Use
list-style-type: lower-roman; for roman numerals.Example12
🔹 Custom Icon List (Emoji)
You can remove default bullets and use emojis or custom icons instead.
Example13
🔹 Nested Lists
Lists can be nested inside each other to show sub-categories or steps.
Example14
💡 CSS List Styling Tips
- ✅ Use
list-style-typeto change bullets or numbering - ✅ Use
padding-leftto adjust indent spacing - ✅ Use
list-style: noneto remove bullets - ✅ Combine emojis or images for custom bullets
- ✅ Keep lists clean and accessible
- ✅ Nest lists carefully to avoid confusion
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5