×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Basic CSS Syntax CSS Font property use to design font
CSS Link Property - CSS 3.0
2155    Arnab De    10/05/2017

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

softetechnologies

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
softetechnologies

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

softetechnologies

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.

Basic CSS Syntax CSS Font property use to design font
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.
Enter New Comment
Comment History
No Comment Found Yet.
Albert Einstein
The only source of knowledge is experience.
Albert Einstein
499
49.96
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     41001
01/01/2018     35638
28/06/2017     33618
25/06/2018     32592
02/08/2017     31869
06/07/2017     26486
01/08/2017     26403
15/05/2017     26074
14/07/2017     21384
21/04/2018     20395
softetechnologies