Download
    Interview Question     &Answer
Main Menu
CSS Link@ Shwetank education.com
Definition -  CSS Links can be classified in different ways.

The four links states are:
* a:link - a normal link
* a:visited - a link the user has visited
* a:hover - a link when the user mouses over it
* a:active - a link the moment it is clicked

CSS [Visited] Links
A link can have different states. For example, it can be visited or not visited. You can use different styles to visited and unvisited links.
a:link {
color: blue;
}
a:visited {
color: red;
}
CSS [active] Links
Active is used for links that are active in a webpage.
This example gives active links a yellow background color with Cascading Style Sheet:
a:active {
background-color: #FFFF00;
}
CSS [hover] Links
Hover is used when the mouse pointer hovers over a link. This can be used to create interesting effects. For example, if we want our links to be orange and be italicized when the cursor is pointed at them, our CSS should look like this:
a:hover {
color: orange;
font-style: italic;
}
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
a {
text-decoration:none;
}
Combine Example of Links
<html>
<head>
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes Background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>
Output

Mouse over the links to see them change layout.

This link changes color

This link changes font-size

This link changes background-color

This link changes font-family

This link changes text-decoration




IT  Projects Links
M-Tech Thesis
Php Project
Java Project
Asp.Net Project
Android Project
Vb .Net Project
Html Project

------------------------------- Electronics  Project
Networking
Embedded system
Telecom
Robotics
CCNA
------------------------------- Latest IT  News


Copyright 2010-2015    shwetankeducation.com
Privacy & Terms