×
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
1829    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.
Nelson Mandela
An educated, enlightened and informed population is one of the surest ways of promoting the health of a democracy.
Nelson Mandela
2889
38.7
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     34306
28/06/2017     30940
26/05/2018     30853
02/08/2017     28850
25/06/2018     26168
15/05/2017     24598
01/08/2017     23447
06/07/2017     23179
21/04/2018     19206
14/07/2017     18464
softetechnologies