Page 1 of 1

Link styles in CSS

Posted: Sat Aug 21, 2004 6:12 pm
by Xelmepa
Hello,

I've come upon this problem a couple of times, and being quite inexperienced in CSS I seek your advice.

The CSS I usually use for links in my pages if the following:

Code: Select all

a:link	{
	text-decoration: underline;
	color: black;
	}

a:visited	{
	text-decoration: underline;
	color: black;
	}

a:hover	{
	text-decoration: none;
	color: black;
	}
What this does is when the cursor is hovering over the mouse, the line disappears.

Now this set applies to my WHOLE page. Presume I'd want to have some different links in my page, for example I'd want the menu links not to be underlined, and instead become underlined when the mouse hovers over them.

How would I do that?

I suspect I could make classes but I'm not exactly sure how. I usually make classes like this:

Code: Select all

.class {
color: red;
}
Not sure how I have to do it in this case.
Also, if someone could give me a link to a CSS tutorial explaining the function of # : etc I would be thankful. I have looked at several tutorials but I've only actually seen these operators(?) in people's webpages.

Thank you very much.

Posted: Sat Aug 21, 2004 6:21 pm
by feyd
classes or id's is exactly how differing links are done..

# creates a hook on an id:

Code: Select all

#foo
{
color: green;
}

---------

<span id="foo">this is green</span>

Posted: Sat Aug 21, 2004 6:35 pm
by Xelmepa
Yes, I know that far. The question is how to get different onMouseOver (hover in CSS) effects on different links...

Any ideas?

Posted: Sat Aug 21, 2004 6:52 pm
by Xelmepa
Thanks feyd.

(Solved it over AIM).

Posted: Sat Aug 21, 2004 6:58 pm
by feyd

Code: Select all

.foo a:hover
&#123;
text-decoration: underline;
&#125;
for future generations.... :)