Link Colors and Bookmarks

Links can change color depending on what you've done with them. And you can make links jump to spots on the same page!

Link states

A link can be in four states, and CSS can color each differently:

• a:link: a normal, unvisited link (default: blue, underlined).
• a:visited: a link you've already clicked (default: purple).
• a:hover: a link your mouse is hovering over.
• a:active: a link you're clicking right now.

css
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }

You can also style text-decoration (remove the underline!) and background-color.

Link bookmarks (jumping within a page)

A bookmark is a spot on a page you can jump to. Here's how:

1. Give the target an id.

1. Link to it with href="#the-id".

html
<a href="#chapter1">Jump to Chapter 1</a>

<h2 id="chapter1">Chapter 1</h2>

Click the link, and the page scrolls right to Chapter 1!

Jump to a bookmark on another page

html
<a href="guide.html#tips">See the tips section</a>

That opens guide.html and scrolls to the element with id="tips".

Jump to the top of a page

html
<a href="#">Back to top</a>

# with nothing after it means "the top of this page."

TL;DR

• Links have states: normal, visited, hover, active.
• Style them with CSS: a:hover is the hover state.
• Bookmarks: link to an id with href="#id".
• href="#" jumps to the top of the page.
• You can bookmark across pages too.