However, most designers prefer to dictate their own
color schemes rather than having blue and purple links peppering their designs. In my
view, this is fine. Despite what some usability gurus claim, most web users these days probably
don??™t even know what the default link colors are, and so hardly miss them.
In HTML, you may have seen custom link colors being set for the link, active, and
visited states via the link, alink, and vlink attributes of the body element. These attributes
are deprecated, though, and should be avoided. This is a good thing, because you
need to define them in the body element of every page of your site, which is a tiresome
process??”even more so if they later need changing; as you might have guessed, it??™s easier
to define link states in CSS.
USING LINKS AND CREATING NAVIGATION
155
5
Defining link states with CSS
CSS has advantages over the obsolete HTML method of defining link states. You gain control
over the hover and focus states and can do far more than just edit the state colors??”
although that??™s what we??™re going to do first.
Anchors can be styled by using a tag selector:
a {
color: #3366cc;
}
In this example, all anchors on the page??”including links??”are turned to a medium blue.
However, individual states can be defined by using pseudo-class selectors (so called
because they have the same effect as applying a class, even though no class is applied to
the element):
a:link {
color: #3366cc;
}
a:visited {
color: #666699;
}
a:hover {
color: #0066ff;
}
a:focus {
background-color: #ffff00;
}
a:active {
color: #cc00ff;
}
Correctly ordering link states
The various states have been defined in a specific order in the previous example: link,
visited, hover, focus, active.
Pages:
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241