CSS Tutorial Lesson 21: Creating Link Styles

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone

[Lesson 20]<<[Contents]>>[Lesson 22]

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:

  • a:link
  • a:visited
  • a:hover
  • a:active

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;

}

 Now 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

[Lesson 20]<<[Contents]>>[Lesson 22]

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone