Links
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 CSS 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?
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 {
color: blue;
}
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
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;
}
Unvisited links are light blue
This is a unvisited link
Pseudo-class: 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;
}
Visited links are dark purple
This is a visted link
Pseudo-class: active
The pseudo-class
:active
is used for links that are active.
This example gives active links a yellow background color:
a:active {
background-color: #FFFF00;
}
Active links get a yellow background
Click here and keep the button down
Pseudo-class: 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;
}
Hover effect on links!
Move the cursor over this link
Example 1: Effect when the cursor is over a link
It is particular popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class
:hover
.Example 1(a): Spacing between letters
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 1(a) : Change spacing between letters
Example of a link!
Example 1(b): UPPERCASE and lowercase
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 1b: Change between upper- and lowercase
Example of a link!
The two examples gives you an idea about the almost endless possibilities for combining different properties. You can create your own effects - give it a try!
Example 2: Remove underline of links
A frequently asked question is how to remove the underlining of links?
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 lesson 5, 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;
}
Example 2: Remove underlining from links
This is a example of a link without underlining!
Conclusion
In this lesson you have learned about pseudo-classes, using some of the properties from the previous lessons. This should give you an idea of some the possibilities CSS provides.
In the next lesson we will teach you how to define properties for specific elements and groups of elements.
0 comments:
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.