CSS course menu
Styling Lists and Links with CSS: list-style, Markers, Link States and Nav Menus
Learn to style lists and links in CSS: list-style-type, custom markers, removing bullets, spacing list items, link colours and states, accessible focus styles, and turning a list of links into a navigation bar.
On this page
Lists and links appear on every website, often together as navigation menus. This lesson covers their CSS.
Bullet and number styles#
ul, ol { margin: 0 0 10px; }<ul style="list-style-type: square"><li>square</li></ul>
<ul style="list-style-type: circle"><li>circle</li></ul>
<ol style="list-style-type: upper-roman"><li>upper-roman</li><li>second</li></ol>
<ol style="list-style-type: lower-alpha"><li>lower-alpha</li><li>second</li></ol>
<ul style="list-style-type: '👉 '"><li>Any string works as a marker</li></ul>list-style-typesets the marker:disc(default for<ul>),circle,square,decimal(default for<ol>),lower-alpha,upper-roman, a string, ornone.list-style-position: insideputs the marker inside the text block instead of hanging outside.::markerstyles the marker's colour and font (Pseudo-elements).
Removing bullets and indentation#
Lists used for layout (menus, card grids) usually start by removing the default styles:
.plain-list {
list-style: none;
margin: 0;
padding: 0;
}Browsers add the indentation as padding-left on the list (about 40px), which is why padding: 0 is needed.
Link states#
a {
color: #2f5fe0;
text-underline-offset: 3px;
}
a:visited { color: #6f42c1; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
outline: 3px solid #ffb703;
outline-offset: 2px;
border-radius: 2px;
}<p>Read the <a href="#">getting started guide</a> or <a href="#">browse all courses</a>. Try pressing Tab to see the focus style.</p>When styling link states, keep the order :link, :visited, :hover, :focus-visible, :active, so later states override earlier ones when they apply together.
A navigation bar#
A typical menu combines everything: a list without bullets, laid out in a row, with links that have a padded clickable area and a clear current-page state:
.nav {
list-style: none;
margin: 0;
padding: 6px;
display: flex;
gap: 4px;
background: #1d3b4f;
border-radius: 10px;
}
.nav a {
display: block;
padding: 8px 14px;
color: white;
text-decoration: none;
border-radius: 6px;
}
.nav a:hover { background: rgb(255 255 255 / 0.12); }
.nav a[aria-current="page"] { background: white; color: #1d3b4f; font-weight: 600; }
.nav a:focus-visible { outline: 2px solid #ffb703; outline-offset: 2px; }<nav aria-label="Main">
<ul class="nav">
<li><a href="#" aria-current="page">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Practice</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>display: flexputs the items in a row; Flexbox explains it fully.display: blockand padding on the links make the whole box clickable, not just the text.aria-current="page"marks the current page for screen readers and is used as the styling hook.
Practice#
Practice exercise
Style an ordered list of steps so the numbers are bold and coloured #e8590c, each item has 8px of space below it, and links inside the list have no underline until hovered.
Show solution
.steps li { margin-bottom: 8px; }
.steps li::marker { color: #e8590c; font-weight: bold; }
.steps a { text-decoration: none; }
.steps a:hover, .steps a:focus-visible { text-decoration: underline; }<ol class="steps">
<li>Install <a href="#">VS Code</a></li>
<li>Create <code>index.html</code></li>
<li>Open it in your <a href="#">browser</a></li>
</ol>Key takeaway#
Finished this lesson?