Back
Next
CSS Tutorial guide us that CSS can be apply on links in entire website. You can apply what you already learned
in the previous lessons to links (i.e. change colors, fonts, underline, etc). The new thing is that
Cascading Style Sheet allows you to
define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor
is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you use
so-called pseudo-classes.
What is a pseudo-class in Cascading Style Sheet?
A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.
Let's look at an example. As you know, links are specified in HTML with <a> tags. We can therefore use a as a selector in CSS:
A link can have different states. For example, it can be visited or not visited.
You can use pseudo-classes to assign different styles to visited and unvisited links.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use a:link and a:visited for unvisited and visited links respectively. Links that are active have
the pseudo-class a:active and a:hover is when the cursor is on the link.
We will now go through each of the four pseudo-classes with examples and further explanation.
Pseudo-class link in CSS [link]
The pseudo-class :link is used for links leading to pages that the user has not visited.
In the code example below, unvisited links will be light blue.
a:link {
color: #6699CC;
}
Pseudo-class visited link in CSS [visited]
The pseudo-class :visited is used for links leading to pages that the user has visited. For example,
the code below would make all visited links dark purple:
a:visited {
color: #660099;
}
Pseudo-class active link in CSS [active]
The pseudo-class :active is used for links that are active in a webpage.
This example gives active links a yellow background color with Cascading Style
Sheet:
a:active {
background-color: #FFFF00;
}
Pseudo-class hover link in CSS [hover]
The pseudo-class :hover is used when the mouse pointer hovers over a link.
This can be used to create interesting effects. For example, if we want our links to be orange
and be italicized when the cursor is pointed at them, our CSS should look like this:
a:hover {
color: orange;
font-style: italic;
}
Example of Spacing between letters in CSS
As you will remember from lesson 5, the spacing between letters can be adjusted using the
property letter-spacing. This can be applied to links for a special effect:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Example of UPPERCASE and lowercase in CSS
In lesson 5 we looked at the property text-transform, which can switch between upper- and lowercase letters.
This can also be used to create an effect for links:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Example to Remove underline of links using CSS
A frequently asked question is how to remove the underlining of links with us of
Cascading Style Sheet?
You should consider carefully whether it is necessary to remove the underlining as it might
decrease usability of your website significantly. People are used to blue underlined links on
web pages and know that they can click on them. Even my mum knows that! If you change the
underlining and color of links there is a good chance that users will get confused and therefore
not get the full benefit of the content on your website.
That said, it is very simple to remove the underlining of links. As you will recall from
Cascading Style Sheet Guide, the property text-decoration can be used to determine whether text is underlined or not.
To remove underlining, simply set the value of text-decoration to none.
a {
text-decoration:none;
}
Alternatively, you can set text-decoration along with other properties for all four pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Back
Next
|