Styling Ordered and Unordered Lists0%

Styling Tables: Borders, Striping, and Responsive Tables

Styling Ordered and Unordered Lists

Beginner9 min read•Updated: 2026-10-01

Styling Ordered and Unordered Lists

Lists are everywhere in web development! 📋

From recipe ingredients and science experiment steps, to feature bullet points and full website navigation bars, HTML lists (<ul> and <ol>) form the structural backbone of grouped information.

By default, web browsers apply built-in styling:

<ul> (Unordered lists): Simple black dots (disc) with about 40px of left padding.
<ol> (Ordered lists): Basic Arabic numerals (1, 2, 3...) with the same left indentation.

With CSS, you have complete artistic control: swap boring dots for squares, roman numerals, or custom emojis, adjust bullet indentation, or completely strip default bullets to craft horizontal navigation menus!

In this lesson, you will master:

1
list-style-type for both unordered and ordered lists
2
list-style-position (outside vs inside)
3
Creating modern custom emoji bullets
4
The essential CSS Navigation List Reset used on almost every website

The Morning Assembly Line-Up Analogy 🏫

Imagine your school's Morning Assembly:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  LIST-STYLE-POSITION VISUALIZED                         |
+-------------------------------------------------------------------------+
| OUTSIDE (Default):                                                      |
| The class monitor stands OUTSIDE in the aisle holding the class board,  |
| while all students stand neatly aligned in a single straight row:       |
|                                                                         |
|   [•]  Rohit Sharma, Roll 10, Green House Captain                       |
|        and cricket team opening batsman.                                |
|   ^                                                                     |
|   Bullet hangs outside the text margin!                                 |
|                                                                         |
| INSIDE:                                                                 |
| The monitor steps INSIDE the student line, right next to the student:   |
|                                                                         |
|   [•] Rohit Sharma, Roll 10, Green House Captain                        |
|   and cricket team opening batsman.                                     |
|   ^                                                                     |
|   Second line wraps directly under the bullet itself!                   |
+-------------------------------------------------------------------------+

Customizing Bullet Shapes with `list-style-type`

The list-style-type property controls the visual marker displayed next to each list item (<li>).

1. Unordered Lists (`<ul>`)

Common marker values for bullet points:

Value	Appearance	Best Used For
`disc`	Filled black circle (Default)	General point-wise notes
`circle`	Hollow unfilled circle	Sub-items or secondary lists
`square`	Solid neat square	Technical documents or modern cards
`none`	No marker at all	Navigation menus and custom icon lists

1/* Styling unordered lists */
2ul.square-list {
3  list-style-type: square;
4}
5 
6ul.circle-list {
7  list-style-type: circle;
8}
9 
10ul.clean-list {
11  list-style-type: none; /* No bullets */
12}

2. Ordered Lists (`<ol>`)

Ordered lists have a rich collection of counting numbering systems:

Value	Example Output	Real-World Use Case
`decimal`	1, 2, 3, 4 (Default)	Standard numbered instructions
`decimal-leading-zero`	01, 02, 03	High-end tech rankings & steps
`lower-alpha`	a, b, c, d	Multiple-choice quiz options
`upper-alpha`	A, B, C, D	Major exam question sections
`lower-roman`	i, ii, iii, iv	Preface chapters or sub-clauses
`upper-roman`	I, II, III, IV	School standards (Class X, XII)
`devanagari`	१, २, ३, ४	Hindi / Sanskrit traditional numbering

1/* Ordered list examples */
2ol.exam-sections {
3  list-style-type: upper-alpha; /* A, B, C */
4}
5 
6ol.sub-topics {
7  list-style-type: lower-roman; /* i, ii, iii */
8}
9 
10ol.hindi-numbers {
11  list-style-type: devanagari; /* १, २, ३ */
12}

`list-style-position`: Outside vs Inside

When a list item contains multiple lines of text, how should subsequent lines wrap?

`outside` (Default)

The marker hangs to the left, outside the text content flow. All lines of text remain cleanly aligned on the left edge.

1ul.outside-bullets {
2  list-style-position: outside; /* Default */
3}

