CSS list properties customize unordered (<ul>), ordered (<ol>), and list item (<li>) elements—allowing developers to alter bullet markers, use custom images as markers, or strip bullet formatting to create navigation bars.
List properties control marker position, symbol type, and custom imagery:
ul {
list-style-type: disc; /* disc | circle | square | none */
list-style-position: inside; /* inside | outside (default) */
list-style-image: url('check.png');
}
/* Shorthand declaration */
ul {
list-style: square inside;
}
Key list uses:
list-style-type: Alters bullet or numbering symbols (disc, square, decimal, lower-alpha, none).list-style-position: Determines whether bullet markers appear inside or outside the list item text content box.list-style: none removes browser bullets when building horizontal navigation bars.flowchart TD
A["list-style-position"] --> B["outside (Default: Bullet sits outside text container box)"]
A --> C["inside (Bullet sits inside text container box, wrapping text underneath)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Lists Demonstration</title>
<style>
/* Horizontal Navigation Menu from <ul> */
.navbar-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1.5rem;
background-color: #1e293b;
padding: 1rem 1.5rem;
border-radius: 8px;
}
.navbar-menu a {
color: #38bdf8;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Navigation Menu Built from a CSS List</h2>
<ul class="navbar-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Docs</a></li>
</ul>
</body>
</html>
list-style: none; padding: 0; margin: 0; when building menus: Strips browser default margins and bullet indentations completely.display: flex; gap: 1rem; on <ul> instead of using legacy float: left.::before pseudo-elements for custom bullets: Offers far better styling control than list-style-image.Create a CSS rule for .clean-list that sets list-style: none;, padding: 0;, and margin: 0;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.