CSS Lists

CSS can change the bullets and numbers of HTML lists, and even turn a list into a menu.

---

list-style-type

ul.a { list-style-type: square; }
ul.b { list-style-type: circle; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }

---

Position and image

ul { list-style-position: inside; }              /* bullet inside the text box */
ul { list-style-image: url("tick.png"); }       /* use a picture as bullet */
ul { list-style: square inside; }               /* shorthand */

---

Remove bullets

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

---

Horizontal menu from a list

.menu { list-style: none; margin: 0; padding: 0; background: #333; }
.menu li { display: inline-block; }
.menu a { display: block; padding: 12px 16px; color: #fff; text-decoration: none; }

---

Summary

• list-style-type changes the bullet or number style.
• list-style: none removes the bullets. Remove default padding too.
• display: inline-block on the items makes a horizontal menu.
• Next: CSS Tables.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.