`inside`

The marker sits inside the text block, behaving like the first word in a paragraph. If the sentence wraps onto line two, it wraps underneath the marker.

1ul.inside-bullets {
2  list-style-position: inside;
3}

The All-in-One `list-style` Shorthand

You can specify type and position in a single shorthand line:

1ul {
2  /* list-style: [type] [position]; */
3  list-style: square inside;
4}
5 
6/* Most common usage across modern web projects */
7ul.clean {
8  list-style: none;
9}

Custom Bullets with Emojis (`::before`)

While CSS supports list-style-image: url('star.png'), images are difficult to align and resize cleanly across different screen resolutions.

The modern industry best practice is using list-style: none; combined with the CSS ::before pseudo-element to display crisp emojis or SVG icons:

1ul.check-list {
2  list-style: none; /* Strip default dots */
3  padding-left: 0;   /* Reset browser default indent */
4}
5 
6ul.check-list li {
7  position: relative;
8  padding-left: 32px;
9  margin-bottom: 10px;
10  font-size: 16px;
11}
12 
13/* Add custom green checkmark before each list item */
14ul.check-list li::before {
15  content: "✅";
16  position: absolute;
17  left: 0;
18  top: 0;
19}

Did you know almost every horizontal navigation bar on the internet (Google, YouTube, GitHub) is fundamentally built with an HTML <ul> list?

Why? Because semantic HTML requires navigational links to be grouped as a list.

However, browsers add default margin and 40px of left padding. To build a navbar, you must apply the List Reset:

1/* THE CLASSIC NAVBAR LIST RESET */
navbar-menu {
list-style: none;       /* 1. Remove black dots */
margin: 0;              /* 2. Remove default top/bottom margins */
padding: 0;             /* 3. Remove 40px left indent padding */
display: flex;          /* 4. Lay out items horizontally */
gap: 24px;              /* 5. Space between menu links */
background-color: #0f172a;
padding: 16px 24px;
10}
11 
navbar-menu li a {
color: #f8fafc;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
17}
18 
navbar-menu li a:hover {
color: #38bdf8; /* Sky blue hover */
21}

Visual Architecture Blueprint

+-------------------------------------------------------------+
|               NAVBAR LIST RESET BREAKDOWN                   |
+-------------------------------------------------------------+
| Default HTML <ul>:                                          |
| • Home                                                      |
| • About                                                     |
| • Courses                                                   |
|                                                             |
| After list-style: none + margin: 0 + padding: 0 + flex:     |
| [ Home ]   [ About ]   [ Courses ]   [ Contact ]            |
+-------------------------------------------------------------+

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Writing `margin: 0` on `<ul>` but forgetting `padding: 0`	The list still has a mysterious 40px left gap because browsers use `padding-left` for default indent!	Always reset both: `margin: 0; padding: 0;`.
Setting `list-style: none` on `<li>` instead of `<ul>`	Can cause inconsistent inheritance in nested lists.	Set `list-style: none` directly on the parent `<ul>` or `<ol>`.
Using `list-style-image` with huge images	Images cannot be sized in CSS and will display at their full gigantic dimensions.	Use `::before` pseudo-element with emojis or font icons for pixel-perfect sizing.
Forgetting `gap` or margins between horizontal list items	The text links bump into each other with zero breathing space.	Use Flexbox `gap: 20px;` on the parent list.

Summary Cheat Sheet 📌

list-style-type sets bullet or number formats (disc, circle, square, decimal, lower-roman, devanagari, none).
list-style-position controls text wrapping (outside hangs bullet outside; inside brings bullet into paragraph flow).
Modern Icon Bullets: Strip default dots with list-style: none; and inject emojis using li::before { content: "🎯"; }.
Navbar Reset: Always combine list-style: none; margin: 0; padding: 0; when transforming <ul> lists into horizontal headers or footers.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which CSS property and value completely removes bullet markers from an unordered list?

Question 2

A beginner sets margin: 0 on a <ul>, but the list still has empty white space on the left side. What is causing this?

Question 3

