March 10th, 2019 
Nilesh Chaurasia CSS Links or Hyperlinks
CSS Links properties are used to modify the color, background color, padding and many more. CSS a Tag support many pseudo classes to modify the effects of the HTML Hyperlink Element.
Example 1 – Styling CSS Links with background color property
<!DOCTYPE html>
<html>
<head>
<style>
a:link
{
background-color: hotpink;
}
</style>
</head>
<body>
<a href="home.html">This is a link</a>
<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
</body>
</html>
The above code shows that how can you use CSS Links. And below image shows the result of the above code.
Here a link “home.html” is a link of a home page.
Pseudo-Classes of CSS Link
- link – link is a normal pseudo class and it is an unvisited link.
- visited – already a link is visited by the user is shown, through visited pseudo class.
- hover – if an user move mouses over an elements, through hover pseudo class.
- active – if an user click a link, through active pseudo class.
Example 2 – CSS a tag special designing technique
<!DOCTYPE html>
<html>
<head>
<style>
a:link
{
color: red;
}
a:visited
{
color: green;
}
a:hover
{
color: blue;
}
a:active
{
color: yellow;
}
</style>
</head>
<body>
<a href="home.html">Home</a> <a href="menu.html" target="">Menu</a> <a href="about.html">About</a> <a href="contact_us.html">Contact Us</a>
<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
</body>
</html>
The above code shows that how can you use Pseudo Classes to make link stylish.
Here a link is shows by the red color, visited link shows by green color, when you scroll your mouse over the link than it shows by color blue, and when you click to a link than it display by the color yellow.
Note: There are some rules allow to the Pseudo Classes. hove Must be apply after link and visited. active Must be apply after hover.
Text Decoration for CSS Hyperlinks
When you insert a link than by default this link shows with the underline. Text Decoration Property is mainly used to remove underlines from the links.
Example 3 – Text Decoration of Links
<!DOCTYPE html>
<html>
<head>
<style>
a:link
{
text-decoration: none;
color: blue;
}
a:visited
{
color: green;
}
a:hover
{
text-decoration: underline;
color: orange;
}
a:active
{
color: yellow;
}
</style>
</head>
<body>
<a href="home.html">Home</a> <a href="menu.html">Menu</a> <a href="about.html">About</a> <a href="contact_us.html">Contact Us</a>
<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
</body>
</html>
The above code shows that how can you remove underline from the link.
Buttons Link
If you want a link in the form of the button than you have to use CSS Properties to give the look and feel like a button.
Example 4 – Buttons Links
<!DOCTYPE html>
<html>
<head>
<style>
div
{
padding-top: 15px;
}
a:link, a:visited
{
background-color: green;
color: white;
padding: 14px 25px;
text-decoration: none;
}
a:hover, a:active
{
background-color: orange;
}
</style>
</head>
<body>
<div>
<a href="home.html">Home</a> <a href="menu.html">Menu</a> <a href="about.html">About</a>
<div>
<p>Lorem ipsum incidunt id aliquet risus feugiat. Sit amet cursus sit amet dictum sit amet justo donec.</p>
</body>
</html>
The above code shows that how can apply different properties to create a button.
Posted in 
Tags: 
Nice post. I was checking constantly this blog and I am impressed! Very useful info specifically the last part 🙂 I care for such info a lot. I was looking for this particular info for a long time. Thank you and good luck.