CSS Tutorial 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:

• 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:







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.