-->

CSS link tutorial

CSS link tutorial

CSS link tutorial

CSS link tutorial:


CSS link tutorial
HTML links can be nicely styled with CSS. E.g.


a{color: maroon; text-decoration:none;}

<!DOCTYPE html>
<html>
<head>
<style>
a{
color:maroon;
text-decoration:none;
}
</style>
</head>
<body>
<a href="http://www.myhtmlcode.com">CSS Tutorial</a>
</body>
</html>

 Now suppose you want the color of the link to look maroon but once the user clicks on the link it will show red so that the user can understand which links he has visited. There are special classes in CSS to do this.
There are several types of pseudo classes such as

a{.color:maroon;text-decoration:none;}
a:visited{color:red;}
a:hover{color: #000;text-decoration : underline;}
a:focus{color: magenta;}
a:active{color: yellow;}

See application:

<!DOCTYPE html>
<html>
<head>
<style>
a{
color:maroon;
text-decoration:none;
}
a:visited{
color:red;
}
a:hover{
color: #000;
text-decoration : underline;
}
a:focus{
color: magenta;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="http://www.myhtmlcode.com">CSS Tutorial</a>
</body>
</html>

To do styling with Sido class, the selector then has to give a special name (such as visited, active, hover, etc.) with a colon (:). Look at the names above to understand what works.

The style I have given with a: visited will only be applied to a link if it is visited. Again, if you move the mouse over the link due to a: hover, the color will be black and the line under the link will be removed.
Thus, if the link is active due to a: active, the styles here will be effective, thus the rest.

By default there is a line below the link if you want to remove text-decoration: none; You have to give as I have given in line number 3.

I have styled with one or two properties here. You can style any image using CSS and even give pictures.

Facebook Comments

Follow by Email