| |
|
Designing of style property of links by using CSS |
By using CSS we can manage our links with highlighting or can add effect when mouse moves over the link ( hover ). We can also tell the visitor what are the links already visited by using visited property. Now we can set this property in our style and will also learn how to override them by declaring inline property for the element.
Note that we have used internal style sheet here to assign style to the element, but it can be any external or inline style also.
While declaring the property and value of different styles for a link we have to use a particular order. Here is the order that is to be fallowed while assigning styles for the links.
A: link {}
A: Visitied {}
A: Hover {}
A: Active {}
This order is to be followed always. Now we will try to assign some property and value to this and use the style inside our head tag ( internal style sheet )
Here is the link which fallows the style property set by us in internal style sheet.
this is a link
Now here the complete code with internal style sheet and the above demo link code for your easy understanding. Note how the internal style sheet is used and link displays that.
<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
<!--
a:link {color: red; text-decoration: none; }
a:visited {color: #0000CC; text-decoration: none; }
a:hover {color: orange; text-decoration: underline; }
a:active {color: blue; }
-->
</style>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<a href=site_map.php >this is a link</a>
</body>
</html>
Now with this understanding let us move to next step on creating attractive hover links using CSS where the link background color and font color will change when mouse moves over them.
| |
|
|
|
