more than one set of link styles

[gary in jersey]

can i do this if so what would i name them and how could i call them

is it as simple as the <a>in<a href.... calling a.link style

therefor if i call my style b.activelink would call it with <b href....

im way off the mark aint i...?

[DaveT]

Hello

Set it up like this:

<style>
a.1stlink:active, a.1stlink:visited, a.1stlink:visited {....}
a.1stlink:hover {...}

a.2ndlink:active, a.2ndlink:visited, a.2ndlink:visited {....}
a.2ndlink:hover {...}
</style>
.
.
.
<a href="page" class="1stlink">Link</a>...

<a href="page2" class="2ndlink">Link 2</a>


edit: replace{...} with css styles, of course.

[gary in jersey]

thanks dave

that looks pretty straight forward, had been trying span tags and div tags but had no joy, thanks again.

[gary in jersey]

sorry

it is not recogniseing the class statement and still takeing ref to origonal link styles

<td width="10">&nbsp;</td>
<td width="120" align="center" bgcolor="#006699"><a href="NETQUOTEVAR:NAVBCARTLINK" class="a.white:link">View cart</a></td>
<td width="10">&nbsp;</td>
<td width="120" align="center" bgcolor="#006699">NETQUOTEVAR:NAVBCHECKOUT</td>


style sheet----
a.white:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
}

a.white:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
}

a.white:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #003366;
}

a.white:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
}


<span> or <div> tags mayb....?

[afm]

Gary, I think you need to change

<td width="120" align="center" bgcolor="#006699"><a href="NETQUOTEVAR:NAVBCARTLINK" class="a.white:link">View cart</a></td>

to

<td width="120" align="center" bgcolor="#006699"><a href="NETQUOTEVAR:NAVBCARTLINK" class="white">View cart</a></td>

[afm]

Sorry, should have said that->

a.white:link is part of how you would define it in your css file and class="white" is the bit used to call it. The a stands for attribute, I think, rather than part of a list like a,b,c

[jont]

You should ideally declare the class after the actual tag ie <a class"white" NETQUOTEVAR.......>

The CSS declarations should also be set up

.white a:link
.white a:visited
.white a:hover
.white a:active

[jont]

The a stands for attribute, I think, rather than part of a list like a,b,c

the "a" stands for the anchor tag - as in what is used to create a link eg <a href"http ......>

[afm]

There you go - I knew someone would tell me what the a stood for!

I'm still learning all this myself, but it is an interesting way to learn by watching the problems other people are having!

[gary in jersey]

still no joy

all links i try and set stay with origonal links atributes, changed call to>>>

<td width="10">&nbsp;</td>
<td width="120" align="center" bgcolor="#006699"><a class="white" href="NETQUOTEVAR:NAVBCARTLINK">View basket</a></td>
<td width="10">&nbsp;</td>
<td width="120" align="center" bgcolor="#006699">NETQUOTEVAR:NAVBCHECKOUT</td>


changed style sheet as sugested by jont to

.white a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
}
etc.. etc..

?

[wjcampbe]

Gary,

You need to make the link <a href="....." class="white">

First classify the anchor as a link, then tell it what style to use. Makes sense?

[gary in jersey]

just tried this

<td width="120" align="center" bgcolor="#006699"><a href="NETQUOTEVAR:NAVBCARTLINK" class="white">View basket</a></td>

thanks bill it makes sence but it does not work in this case still taking atributes from origonal class this makes no sense to me as im not calling that class, or am i by virtue of the fact that its a link..?

[wjcampbe]

<td width="120" align="center" bgcolor="#006699"><a href="NETQUOTEVAR:NAVBCARTLINK"><span class="white">View basket</span></a></td>

Try that.

<added as afterthought>
OR

<td width="120" align="center" bgcolor="#006699"><span class="white"><a href="NETQUOTEVAR:NAVBCARTLINK">View basket</a></td>

[gary in jersey]

thanks bill

you cracked it with the second line of code, it makes good sence to me now another little wrinkle in the brain.

just one more thing why did jont ask me to specify class as ".white a:link" whats the . for is this just good practice or a necesety.

[wjcampbe]

.white names the class white

In css you can specify an html element (such as p, or td , or a) and apply a class using dot notation ( so you would have p.white and/or td.white and/or a.white) and apply conditions to each element individually.

Jont had you create a generic class (the .dot tells css this is a class) which can then be applied to any element. The a:link a:active and a:visited are pseudo classes that can only be assigned to the <a element in html

This particular bit of css could have been written

.white {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
}

.white a:link, a:active, a:visited {
color: #FFFFFF;
}

.white a:hover {
color: #003366;
}

you could then use <p class="white"> to apply the font properties to that paragraph.

Actually - I have just spotted that Jont suggested specifying the class before defining the anchor type - I look forward to his explanation of that, because he is streets ahead of me in css.