[Resolved] In need of help with external style sheets.

Davidc316

Hi ho,

I wonder if anyone can help me with this:

My goal is to design a webpage where the text links have different attributes.

Specifically, the background colour along the top of the page is dark blue so I would like those text links to be white on normal state and yellow on mouse-over (hover).

But I also have a yellow area below the dark section, so for links in that area of the page I would like the links to be a dark colour on normal state (probably red) and then for them to turn dark blue when you do a mouseover.

Ok, now so far I've created and linked a couple of external style sheets to the page. Each of the style sheet defines the link attributes that I want for whatever section the style is applied to.

The trouble is, both external style sheets feature statements of the following format:

a:link { color: #FFFFFF }
a:active { color: #FFFFFF }
a:visited { color: #FFFFFF }
a:hover { color: #FBBD5A }
a { text-decoration: none }

-That works a treat if you only have ONE type of link on the page, but I'm hoping to have two different types of links (one changing to a dark colour and the other going light on hover). The small "a"'s in the code above makes the rules applicable to the entire page.

So with the page I have right now I can either have it ALL one way or all the other way (depending on which CSS gets the last mention in the code).

Does anyone know how I can solve this problem and have two different hover effects in action on the one page?

I've searched the universe and I can't find an answer to this one.

Thanks!

steadyguy

create a <div> or <span> elements with an id (or class) where you want links to be different:

... lots of HTML ....

<div id="yellowBackGround">
... your links go here
</div>

then do this in your stylesheet:

a:link {color: #FFFFFF;}
a:active {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:hover {color: #FBBD5A;}
a {text-decoration: none;}

/that's exactly what you had before ... now add this (I'm using exactly the inverse of what's above for illustration): /

#yellowBackGround a:link {color: #000000;}
#yellowBackGround a:active {color: #000000;}
#yellowBackGround a:visited {color: #000000;}
#yellowBackGround a:hover {color: #A5DBBF;}

You can make as many of this as you like. If you use a class instead of an id, you can put it in multiple <div>'s but be sure to change the #'s to .s (periods) in the second set of rules.

Davidc316

What an amazing response!

I have checked out loads of books and loads of website tutorials and I can't find ANYONE who explains that stuff.

Where on Earth did you learn that???

[thread resolved with brass knobs on top]

laserlight

This document teaches a bit on that.

steadyguy

All over the place. A Google search for CSS Tutorial yields 179,000 results!

Davidc316

Steady- you must be a much better reader than me!

I can assure you I had been trying Google for 3 days and in that time I only found one solitary article which attempted to explain how to do the link hover colour trick (and personally speaking I don't think it explained it very well).

I can also tell you that last night I had a look at the official Dreamweaver manual and it absolutely said outright that it was not possible to make links do what I wanted them to do. That's even worse than not explaining it!!!

Anyway, thanks for the help guys and I'm so glad that I came to the forum for some assistance with this one. I'm very impressed and very grateful!

Laser- I'll be sure to add the link to my favourites. Thanks