This is a CSS link properties tutorial where we will discuss four states of the link. These states are normal, visited, active, and hover. You will also learn to remove underline from links.
- Introduction to CSS Link Properties
- Link Property in CSS
- Visited Property in CSS
- Hover Property in CSS
- Action Property in CSS
- Text-Decoration Property in CSS
Introduction to CSS Link Properties
World Wide Web is nothing but a collection of links. If you want to go from one webpage to another webpage, you have to use the link. You can design links using CSS and customize according to your webpage.
a: link - This selector is used to design the normal state of the link. This is the state when the link has not been visited.
a: visited - This selector is used to design the visited state of the link. This is the state when the link has been visited by the user.
a: hover - This selector is used to design links of hover state. This is the state when the user mouse over to the link.
a: active - This selector is used to design the active state of links. This is the state when the link is on the clicked moment.
By using these selectors you can do advanced designing of links. Let's try to know about these selectors in detail.
Link property in CSS(a: link)
As I mentioned above, you can define the rules for the normal state of the link by the selector a: link. This is the state when you see links for the first time on a webpage and so far the link has not been visited. Let's see how you can use this selector. It has been explained through the below example.
/*
====================
Normal State:Before Visit
====================
*/
a:link {
color: blue;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
<!DOCTYPE html>
<html>
<head>
<title> a:link example </title>
<style>/*
====================
Normal State:Before Visit
====================
*/
a:link {
color: blue;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
</body>
</html>
In the above example, the link of the normal state of the color is defined blue. This example produces the below output.
Visited Property in CSS(a: visited)
By a: visited selector, you can define the rules for the state of the link when the link has been visited. This is an important selector. When you use it, users know which links have visited and which have not visited yet. It can be explained through the below example.
<!DOCTYPE html>
<html>
<head>
<title> a: visited example</title>
<style>
/*
====================
Normal State: Before Visit
====================
*/
a:link {
color: blue;
}
/*
===================
Visited State:After Visit
===================
*/
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
</body>
</html>
<html>
<head>
<title> a: visited example</title>
<style>
/*
====================
Normal State: Before Visit
====================
*/
a:link {
color: blue;
}
/*
===================
Visited State:After Visit
===================
*/
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
</body>
</html>
In the example given above unvisited links are in blue color, once the link has been visited, the link will be in red color. This example produces the below output.
Hover Property in CSS(a: hover)
When the user moves the mouse cursor to the link, you use a: hover selector to define what changes should be made.
For example, if you want to show the color and background of the link when the user moves the mouse cursor, you have to use a: hover. A link gets highlighted and looks different by using this selector. From this, it is also easy to know the link in a simple text. It has been explained through the below example.
<!DOCTYPE html>
<html>
<head>
<title> a: hover example </title>
<style>
/*
========================
Hover State:Mouse over the link
========================
*/
a:hover {
color: white;
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
<style>
/*
========================
Hover State:Mouse over the link
========================
*/
a:hover {
color: white;
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
</body>
</html>
In the above example, when the visitor moves the mouse cursor to the link, that link becomes white color and red background. This example produces the below output.
Active Property in CSS(a: active)
<!DOCTYPE html>
<html>
<head>
<title> a: active example </title>
<style>/*
================================
Active State:Clicked moment on the link
================================
*/
a:active {
color: red;
background-color: #ccc;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
</body>
</html>
In the above example, when the user clicks on the link, it becomes red color and background gray (#ccc). This example produces the below output.
Text-Decoration Property in CSS
If you want to remove underline from links, you can use the text-decoration property in CSS. By the same property, you can also show underline.
You can give two values for this property first one is none and the other is underline. It has been explained through the below example.
/*
========================
Remove Underline from links
========================
*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
<!DOCTYPE html>
<html>
<head>
<title> text-decoration example </title>
<style>/*
========================
Remove Underline from links
========================
*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank"> <b>Google</b> </a><br>
<a href="https://www.yahoo.com" target="_blank"> <b>Yahoo</b> </a><br>
<a href="https://www.mybloghelp.com" target="_blank"> <b>MyBlogHelp</b> </a>
</body>
</html>
I've been surfing online more than 4 hours today, yet I never found any interesting article like yours.
ReplyDeleteIt is pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the net will be a lot more useful than ever
before.