Before going into real part let's have an idea about pseudo-class. A pseudo class allows you to take into account different conditions or events when defining a property for an HTML tag.
You can define a link by using <a href=""> attribute.
The link property can have different states like,
-Link is visited.
-Link is not visited.
-Link is active.
-Cursor is over the link.
and you can represent these states by pseudo class a:visited, a:link, a:active, a:hover respectively.
Let's now see example of each type of pseudo class CSS links.
1)Pseudo-class: link
The :link is for unvisited links. Suppose we want unvisited links will be displayed as green color. Then, do it inside CSS file as
a:link {
color: green;
}
2)Pseudo-class: visited
The :visited is used for links leading to pages that the user has visited. If you want that all visited page link will have color yellow. Then within CSS file write as,
a:visited {
color: yellow;
}
3)Pseudo-class: active
The :active is used for links that is active. If we want all active links will be displayed as background colored purple then write as,
a:active {
background-color: purple;
}
4)Pseudo-class: hover
The :hover is used when the mouse pointer goes over a link. If you want whenever mouse pointer goes over a link, link's color will be pink. Then write it as,
a:hover {
color: pink;
}
Finally, we can use http://arjudba.blogspot.com/2009/08/css-text-property-with-examples.html to add diversity of displaying links.
I tried to add some diversity in the following CSS and HTML. You run these in your environment to see effect.
Here is my mycss.css file.
a:link {
color: green;
text-decoration:none
}
a:visited {
color: yellow;
text-decoration:line-through;
}
a:active {
background-color: purple;
}
a:hover {
color: pink;
letter-spacing:40px;
text-transform:uppercase;
text-decoration:none;
}
And here goes a simple HTML,
<html>
<title>Links diversity with CSS
</title>
<link rel="stylesheet" href="mycss.css" type="text/css" />
<body>Here goes the links of
<a href="http://Arjudba.blogspot.com">Arju's Blog</a>
</body>
</html>
Related Documents
No comments:
Post a Comment