/    Sign up×
Community /Pin to ProfileBookmark

separate styles

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

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@Tim158Mar 17.2003 — 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>

?
Copy linkTweet thisAlerts:
@nkaisareMar 17.2003 — Just a note of caution: 4pt and 2pt fonts will be too small.
Copy linkTweet thisAlerts:
@JamieauthorMar 17.2003 — 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

?
Copy linkTweet thisAlerts:
@JamieauthorMar 18.2003 — 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
Copy linkTweet thisAlerts:
@eevailenMar 19.2003 — [i]Originally posted by Jamie [/i]

[B]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 [/B]
[/QUOTE]


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.
Copy linkTweet thisAlerts:
@Robert_WellockMar 19.2003 — Out of interest within CSS Times New Roman should be written:

"Times New Roman"

Because it has white space within the font name.
Copy linkTweet thisAlerts:
@JamieauthorMar 20.2003 — Thank you very much - it all makes so much more sense now!

Jamie?
×

Success!

Help @Jamie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...