Warning: Undefined array key "StartingPoint" in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 107 Warning: Cannot modify header information - headers already sent by (output started at /customers/f/f/0/safaribears.de/httpd.www/content.php:107) in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 115 Warning: Undefined variable $WEB_ROOT in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 118 Warning: Cannot modify header information - headers already sent by (output started at /customers/f/f/0/safaribears.de/httpd.www/content.php:107) in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 118 Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 169 CSS Tutorial - Pseudo-Classes Elements - :link & :visited

These two pseudo classes are only working with links (<a href="...">), and with them one can change the look of a link on a page. All the styles can applied here, we can change text-color, text-style (underline...), borders, margins, and many other things.

In most browsers a link would look like this: I am a link. That wouldn't look good on pages that work a lot with design, say all text is blue anyway, it wouldn't stick out, or the background is blueish, or everything from text to images is in a reddish tone. Or just the personal preference of the site owner. Maybe he finds underlined links so boring, or he wants the color of the link to be the same as the rest of the text, whatever. There are plenty of reasons why one would want to change the looks of links.

/* This does affect all links, there is only the tag name a followed by the pseudo-class :link. */
a:link{
font-decoration:none;
border:dotted green 1px;
color:black;
padding-left:0.25em;
padding-right:0.25em;
}

/* This only affects links with the class speciallink, since that classname follows the tag name a, then followed by the pseudo-class :link. */
a.speciallink:link{
font-decoration:none;
border:dotted white 1px;
color:black;
padding-left:0.25em;
padding-right:0.25em;
}
This link does look quite different.