Quick Reach
The link styling in CSS
HTML links, <a href=””> can use CSS power to style in the web pages. You can apply different colors, styles, background, font size etc. in different states of a link by using the CSS link properties.
See an example of CSS-styled link
As such the links have four states:
- A link until it is not visited/clicked is the normal state of a link.
- As the mouse comes over a link, this is called hover state.
- As a link is clicked, this is called as the active state.
- After a link is visited, it is called the visited state of the link.
You may set different link properties for all these states, in order to distinguish the links that are visited or not or as the mouse comes over a link or a link is visited.
Below are a few examples of using each of these states and setting the link CSS properties.
Setting link CSS properties for normal state of link
Till a link is unvisited, it is called as the normal state of a link. The example below shows how to set CSS link properties: color, style, font size etc for a link in the normal state.
The first link is set with CSS link color, font style, and font size properties. The second link is set without an underline by using the text-decoration property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<html>
<head>
<style>
/*Using link */
.link1:link
{
color: #355681;
font-style: normal;
font-size: 15px;
}
.link2:link
{
color: #355681;
font-style: italic;
font-size: 15px;
text-decoration:none;
}
</style>
</head>
<body>
<div>
<a href=“http://www.example.com” class=“link1”>Example link without border</a><br /><br />
<a href=“http://www.example.com” class=“link2”>Example link without underline</a>
</div>
</body>
</html>
|
Setting link properties at hover state
This example shows setting the link properties in the hover state, as the mouse is over a link. The color and size will be changed as mouse comes over the link by using CSS a: hover property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<html>
<head>
<style>
/*Using link */
.link1:link
{
color: #355681;
font-style: normal;
font-size: 15px;
}
.link1:hover
{
color: #E84940;
font-size: 17px;
}
.link2:link
{
color: #355681;
font-style: italic;
font-size: 15px;
text-decoration:none;
}
.link2:hover
{
color: #008000;
font-style: normal;
font-size: 15px;
text-decoration:underline;
}
</style>
</head>
<body>
<div>
<a href=“http://www.example.com” class=“link1”>Example link without border</a><br /><br />
<a href=“http://www.example.com” class=“link2”>Example link without underline</a>
</div>
</body>
</html>
|
Setting link properties for active link by CSS a: active
In the following example, we will set the CSS link properties in an active state (as the link is clicked). The color and size will be changed as the mouse clicks in a link.
Note that, nothing will be changed as the mouse is over the link. The appearance will be changed once the mouse is clicked on the link by using CSS a: active.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<html>
<head>
<style>
/*Using link */
.link1:link
{
color: #355681;
font-style: normal;
font-size: 15px;
}
.link1:active
{
color: #E84940;
font-size: 17px;
}
.link2:link
{
color: #355681;
font-style: italic;
font-size: 15px;
text-decoration:none;
}
.link2:active
{
color: #008000;
font-style: normal;
font-size: 15px;
text-decoration:underline;
}
</style>
</head>
<body>
<div>
<a href=“http://www.example.com” class=“link1”>Example link without border</a><br /><br />
<a href=“http://www.example.com” class=“link2”>Example link without underline</a>
</div>
</body>
</html>
|
Setting link properties for visited link by CSS a: visited
To show your users that they have visited the link(s), you can use the visited state of a link. The CSS property used for that is a: visited as shown below.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<html>
<head>
<style>
/*Using link */
.link1:link
{
color: #355681;
font-style: normal;
font-size: 15px;
}
.link1:visited
{
color: #E84940;
font-size: 17px;
}
.link2:link
{
color: #355681;
font-style: italic;
font-size: 15px;
text-decoration:none;
}
.link2:visited
{
color: #008000;
font-style: normal;
font-size: 15px;
}
</style>
</head>
<body>
<div>
<a href=“http://www.example.com” class=“link1”>Example link for visited state</a><br /><br />
<a href=“http://www.example.com” class=“link2”>Example link without underline</a>
</div>
</body>
</html>
|
Also see CSS text color, CSS font size
Leave A Comment?