Link Colors and Bookmarks

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.

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.
2. Link to it with href="#the-id".

<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

<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

<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.