CSS Links & Lists

Introduction

Links and lists are everywhere on the web. Navigation menus, sidebar items, footer links, breadcrumbs, feature lists, and blog categories all rely on them. By default, browsers apply basic styling, but professional websites never use default styles. They customize them using CSS to improve usability, branding, and user experience.

In this chapter, you will learn:

• How CSS styles links
• Link states (hover, active, visited)
• Removing default link styles
• Styling ordered and unordered lists
• Creating navigation menus using lists

Styling Links

A link is created using the <a> tag. By default, browsers style links blue with an underline.

a {
  color: blue;
  text-decoration: underline;
}

Link States (LVHA Order)

Links have four states, and the order in CSS matters: Link, Visited, Hover, Active.

/* Normal state */
a:link { color: blue; }

/* Already clicked */
a:visited { color: purple; }

/* Mouse over - VERY IMPORTANT */
a:hover { color: red; text-decoration: underline; }

/* Clicked moment */
a:active { color: green; }

Removing Default Styles

a {
  text-decoration: none; /* Removes underline */
}
a:hover {
  text-decoration: underline; /* Adds underline on hover */
}

Button-like Links

a.button-link {
  background-color: #007bff;
  color: white;
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: none;
}
a.button-link:hover {
  background-color: #0056b3;
}

Styling Lists

There are three types of lists: Unordered (<ul>), Ordered (<ol>), and Description (<dl>).

Removing Bullets (Reset Style)

This is essential for navigation menus.

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

Custom List Styles

You can change the bullet type or use custom content.

/* Change numbers */
ol { list-style-type: upper-roman; }

/* Custom bullet */
ul.custom li::before {
  content: "✔";
  color: green;
  margin-right: 8px;
}

Creating Navigation Menus

Navigation menus are simply lists with links.

Horizontal Menu

.nav {
  list-style: none;
  padding: 0;
}
.nav li {
  display: inline-block;
  margin-right: 20px;
}
.nav a {
  text-decoration: none;
  color: #333;
}
.nav a:hover {
  color: #007bff;
}

Vertical Sidebar Menu

.sidebar {
  list-style: none;
  padding: 0;
}
.sidebar li {
  margin-bottom: 10px;
}
.sidebar a {
  display: block; /* Makes full area clickable */
  padding: 10px;
  background: #f4f4f4;
  text-decoration: none;
  color: #333;
}
.sidebar a:hover {
  background: #ddd;
}

Common Beginner Mistakes & Best Practices