What is the visual difference between list-style-position: outside and inside when list text wraps across multiple lines?

Question 4

Which list-style-type value renders Indian Devanagari numerals (१, २, ३...)?

Question 5

Why do web developers use li::before instead of list-style-image for custom icon bullets?

Practice Challenge (Try It Yourself)

1
Create a file named school-canteen-menu.html.
2
Build an attractive school canteen daily special menu with custom emoji bullets and an upper-roman daily timetable:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Canteen Menu & List Styling</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f8fafc;
       padding: 40px 20px;
       max-width: 650px;
       margin: 0 auto;
     }
14 
     .card {
       background-color: #ffffff;
       padding: 24px 30px;
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
       margin-bottom: 24px;
     }
22 
     h2 {
       color: #0f172a;
       border-bottom: 2px solid #e2e8f0;
       padding-bottom: 8px;
       margin-top: 0;
     }
29 
     /* Custom Emoji Bullet List */
     .snack-list {
       list-style: none; /* Strip default black dots */
       padding-left: 0;
       margin: 0;
     }
36 
     .snack-list li {
       position: relative;
       padding-left: 36px;
       padding-top: 8px;
       padding-bottom: 8px;
       border-bottom: 1px dashed #e2e8f0;
       font-size: 16px;
       color: #334155;
     }
46 
     .snack-list li:last-child {
       border-bottom: none;
     }
50 
     .snack-list li::before {
       content: "🥪";
       position: absolute;
       left: 4px;
       top: 8px;
       font-size: 18px;
     }
58 
     .snack-list li.drink::before {
       content: "🧃";
     }
62 
     .snack-list li.fruit::before {
       content: "🍎";
     }
66 
     /* Ordered List with Upper Roman Numerals */
     .canteen-rules {
       list-style-type: upper-roman;
       padding-left: 24px;
       color: #475569;
       line-height: 1.8;
     }
74 
     .price {
       float: right;
       font-weight: bold;
       color: #059669;
     }
   </style>
 </head>
 <body>
   <div class="card">
     <h2>School Canteen Snacks Menu</h2>
     <ul class="snack-list">
       <li>Vegetable Grilled Sandwich <span class="price">₹40</span></li>
       <li>Paneer Kathi Roll <span class="price">₹55</span></li>
       <li class="drink">Cold Chocolate Milk <span class="price">₹30</span></li>
       <li class="drink">Fresh Mango Lassi <span class="price">₹35</span></li>
       <li class="fruit">Fresh Cut Fruit Bowl <span class="price">₹25</span></li>
     </ul>
   </div>
93 
   <div class="card">
     <h2>Canteen Discipline Guidelines</h2>
     <ol class="canteen-rules">
       <li>Always stand in a straight queue at the counter.</li>
       <li>Keep your exact cash change or student smart card ready.</li>
       <li>Return all trays and plates to the washing station after eating.</li>
     </ol>
   </div>
 </body>
 </html>

1
Open the file in your browser to see how custom bullet points make lists look clean and appetizing! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Styling Tables: Borders, Striping, and Responsive Tables (Links, Lists and Tables Styling).

👉 Continue to Next Lesson: Styling Tables: Borders, Striping, and Responsive Tables →

Next Lesson

Styling Tables: Borders, Striping, and Responsive Tables

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Styling Links with Pseudo-classes	Styling Tables: Borders, Striping, and Responsive Tables

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Styling Tables: Borders, Striping, and Responsive Tables

Styling Ordered and Unordered Lists

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Styling Ordered and Unordered Lists

Lists are everywhere in web development! 📋

From recipe ingredients and science experiment steps, to feature bullet points and full website navigation bars, HTML lists (<ul> and <ol>) form the structural backbone of grouped information.

By default, web browsers apply built-in styling:

<ul> (Unordered lists): Simple black dots (disc) with about 40px of left padding.
<ol> (Ordered lists): Basic Arabic numerals (1, 2, 3...) with the same left indentation.

In this lesson, you will master:

1
list-style-type for both unordered and ordered lists
2
list-style-position (outside vs inside)
3
Creating modern custom emoji bullets
4
The essential CSS Navigation List Reset used on almost every website

