CSS Link Property
10-05-2017    296 times
CSS Link Property

CSS Link Property

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.

link color

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

Tutorial at home

CSS CODE

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> &lt;&lt;- link with under line </div>
</body>
</html>

Link Background
Link Background

Text Decoration

To remove the underline from a link we used the text-decoration property of CSS. Only two values are possible for this property.

  • none
  • underline
Tutorial at home

CSS CODE

DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a {
color: red;
text-decoration: none;
}
a:hover
{
color:green;
text-decoration:underline;
}

Link Background
Link Background


Background Color

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;
}

Advance Link

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

Tutorial at home
Tutorial at home

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.

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post