EN
CSS - styling web page links (default, active, visited, hover)
3 points
In this article, we would like to show you how to style web page links using CSS.
Quick solution:
xxxxxxxxxx1
a:link { /* default link style (`a` element with `href` attribute) */2
color: black;3
}4
5
a:visited { /* visited link style, e.g. when user previously visited the link */6
color: green;7
}8
9
a:hover { /* hovered link style, e.g. when mouse cursor is over the link */10
color: orange;11
}12
13
a:active { /* active link style, e.g. when user is pressing mouse button on the link */14
color: yellowgreen;15
}Note:
It is important to keep the order of the styles above because they may not work in other configurations.
Preview:
In this example, we specify the styles for links on our web page using :link, :visited, :hover and :active pseudo-classes keeping the correct order.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
a:link { /* default link style (`a` element with `href` attribute) */7
color: black;8
}9
10
a:visited { /* visited link style, e.g. when user previously visited the link */11
color: green;12
}13
14
a:hover { /* hovered link style, e.g. when mouse cursor is over the link */15
color: orange;16
}17
18
a:active { /* active link style, e.g. when user is pressing mouse button on the link */19
color: yellowgreen;20
}21
22
</style>23
</head>24
<body>25
<p>Try to hover / open in new tab (visit) / press and hold (active) the links below to see the styles change</p>26
<a href="https://www.dirask.com/home">Go to the Dirask homepage</a><br/>27
<a href="https://www.dirask.com/snippets">Go to the Dirask snippets</a><br/>28
<a href="https://www.dirask.com/findings">Go to the Dirask findings</a>29
</body>30
</html>
