CSS — Lists

Taming bullets

ul {
    list-style-type: square;    /* disc (default) · circle · square */
}
ol {
    list-style-type: upper-roman;   /* decimal, lower-alpha, armenian… */
}

What the browser displays

(Square bullets on the unordered list; I, II, III numbering on the ordered one.)

Full removal:

.no-bullets {
    list-style-type: none;   /* or the shorthand: list-style: none; */
    padding-left: 0;         /* browsers indent lists by default   */
}

That second line trips everyone — the bullet disappears but the indent remains. Kill both.

Marker placement

.inside { list-style-position: inside; }  /* text wraps under marker */
.outside{ list-style-position: outside; } /* default — text stays aligned */

outside:              inside:
• Long item text      • Long item text
  wraps aligned       wraps under the bullet

inside suits tight designs where hanging indents waste width.

Custom markers with ::marker

Style the bullet/number itself:

li::marker {
    color: #0d9488;
    font-size: 1.2em;
}

For full creative control, hide markers and inject your own:

ul.custom { list-style: none; }
ul.custom li::before {
    content: "→ ";
    color: #0d9488;
}

(Every item begins with a teal arrow instead of any native marker.)

The killer app: navigation menus

Semantic lists become every nav bar on the web:

.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;          /* items in a row        */
    gap: 4px;
}
.nav a {
    display: block;         /* full-cell clickable   */
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 6px;
    color: #334155;
}
.nav a:hover {
    background: #f0fdfa;
    color: #0d9488;
}

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/about">About</a></li>
</ul>

What the browser displays

(A horizontal menu of rounded hover-highlighting tabs.)

Three CSS ideas — list-style: none, flexbox, block links — turn raw HTML into professional UI.

Styled description lists

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
}
dt { font-weight: 700; color: #0f766e; }
dd { margin: 0; }

(Term–description pairs align as a clean two-column table-like layout.)

Spacing recipes

/* Comfortable reading lists */
.prose li { margin-bottom: 8px; line-height: 1.6; }

/* Compact chip lists */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
    background: #e6fffa; color: #0f766e;
    padding: 4px 12px; border-radius: 999px;
}

Mini Practice

1. Demo five list-style-type values in one page
2. Fix the phantom indent: remove bullets AND padding, compare before/after
3. Recreate the .nav menu above from scratch
4. Build tag chips using a <ul> + flex + pill styling
5. Grid-style a <dl> glossary of five terms

Next: tables → (CSS table styling)