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:
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;
}
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;
}
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;
}
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