Beginners CSS question

[madcgimonk]

How do I make the links on my page a different color with CSS for both onmouseover and when it's just sitting there?

I want a rollover color effect.

Can you give me the snippet I would need to set the colors and how to setup the links I have made to use those codes?

Pretend the link

http://www.gohere.com

is a link. How could I make it..green when it's stale and red when the mouse is over it?

Thanks!

 

[madcgimonk]

Okay, I found some code:

a:link { color: #D0DDEE; font-weight: bold; text-decoration: none } 
a:hover { color: #DDFFFF; font-weight: bold; text-decoration: underline } 
a:active { color: maroon }
a:visited { color: #88CFEE; font-weight: normal; text-decoration: underline }

which works suprisingly well actually. But now I ran into another problem. Not all my links are on the same color background making some hard to read.

How can I setup different color codes for specific links? Can anyone show me an example?

Thanks

 

[Vragabond]

That code can be interpreted like this: a means anchor (<a>) element. Those names behind the colon are called pseudo classes and mean different states this element can appear in. W3 says that you should always put them in correct order for them to work correctly:

a:link { color: #D0DDEE; font-weight: bold; text-decoration: none }
a:visited { color: #88CFEE; font-weight: normal; text-decoration: underline } 
a:hover { color: #DDFFFF; font-weight: bold; text-decoration: underline }
a:active { color: maroon }

This should do it. Now, as we said, this applies to anchor element, so all your anchors will behave in this way. You have an option to assign this to specific group. These are called classes. In CSS you define class by making a dot. We will make a class called mylink that will apply only to anchor element:

a.mylink:link { color: red; }
a.mylink:visited { color: orange; } 
a.mylink:hover { color: #ffae00; }
a.mylink:active { color: #aa8900; }

In your code, you would reference such a link with:

<a href="[URL unfurl="true"]http://www.google.com"[/URL] [b]class="mylink"[/b] title="Visit this popular search engine">Google</a>

Your Google link will have different colors but everything else will be inherited from the code you posted. That means you need to have all eight lines of code in your style. Hope it makes sense.

 

[taylorantone]

Something else to keep in mind is that since you'll normally want a different link color/rollover color in different sections where the text and backgrounds are different. In those cases, I've found that it's easiest to just set you anchor properties for each section so that you don't have to enter a class for each link you create.

For example, let's say you have a div with the id="desc" and another div with the id="comments" and each one has a different background color and different text color. In your stylesheet, just do the following:

#desc {
blah blah blah
blah blah blah
}
#desc a:link { color: #D0DDEE; font-weight: bold; text-decoration: none } 
#decs a:hover { color: #DDFFFF; font-weight: bold; text-decoration: underline } 
#desc a:active { color: maroon }
#desc a:visited { color: #88CFEE; font-weight: normal; text-decoration: underline }

and

#comments {
blah blah blah
blah blah blah
}
#comments a:link { color: #BBB; font-weight: bold; text-decoration: none } 
#comments a:hover { color: #FF9900; font-weight: bold; text-decoration: underline } 
#comments a:active { color: blue }
#comments a:visited { color: #BBB; font-weight: normal; text-decoration: underline }

Now, in each section, whenever you want insert a link you just have to use the standard format without identifying a class.