×
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
2465    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.
Swami Vivekananda
You cannot believe in God until you believe in yourself.
Swami Vivekananda
702
59.46
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     44335
01/01/2018     36725
25/06/2018     36297
28/06/2017     34765
02/08/2017     33319
01/08/2017     27719
06/07/2017     27482
15/05/2017     27080
14/07/2017     22795
11/09/2018     21440
softetechnologies