The Morning Assembly Line-Up Analogy 🏫

Imagine your school's Morning Assembly:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  LIST-STYLE-POSITION VISUALIZED                         |
+-------------------------------------------------------------------------+
| OUTSIDE (Default):                                                      |
| The class monitor stands OUTSIDE in the aisle holding the class board,  |
| while all students stand neatly aligned in a single straight row:       |
|                                                                         |
|   [•]  Rohit Sharma, Roll 10, Green House Captain                       |
|        and cricket team opening batsman.                                |
|   ^                                                                     |
|   Bullet hangs outside the text margin!                                 |
|                                                                         |
| INSIDE:                                                                 |
| The monitor steps INSIDE the student line, right next to the student:   |
|                                                                         |
|   [•] Rohit Sharma, Roll 10, Green House Captain                        |
|   and cricket team opening batsman.                                     |
|   ^                                                                     |
|   Second line wraps directly under the bullet itself!                   |
+-------------------------------------------------------------------------+

Customizing Bullet Shapes with `list-style-type`

The list-style-type property controls the visual marker displayed next to each list item (<li>).

1. Unordered Lists (`<ul>`)

Common marker values for bullet points:

Value	Appearance	Best Used For
`disc`	Filled black circle (Default)	General point-wise notes
`circle`	Hollow unfilled circle	Sub-items or secondary lists
`square`	Solid neat square	Technical documents or modern cards
`none`	No marker at all	Navigation menus and custom icon lists

1/* Styling unordered lists */
2ul.square-list {
3  list-style-type: square;
4}
5 
6ul.circle-list {
7  list-style-type: circle;
8}
9 
10ul.clean-list {
11  list-style-type: none; /* No bullets */
12}

2. Ordered Lists (`<ol>`)

Ordered lists have a rich collection of counting numbering systems:

Value	Example Output	Real-World Use Case
`decimal`	1, 2, 3, 4 (Default)	Standard numbered instructions
`decimal-leading-zero`	01, 02, 03	High-end tech rankings & steps
`lower-alpha`	a, b, c, d	Multiple-choice quiz options
`upper-alpha`	A, B, C, D	Major exam question sections
`lower-roman`	i, ii, iii, iv	Preface chapters or sub-clauses
`upper-roman`	I, II, III, IV	School standards (Class X, XII)
`devanagari`	१, २, ३, ४	Hindi / Sanskrit traditional numbering

1/* Ordered list examples */
2ol.exam-sections {
3  list-style-type: upper-alpha; /* A, B, C */
4}
5 
6ol.sub-topics {
7  list-style-type: lower-roman; /* i, ii, iii */
8}
9 
10ol.hindi-numbers {
11  list-style-type: devanagari; /* १, २, ३ */
12}

`list-style-position`: Outside vs Inside

When a list item contains multiple lines of text, how should subsequent lines wrap?

`outside` (Default)

The marker hangs to the left, outside the text content flow. All lines of text remain cleanly aligned on the left edge.

1ul.outside-bullets {
2  list-style-position: outside; /* Default */
3}

`inside`

The marker sits inside the text block, behaving like the first word in a paragraph. If the sentence wraps onto line two, it wraps underneath the marker.

1ul.inside-bullets {
2  list-style-position: inside;
3}

The All-in-One `list-style` Shorthand

You can specify type and position in a single shorthand line:

1ul {
2  /* list-style: [type] [position]; */
3  list-style: square inside;
4}
5 
6/* Most common usage across modern web projects */
7ul.clean {
8  list-style: none;
9}

Custom Bullets with Emojis (`::before`)

While CSS supports list-style-image: url('star.png'), images are difficult to align and resize cleanly across different screen resolutions.

The modern industry best practice is using list-style: none; combined with the CSS ::before pseudo-element to display crisp emojis or SVG icons:

