Links style
In this article we are going to learn about links style in css, how to style unvisited, visited, active, hovered and focused links by user in web page.
We learnt about css in general, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css, selectors css, positions in css, display in css, lists style in css, multiple css, fixed layout in css and liquid layout in css so, we will be focusing on links style.
Links style
Link style is used in Cascading Style Sheet to style unvisited, visited, active, hovered and focused links by users in webpages.
Unvisited link
Unvisited link is a link that a user did not clicked or visited yet and its text color remain default or same by using :link selector.
Let us create a link which a user did not visit yet, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
<style/>
</head>
<body>
<a href="">This is a link a user did not visit yet.</a>
</body>
</html>
So, we should have the following results and the link color is blue.
This is a link a user did not visit yet.Visited link
Visited link is a link that a user has alredy visited and its text color will change according to style settings by using :visited selector.
Let us create a link which a user has visited yet, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
a:visited {
color: red;
text-decoration: none;
}
<style/>
</head>
<body>
<a href="">This is a link that a user visited.</a>
</body>
</html>
So, we should have the following results and the link color is red.
This is a link a user visited.Hovered link
Hovered link is a link that a user has pointed a cursor over it and its text color will change according to style settings by using :hover selector.
Let us create a link that a user has pointed a cursor over it, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
a:hover {
color: green;
text-decoration: none;
}
<style/>
</head>
<body>
<a href="">This is a link that a user hovered.</a>
</body>
</html>
So, we should have the following results and the link color is green.
This is a link a user hovered.Focused link
Focused link is a link that a user has hovered and is ready to click it and its text color will change according to style settings by using :focus selector.
Let us create a link which a user did not visit yet, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
a:focus {
color: lime;
text-decoration: none;
}
<style/>
</head>
<body>
<a href="">This is a link that a user focused.</a>
</body>
</html>
So, we should have the following results and the link color is lime.
This is a link a user focused.Active link
Active link is a link that a user has clicked or pressed and its text color will change according to style settings by using :active selector.
Let us create a link which a user did not visit yet, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
a:active {
color: orange;
text-decoration: none;
}
<style/>
</head>
<body>
<a href="">This is an active link.</a>
</body>
</html>
So, we should have the following results and the link color is lime.
This is an active link.Let us sum up by creating a link with different selectors, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: red;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: none;
}
a:focus {
color: lime;
text-decoration: none;
}
a:active, {
color: orange;
text-decoration: none;
}
<style/>
</head>
<body>
<a href="">This is an active link.</a>
</body>
</html>
So, we should have the following results and this link will behave differently when the user interacts with it, when is not visited it will be blue, when visited it will be red, when hovered it will be green, when focused it will be lime and when active it will be orange.
This is an active link.