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
JamieHi,
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=http://www.webdeveloper.com/forum/archive/index.php/"link.htm">Link Text</a>
<a class="link2" href=http://www.webdeveloper.com/forum/archive/index.php/"link.htm">Link Text</a>
</code>
Just a note of caution: 4pt and 2pt fonts will be too small.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
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!!!)
JamieOriginally 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=http://www.webdeveloper.com/forum/archive/index.php/URL> to each page you want it to be in.Out of interest within CSS Times New Roman should be written:
"Times New Roman"
Because it has white space within the font name.Thank you very much - it all makes so much more sense now!
Jamie
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
JamieHi,
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=http://www.webdeveloper.com/forum/archive/index.php/"link.htm">Link Text</a>
<a class="link2" href=http://www.webdeveloper.com/forum/archive/index.php/"link.htm">Link Text</a>
</code>
Just a note of caution: 4pt and 2pt fonts will be too small.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
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!!!)
JamieOriginally 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=http://www.webdeveloper.com/forum/archive/index.php/URL> to each page you want it to be in.Out of interest within CSS Times New Roman should be written:
"Times New Roman"
Because it has white space within the font name.Thank you very much - it all makes so much more sense now!
Jamie