1ul.check-list {
2  list-style: none; /* Strip default dots */
3  padding-left: 0;   /* Reset browser default indent */
4}
5 
6ul.check-list li {
7  position: relative;
8  padding-left: 32px;
9  margin-bottom: 10px;
10  font-size: 16px;
11}
12 
13/* Add custom green checkmark before each list item */
14ul.check-list li::before {
15  content: "✅";
16  position: absolute;
17  left: 0;
18  top: 0;
19}

Did you know almost every horizontal navigation bar on the internet (Google, YouTube, GitHub) is fundamentally built with an HTML <ul> list?

Why? Because semantic HTML requires navigational links to be grouped as a list.

However, browsers add default margin and 40px of left padding. To build a navbar, you must apply the List Reset:

1/* THE CLASSIC NAVBAR LIST RESET */
navbar-menu {
list-style: none;       /* 1. Remove black dots */
margin: 0;              /* 2. Remove default top/bottom margins */
padding: 0;             /* 3. Remove 40px left indent padding */
display: flex;          /* 4. Lay out items horizontally */
gap: 24px;              /* 5. Space between menu links */
background-color: #0f172a;
padding: 16px 24px;
10}
11 
navbar-menu li a {
color: #f8fafc;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
17}
18 
navbar-menu li a:hover {
color: #38bdf8; /* Sky blue hover */
21}

Visual Architecture Blueprint

+-------------------------------------------------------------+
|               NAVBAR LIST RESET BREAKDOWN                   |
+-------------------------------------------------------------+
| Default HTML <ul>:                                          |
| • Home                                                      |
| • About                                                     |
| • Courses                                                   |
|                                                             |
| After list-style: none + margin: 0 + padding: 0 + flex:     |
| [ Home ]   [ About ]   [ Courses ]   [ Contact ]            |
+-------------------------------------------------------------+

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Writing `margin: 0` on `<ul>` but forgetting `padding: 0`	The list still has a mysterious 40px left gap because browsers use `padding-left` for default indent!	Always reset both: `margin: 0; padding: 0;`.
Setting `list-style: none` on `<li>` instead of `<ul>`	Can cause inconsistent inheritance in nested lists.	Set `list-style: none` directly on the parent `<ul>` or `<ol>`.
Using `list-style-image` with huge images	Images cannot be sized in CSS and will display at their full gigantic dimensions.	Use `::before` pseudo-element with emojis or font icons for pixel-perfect sizing.
Forgetting `gap` or margins between horizontal list items	The text links bump into each other with zero breathing space.	Use Flexbox `gap: 20px;` on the parent list.

Summary Cheat Sheet 📌

list-style-type sets bullet or number formats (disc, circle, square, decimal, lower-roman, devanagari, none).
list-style-position controls text wrapping (outside hangs bullet outside; inside brings bullet into paragraph flow).
Modern Icon Bullets: Strip default dots with list-style: none; and inject emojis using li::before { content: "🎯"; }.
Navbar Reset: Always combine list-style: none; margin: 0; padding: 0; when transforming <ul> lists into horizontal headers or footers.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which CSS property and value completely removes bullet markers from an unordered list?

Question 2

A beginner sets margin: 0 on a <ul>, but the list still has empty white space on the left side. What is causing this?

Question 3

What is the visual difference between list-style-position: outside and inside when list text wraps across multiple lines?

Question 4

Which list-style-type value renders Indian Devanagari numerals (१, २, ३...)?

Question 5

Why do web developers use li::before instead of list-style-image for custom icon bullets?

Practice Challenge (Try It Yourself)

1
Create a file named school-canteen-menu.html.
2
Build an attractive school canteen daily special menu with custom emoji bullets and an upper-roman daily timetable:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Canteen Menu & List Styling</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f8fafc;
       padding: 40px 20px;
       max-width: 650px;
       margin: 0 auto;
     }
14 
     .card {
       background-color: #ffffff;
       padding: 24px 30px;
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
       margin-bottom: 24px;
     }
22 
     h2 {
       color: #0f172a;
       border-bottom: 2px solid #e2e8f0;
       padding-bottom: 8px;
       margin-top: 0;
     }
29 
     /* Custom Emoji Bullet List */
     .snack-list {
       list-style: none; /* Strip default black dots */
       padding-left: 0;
       margin: 0;
     }
