EasyCode365EasyCode365

Creating links and navigation

Links help people move through a website.

A navigation menu is a group of links that points to the main pages, such as Home, About, Blog, or Contact. Clear link styles and simple navigation make a website easier to understand and use.

In this lesson, you will learn how to style link states and build basic vertical and horizontal navigation menus.

What a link is in HTML

In HTML, a link is created with the <a> tag.

The href attribute tells the browser where the link should go.

Read-only
<a href="https://www.easycode365.com/" target="_blank">Visit Example</a>

The text between the opening and closing tags is the clickable text users see.

Basic link styling with CSS

Browsers style links automatically.

By default, links are usually blue and underlined. After a user visits a link, the browser may show it in a different color.

CSS lets you change the default link style:

Can edit
<p>Visit the <a href="https://www.easycode365.com/" target="_blank">CSS practice page</a>.</p>

<style>
  a {
    color: blue;
    text-decoration: underline;
  }
</style>

You can also style only specific links by using a class:

Can edit
<p>
  Read the
  <a href="https://www.easycode365.com/" target="_blank" class="text-link">beginner CSS guide</a>.
</p>

<style>
  .text-link {
    color: #2563eb;
    font-weight: bold;
  }
</style>

Link states

Links can look different depending on what the user is doing.

CSS uses pseudo-classes to style these states:

  • :link: a link the user has not visited yet
  • :visited: a link the user has already opened before
  • :hover: a link while the mouse pointer is over it
  • :active: a link during the moment it is being clicked
  • :focus-visible: a link selected with the keyboard, usually by pressing Tab

The keyboard focus state is important for accessibility. Some users navigate websites without a mouse, so they need a clear visual focus style.

When you style :link, :visited, :hover, and :active, a common order is:

Read-only

Many developers remember this order as LoVe HAte: link, visited, hover, active.

Place :focus-visible near your hover styles, because both states show that a user is currently targeting the link.

Common link styling properties

Links are text, but they can also behave like small boxes.

Useful properties include:

  • color: changes the text color
  • text-decoration: controls the underline
  • font-weight: makes the link lighter or bolder
  • padding: adds clickable space inside the link
  • background-color: adds color behind the link
  • border-radius: rounds the corners when the link has a background

Be careful with text-decoration: none;. If you remove the underline, make sure the link still looks different from normal text.

Padding works best once the link uses display: block or display: inline-block, which you will see in the navigation examples below.

Runnable example: styled text link

This example styles a link in its normal, hover, active, and keyboard focus states.

Can edit
<p>
  Read our
  <a href="https://www.easycode365.com/" target="_blank" class="text-link">beginner CSS guide</a>.
</p>

<style>
  .text-link:link,
  .text-link:visited {
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
  }

  .text-link:hover {
    color: #ea580c;
    text-decoration: underline;
  }

  .text-link:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
  }

  .text-link:active {
    color: #dc2626;
  }
</style>

Try moving your mouse over the link. You should see the hover style.

If you use your keyboard, press Tab until the link is focused. You should see the focus outline.

What a navigation menu is

A navigation menu is a group of links.

Developers often build navigation with a <nav> element and a list:

Read-only
<nav>
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Home</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">About</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contact</a></li>
  </ul>
</nav>

The <nav> element tells the browser, search engines, and assistive technologies that this group of links is for navigation.

Vertical navigation menu

A vertical menu stacks links from top to bottom.

This works well for sidebars or simple course menus.

Can edit
<nav class="vertical-nav" aria-label="Sidebar navigation">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Home</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Lessons</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contact</a></li>
  </ul>
</nav>

<style>
  .vertical-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;
    font-family: Arial, sans-serif;
  }

  .vertical-nav a {
    display: block;
    padding: 10px 12px;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid #d1d5db;
  }

  .vertical-nav a:hover,
  .vertical-nav a:focus-visible {
    background-color: #dbeafe;
    color: #1d4ed8;
  }
</style>

The important part is display: block;.

It makes the whole link area clickable, not just the letters.

Horizontal navigation menu

A horizontal menu places links side by side.

This is common near the top of a website.

Can edit
<nav class="horizontal-nav" aria-label="Main navigation">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Home</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Lessons</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contact</a></li>
  </ul>
</nav>

<style>
  .horizontal-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    font-family: Arial, sans-serif;
  }

  .horizontal-nav a {
    display: inline-block;
    padding: 10px 14px;
    color: white;
    background-color: #1f2937;
    text-decoration: none;
    border-radius: 6px;
  }

  .horizontal-nav a:hover,
  .horizontal-nav a:focus-visible {
    background-color: #2563eb;
  }
</style>

Here, display: flex; places the list items in a row.

The links use padding and a background color, so they feel like clear clickable buttons.

Styling navigation links like buttons

You can make a link look like a button with a few CSS properties.

Can edit
<a href="https://www.easycode365.com/" target="_blank" class="button-link">Start lesson</a>

<style>
  .button-link {
    display: inline-block;
    padding: 10px 18px;
    background-color: #16a34a;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

  .button-link:hover,
  .button-link:focus-visible {
    background-color: #15803d;
  }
</style>

Use display: inline-block; when you want padding, width, height, or background color to feel more like a button.

Common beginner mistakes

  • Removing the underline without another visual clue: if a link looks like normal text, users may not know it is clickable.
  • Forgetting keyboard focus styles: hover helps mouse users, but keyboard users need a visible focus state too.
  • Making clickable areas too small: add padding and use display: block or inline-block when links should feel easier to click.
  • Forgetting href: an <a> tag without href is not a real navigation link.
  • Adding double borders in vertical menus: if every item has a full border, borders can stack and look too thick. Use only border-bottom when you need simple separators.

Mini practice task

Look at this CSS rule:

Read-only

What user action makes the link background turn yellow?

Check the quiz answers when you are ready.

Short quiz with answers

  1. Which CSS property removes the default underline from a link?
  2. Which pseudo-class styles a link when the mouse pointer is over it?
  3. Which HTML element is used to mark a group of navigation links?

Answers:

  1. text-decoration: none;
  2. :hover
  3. <nav>

Mini practice task answer: the background turns yellow when the user places the mouse pointer over the link.

Small challenge

Create a simple horizontal navigation menu.

Your goals:

  • Use a <nav> element.
  • Add a <ul> with three links.
  • Remove the list bullets.
  • Place the links side by side.
  • Add padding and a background color to each link.
  • Change the background color on :hover and :focus-visible.

Start with this editable code:

Can edit
<nav class="challenge-nav" aria-label="Practice navigation">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Home</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Lessons</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contact</a></li>
  </ul>
</nav>

<style>
  .challenge-nav ul {
    /* Remove bullets */

    /* Remove default spacing */

    /* Place list items side by side */

    font-family: Arial, sans-serif;
  }

  .challenge-nav a {
    /* Make padding and background work like a box */

    /* Add padding */

    /* Add text color */

    /* Add background color */

    /* Remove underline */
  }

  .challenge-nav a:hover,
  .challenge-nav a:focus-visible {
    /* Change the background color */
  }
</style>

Summary

  • Links are created with the <a> tag.
  • The href attribute tells the browser where the link goes.
  • Link states include :link, :visited, :hover, :active, and :focus-visible.
  • Use text-decoration to control underlines.
  • Navigation menus are groups of links, usually inside a <nav> element.
  • Vertical navigation stacks links from top to bottom.
  • Horizontal navigation places links side by side.
  • Padding makes navigation links easier to click.