Styling links

Where are we?

We’ve seen how you make links with the <a> tag. Let’s improve their look.

This page’s goals

By the end of this page, you should:

  • Know what the <a> tag’s pseudo-classes are.
  • Be able to use the pseudo-classes to create link effects.

Review: Basic text styling

You already know how to do basic text styling. For example, you might have style rules like this:


body { font-family: Verdana, Helvetica, sans-serif;
}
h1 { font-size: 24px; color: #660000; font-weight: bold;
}

Figure 1. Styling a heading

This looks like:

Rendered heading

Figure 2. Rendered heading

The first rule changes the font family of everything inside the <body> – and that’s everything on the page. The second rule changes all <h1> tags to 24 pixels high, dark red, and bold.

Here’s a class and an id:

...
.warning {
  border: 1px red solid;
  padding: 5px;
  color: red;
  font-weight: bold;
}
#truth {
  color: #006600;
  font-size: 20px;
  font-style: italic;
}
...
<p>This is a normal paragraph.</p>
<p class="warning">This is a warning.</p>
<p id="truth">Dogs are great!</p>
...

Figure 3. class and id

It looks like:

Rendered class and id

Figure 4. Rendered class and id

The rule in lines 2 to 7 creates a class that can be applied to several tags. Line 15 shows how to use it in HTML, with the class attribute.

Lines 8 to 12 create a rule for a specific element on the page, the one with the id of truth. Line 16 shows how an element is given an id. Only one element on the page can have that id.

You can see this in action.

The same rules apply to links. You can change the typeface, weight, color, and so on. For example:

...
a {
  color: #600000;
  font-weight: bold;
}
...
<p>Please see my <a href="/projects/index.html">projects</a> page.</p>
...

Figure 5. Simple link styling

It will look like:

Rendered link

Figure 6. Rendered link

A warning, though. Keep the links looking like links. You could do this:

a {
  color: #600000;
  font-weight: bold;
  text-decoration: none; /* Evil! */
}

Figure 7. Evil link styling

Line 4 removes the underlining. It would look like this:

Link, link, where is the link?

Figure 8. Link, link, where is the link?

People are used to seeing underlines. That’s how they know something is a link. You can get away with changing the font color from the default blue to something that better suits your site’s color scheme. But if you change the link color, users might not know a link when they see one.

The exception to this is in a navigation bar. The visual context tells users to expect links, even if they aren’t underlined.

Pseudo-classes

Move the mouse cursor over the this link (no need to click):

Learn about making links.

Notice how the text changes when the mouse cursor goes over it.

This is done with pseudo-classes. Pseudo-classes select elements based on some aspect of them. Here’s how the link you just saw was done:

<style type="text/css">
  a.sample1:hover {
    font-weight: bold;
    color: orange;}
</style>

<blockquote>
Learn about <a class="sample1" href="lesson/making-html-links">making links</a>.</blockquote>

Figure 9. Pseudo-class

The pseudo-class is the :hover in line 2. When the mouse is on a link with the class sample1, the text is made bold.

If I’d wanted to change all of the links on the page, I could have done this:

a:hover {font-weight: bold;}

Figure 10. Pseudo-class affecting all links

But I didn’t want to change all of the links.

Browsers use four pseudo-classes for links.

Pseudo-class Browsers use it to show...
:link Link that has not been visited
:visited Link that has been visited
:hover Mouse is over the link
:active Mouse is clicking the link

Figure 11. Pseudo-classes for links

What is the difference between link and visited? The difference is whether the user has visited the target of the link recently. Suppose page begin.html has a link to target.html, like this:

<a href="target.html">See the target</a>

When showing this link, the browser will apply the :link pseudo-class when the user has not visited the target of the link recently. The default styling is usually blue text:

Default styling for <code>:link</code>

Figure 12. Default styling for :link

However, the browser will apply the :visited pseudo-class when the user has visited the target of the link recently. The default styling is usually purple text:

Default styling for <code>:visited</code>

Figure 13. Default styling for :visited

:hover is the most used. The other pseudo-classes are used less frequently.

Exercise: Styling links

Create a page with light gray text on a black background. Links normally look like this:

Normal link

When the mouse cursor is on the links, invert the colors. That is, black text on a light gray background:

Hover link

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

The hover pseudo class applies not just to links, but to other things as well. Here’s an example:

...
p {
  margin: 10px;
  padding: 10px;
  background-color: #7534AA;
  color: white;
}
p:hover {
  background-color: #B484DA;
}
...
<p>W00f!</p>
...

Figure 14. Hovering over a <p>

The <p> will look like this normally:

Hoverless

Figure 15. Hoverless

The <p> will change to this on hovering.

Hovery

Figure 16. Hovery

Notice that when the mouse is over the <p>, the browser applies both the p { } and p:hover { } rules. The background color in the p:hover { } rule replaces the background color in the p { } rule.

You can try it yourself.

Summary

On this page, you learned what the <a> tag’s pseudo-classes are, and how to use them to create link effects. The :hover tag is the most frequently used. Don’t remove underlining from links.

What now?

Let’s see how you can use styled links to create cool navigation bars.


How to...

Lessons

User login

Log in problems? Try here


Dogs