Entry

How can I change the default link styles?

Feb 26th, 2002 15:17
Denny De La Haye, Ben Gordon, Rey Nuņez,

IE4+/NN6+ supports the CSS link, active, visited, and hover "pseudo-
classes", which are used to set (or retrieve) the style of hypertext 
links (anchor elements) in a document.
Setting the link pseudo-class sets the style for unvisited links, or 
links that the user has not previously navigated to. Active sets the 
style for links that the user is currently navigating to, visited sets 
the style for links that the user has previously navigated, and hover 
sets the style of the link when the user's mouse hovers over the links.
The following style sheet code example (inserted within the HEAD of a 
document) sets styles for the different states of a hypertext link:
<style type="text/css">
  a:link {color:navy}
  a:visited {color:teal}
  a:active {color:maroon}
  a:hover {color:lime; background:navy; text-decoration:none; font-
variant:small-caps}
</style>
That snippet will apply the styles to all links within a page that the 
style sheet is embedded in. For efficiency and flexibility, if one 
intends to have all links within an entire site have the same styles, 
the above snippet can be declared in an external style sheet (a file 
with a .CSS extension), with each page that will use the styles linked 
to the style sheet via the LINK element. In the HEAD of each document 
that will refer to the external style sheet, insert:
<LINK rel="stylesheet" type="text/css" href="yourCSSfile.css">
(if you are writing XHTML, don't forget to use a trailing slash - like
so: <link rel="stylesheet" type="text/css" href="filename.css" /> )
Note that using pseudo-classes on elements other than the A element has 
no effect.
Note: a:link and a:visited are also supported by NN4.0 & up