Links & Navigation Bars

Link states

Links have states you can style with pseudo-classes: :hover (mouse over), :active (being clicked), :visited (already visited).

<style>
  a.btn { color:#4338ca; text-decoration:none; font-weight:600; }
  a.btn:hover { color:#06b6d4; text-decoration:underline; }
</style>
<a class="btn" href="#">Hover over me</a>

There are two rules for the same link. The first, a.btn, is the normal look: indigo, no underline, semi-bold. The second, a.btn:hover, only applies while the mouse is over the link — it switches the colour to cyan and brings the underline back. The :hover part is a pseudo-class: a condition CSS watches for. Move your mouse on and off the link to see it toggle.

A horizontal navbar from a list

Here is the trick behind almost every navigation bar on the web: start with a plain bullet list of links, then use CSS to strip the bullets and lay the items in a row. The code below turns an everyday <ul> into a polished navbar — read it first, then follow the numbered steps under it.

<style>
  .nav { list-style: none; margin: 0; padding: 0; display: flex; background: #4338ca; border-radius: 10px; }
  .nav li a {
    display: block; color: #fff; text-decoration: none;
    padding: 14px 20px; transition: background .2s;
  }
  .nav li a:hover { background: #3730a3; }
</style>
<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Courses</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

That professional navbar is just a plain <ul> list transformed by CSS. Here is each step of the transformation, in order:

1. Start with an ordinary <ul> of <li> items, each holding a link — the same list you learned in HTML.
2. On the .nav list, list-style: none removes the bullet dots, and margin: 0; padding: 0 strips the default indent.
3. display: flex on the .nav lays the list items in a horizontal row instead of stacking them vertically.
4. On the links, display: block plus padding: 14px 20px makes the whole padded area clickable (not just the text), and text-decoration: none removes underlines.
5. .nav li a:hover darkens the background on hover, and transition makes that colour change fade smoothly instead of snapping.