separate styles

[Jamie]

Hiya

I was just wondering how I would create and link to 2 different style sheets which have got different 'hover' link characteristics (i.e. one may have 4pt font and the other may have 2 pt font)?

Hope this makes sense and thanks for your help in advance

regards

Jamie

[Tim158]

Hi,

Firstly, you only need one style sheet. You can do it by giving the different links different classes i.e.:

<code>
<style type="text/css">
a.link1:hover {
font-weight:900
}
a.link2:hover {
text-decoration: none
}
</style>
...
..
.
<a class="link1" href="link.htm">Link Text</a>
<a class="link2" href="link.htm">Link Text</a>
</code>

:)

[nkaisare]

Just a note of caution: 4pt and 2pt fonts will be too small.

[Jamie]

Thanks a million for both your speedy replies - they are great (and re. the 2 v 4 pt font sizes, that was merely to illustrate that I was trying to achieve a different hover characteristic for each)

Cheers again

Jamie
:D

[Jamie]

I was just wondering if I can take it one stage further and, for example, use the following as part of a linked sheet so that I can change sitewide rather than individual pages.

I have tried to do it myself but am getting a bit exasperated!

The styles are:

a.one:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
a.one:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
a.one:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}

a.two:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
a.two:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
a.two:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}

a.three:link {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
a.three:visited{color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
a.three:hover {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}

So really I guess I am wondering how to incorporate it into a style sheet and then link to it for different links?

Thanks in advance (again!!!)

Jamie

[eevailen]

Originally posted by Jamie
I was just wondering if I can take it one stage further and, for example, use the following as part of a linked sheet so that I can change sitewide rather than individual pages.

I have tried to do it myself but am getting a bit exasperated!

The styles are:

a.one:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
a.one:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
a.one:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}

a.two:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
a.two:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
a.two:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}

a.three:link {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
a.three:visited{color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
a.three:hover {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}

So really I guess I am wondering how to incorporate it into a style sheet and then link to it for different links?

Thanks in advance (again!!!)

Jamie

try copying that whole thing into a txt document, then saveing it as a txt file or css (doesnt matter)

then adding <link rel=stylesheet type=text/css href=URL> to each page you want it to be in.

[Robert Wellock]

Out of interest within CSS Times New Roman should be written:

"Times New Roman"

Because it has white space within the font name.

[Jamie]

Thank you very much - it all makes so much more sense now!

Jamie:D