PDA

View Full Version : Changing Multiple Link Colors with a style sheet

TNeston
11-12-2002, 05:26 AM
Is it possible to have 2 or more 'Link Styles' controlled by 1 style sheet?

ex:

Here are attributes for the links on a page.

<style>

A:ACTIVE
{
font-family : Verdana;
font-size : 10px;
color : #CCCCCC;
text-decoration : none;
; font-weight: normal}

A:LINK
{
font-family : Verdana;
font-size : 10px;
color : #CCCCCC;
text-decoration : none;
; font-weight: normal}

A:VISITED
{
font-family : Verdana;
font-size : 10px;
color : #CCCCCC;
text-decoration : none;
; font-weight: normal}

A:HOVER
{
font-family : Verdana;
font-size : 10px;
color : #F14A12;
text-decoration : underline;
; font-weight: normal}

</style>

However, if I want to control how 2 or more links look on the same page with a style sheet and NOT using a font tag, is this possible?
TNeston
11-12-2002, 06:15 AM
I tested this a few different ways and it didn't seem to work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
a.blue.hover {font:bold 12px tahoma;color:blue}
a.red.hover {font:bold 12px tahoma;color:red}
</style>

</head>

<body>
<a class="blue" href="http://yahoo.com">Yahoo!</a>
<a class="red" href="http://cnn.com">CNN</a>
</body>
</html>
zoobie
11-12-2002, 07:24 AM
Sorry...I deleted because I wanted to find you another flexible way to do this. The link,active,visited, and hover have to go in a certain order to work.

Here ya go:

<html>
<head>
<style type="text/css">
a.style1:link, a.style1:active, a.style1:visited {font:bold 14px tahoma;color:blue}
a.style1:hover {font:bold 14px tahoma;color:#ffff00; text-decoration:overline underline;}
a.style2:link {font:normal 12px verdana;color:red}
a.style2:active {font:normal 12px verdana;color:black}
a.style2:visited {font:normal 12px verdana;color:green}
a.style2:hover {font:bold 12px verdana;color:blue}

</style>
</head>
<body bgcolor=#000000>

<a class="style1" href="http://yahoo.com">Yahoo!</a>
<br>
<a class="style2" href="http://cnn.com">CNN</a>
</body>
</html>
ionsurge
11-12-2002, 10:26 AM
Nice....


Ionsurge.
ronaldb66
11-12-2002, 12:42 PM
That, and the :hover pseudo class is first defined in CSS level 2 and is therefore not supported by all browsers, at least not all versions.
By the way, W3Schools states that :hover has to be preceded by :link and :visited, and that :active must follow :hover. The order should therefore be:

a:link
a:visited
a:hover
a:active

Replaced the dots with colons, the way i't's supposed to be...
zoobie
11-12-2002, 07:11 PM
Yes...I read that somewhere, too...but then why does this style work?

<style type="text/css">
a.style1:link, a.style1:active, a.style1:visited {font:bold 14px tahoma;color:blue}
a.style1:hover {font:bold 14px tahoma;color:#ffff00;}
</style>

I guess the browser figures it out.
cg9com
11-12-2002, 07:29 PM
Originally posted by zoobie
I guess the browser figures it out.

in IE you barely have to get anything right for it to work.
html is not strict, xhtml on the other hand.....
zoobie
11-12-2002, 10:27 PM
Originally posted by cg9com


in IE you barely have to get anything right for it to work.
That makes it really appealing for the webmasters and viewers alike. :D
TNeston
11-13-2002, 03:56 AM
Thank You Everyone, for making my life easier.

Tom