×
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
2000    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
I never teach my pupils, I only provide the conditions in which they can learn.
Albert Einstein
193
44.94
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     36732
01/01/2018     34923
28/06/2017     32404
02/08/2017     30469
25/06/2018     30216
15/05/2017     25401
01/08/2017     24701
06/07/2017     24612
14/07/2017     20225
21/04/2018     19839
softetechnologies