FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Some years ago "link on web site" means a blue underlined text and mouse pointer change when a mouse over event fired. but today this concept is totaly change. CSS Link Property make the link on page are more stylist. We can change the color, font-family, background, decoration of a link.
We can change the link color depending on the state of the link. there are four state is possible
a:link : uninvited normal link.
a:visited : visited normal link.
a:hover : If user mouse over the link
a:active : If a link is is active
DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a
{
color: red;
}
a:hover
{
color:green;
}
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Link Demo 1</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div> <A href="http://www.tutorialathome.in">Click Me</A> <<- link with under line </div>
</body>
</html>
To remove the underline from a link we used the text-decoration property of CSS. Only two values are possible for this property.
CSS CODE
DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a {
color: red;
text-decoration: none;
}
a:hover
{
color:green;
text-decoration:underline;
}
we can change the background color of the link by background-color property
CSS CODE
DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a {
color: red;
text-decoration: none;
background-color: yellow;
}
a:hover
{
color:green;
text-decoration:underline;
background-color:#FFFFFF;
}
we can also put a button look in a ordinary link. For that we just change the CSS code. By changing the cursor property we can change default cursor.
CSS CODE
DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a:link, a:visited
{
background-color:#000099;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
opacity:0.3;
}a:hover, a:active
{
opacity:1;
cursor:default;
}
Note: Opacity property changes the opacity of an element. The value of the opacity always a fraction between 0-1. 0 mean complete transparent and 1 mean no transparent.
