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:
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:
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.
Styling link text
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:
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:
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.
The link pseudo-classes
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:
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:
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:
When the mouse cursor is on the links, invert the colors. That is, black text on a light gray background:
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Hover is for more than links
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:
Figure 15. Hoverless
The <p> will change to this on hovering.
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.
