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.Code Example
PREVIEW READY
🔹 Circle Style List
You can change the bullet style using
list-style-type: circle;.Code Example
PREVIEW READY
📏 Margin Shorthand (All sides)
The margin property sets all four margins using one value.
Code Example
PREVIEW READY
🔄 Individual Margins
You can set margin-top, margin-right, margin-bottom, and margin-left separately for more control.
Code Example
PREVIEW READY
↕️ Margin - Two Values
The margin property can take two values: vertical (top & bottom) and horizontal (left & right).
Code Example
PREVIEW READY
🧭 Margin - Three Values
With three values: first is top, second is left & right, third is bottom.
Code Example
PREVIEW READY
🧭 Margin - Four Values
Four values are applied in clockwise order: top, right, bottom, left.
Code Example
PREVIEW READY
🎯 Margin Auto
Use margin: auto; to center block elements horizontally (requires fixed width).
Code Example
PREVIEW READY
🔹 Decimal Ordered List
Ordered lists (
<ol>) by default use numbers.Code Example
PREVIEW READY
🔹 Upper Alpha Ordered List
Use
list-style-type: upper-alpha; to use capital letters.Code Example
PREVIEW READY
🔹 Lower Roman Ordered List
Use
list-style-type: lower-roman; for roman numerals.Code Example
PREVIEW READY
🔹 Custom Icon List (Emoji)
You can remove default bullets and use emojis or custom icons instead.
Code Example
PREVIEW READY
🔹 Nested Lists
Lists can be nested inside each other to show sub-categories or steps.
Code Example
PREVIEW READY
💡 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
Keep Going!CSS - Display