36 
     .snack-list li {
       position: relative;
       padding-left: 36px;
       padding-top: 8px;
       padding-bottom: 8px;
       border-bottom: 1px dashed #e2e8f0;
       font-size: 16px;
       color: #334155;
     }
46 
     .snack-list li:last-child {
       border-bottom: none;
     }
50 
     .snack-list li::before {
       content: "🥪";
       position: absolute;
       left: 4px;
       top: 8px;
       font-size: 18px;
     }
58 
     .snack-list li.drink::before {
       content: "🧃";
     }
62 
     .snack-list li.fruit::before {
       content: "🍎";
     }
66 
     /* Ordered List with Upper Roman Numerals */
     .canteen-rules {
       list-style-type: upper-roman;
       padding-left: 24px;
       color: #475569;
       line-height: 1.8;
     }
74 
     .price {
       float: right;
       font-weight: bold;
       color: #059669;
     }
   </style>
 </head>
 <body>
   <div class="card">
     <h2>School Canteen Snacks Menu</h2>
     <ul class="snack-list">
       <li>Vegetable Grilled Sandwich <span class="price">₹40</span></li>
       <li>Paneer Kathi Roll <span class="price">₹55</span></li>
       <li class="drink">Cold Chocolate Milk <span class="price">₹30</span></li>
       <li class="drink">Fresh Mango Lassi <span class="price">₹35</span></li>
       <li class="fruit">Fresh Cut Fruit Bowl <span class="price">₹25</span></li>
     </ul>
   </div>
93 
   <div class="card">
     <h2>Canteen Discipline Guidelines</h2>
     <ol class="canteen-rules">
       <li>Always stand in a straight queue at the counter.</li>
       <li>Keep your exact cash change or student smart card ready.</li>
       <li>Return all trays and plates to the washing station after eating.</li>
     </ol>
   </div>
 </body>
 </html>

1
Open the file in your browser to see how custom bullet points make lists look clean and appetizing! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Styling Tables: Borders, Striping, and Responsive Tables (Links, Lists and Tables Styling).

👉 Continue to Next Lesson: Styling Tables: Borders, Striping, and Responsive Tables →

Next Lesson

Styling Tables: Borders, Striping, and Responsive Tables

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Styling Links with Pseudo-classes	Styling Tables: Borders, Striping, and Responsive Tables

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Styling Ordered and Unordered Lists

The Morning Assembly Line-Up Analogy 🏫

Customizing Bullet Shapes with list-style-type

1. Unordered Lists (<ul>)

2. Ordered Lists (<ol>)

list-style-position: Outside vs Inside

outside (Default)

inside

The All-in-One list-style Shorthand

Custom Bullets with Emojis (::before)

The Famous Navigation Bar List Reset 🚀

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Styling Tables: Borders, Striping, and Responsive Tables

Related Lessons

Practice Quiz

Loading Page Content...

Styling Ordered and Unordered Lists

The Morning Assembly Line-Up Analogy 🏫

Customizing Bullet Shapes with list-style-type

1. Unordered Lists (<ul>)

2. Ordered Lists (<ol>)

list-style-position: Outside vs Inside

outside (Default)

inside

The All-in-One list-style Shorthand

Custom Bullets with Emojis (::before)

The Famous Navigation Bar List Reset 🚀

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Styling Tables: Borders, Striping, and Responsive Tables

Related Lessons

Practice Quiz

Customizing Bullet Shapes with `list-style-type`

1. Unordered Lists (`<ul>`)

2. Ordered Lists (`<ol>`)

`list-style-position`: Outside vs Inside

`outside` (Default)

`inside`

The All-in-One `list-style` Shorthand

Custom Bullets with Emojis (`::before`)

Customizing Bullet Shapes with `list-style-type`

1. Unordered Lists (`<ul>`)

2. Ordered Lists (`<ol>`)

`list-style-position`: Outside vs Inside

`outside` (Default)

`inside`

The All-in-One `list-style` Shorthand

Custom Bullets with Emojis (`::before`)