JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 21: Creating Link Styles


In a webpage, links are usually shown in blue colour with an underline by most browsers. However, we can create styles for the links using CSS. Basically we can use the anchor pseudo-classes to customise the link styles. There are four anchor pseudo-classes:

21.1 a:link

The a:link pseudo class allows us to create styles for unvisited links, as shown in the following example:

a:link{
color:cyan;
text-decoration:none;
}

21.2 a:visited

The a:visited pseudo class allows us to created styles for visited links(links that have been clicked by users), as show in the following example:

a:visited{
color:pink;
text-decoration:underline;
}

21.3 a:hover

The a:hover pseudo class allows us to create styles for a link when the user places his mouse over the link, as show in the following example:

a:hover{
color:red;
text-decoration:underline;
}

21.4 a:active

The a:active pseudo class allows us to create styles for link at the moment it is being pressed by the user, as shown in the following example:

a:active{
color:blue;
text-decoration:underline;
}

Next, we shall combine the four pseudo classes to create styles for the following link:

<!DOCTYPE html>
<html>
<head>
<title>Pseudo Classes</title>
<style type=”text/css”>
a:link{  color:cyan;
text-decoration:none;
}
a:visited{  color:pink;
text-decoration:underline;
}
a:hover{  color:red;
text-decoration:underline;
}
a:active{  color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<p>We can create drop cap for a paragraph in CSS using the pseudo element first-letter. A drop cap is a large capital letter at the beginning of a paragraph. Besides,we can also create CSS styles for the first line of a paragraph using the pseudo element first-line.</p>

</body>
</html>
Click on  Example 21.1 to view the output




Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy