[SOLVED] Link styles in CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Xelmepa
Forum Commoner
Posts: 41
Joined: Sat Aug 24, 2002 3:02 pm
Location: Athens, Greece
Contact:

Link styles in CSS

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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>
User avatar
Xelmepa
Forum Commoner
Posts: 41
Joined: Sat Aug 24, 2002 3:02 pm
Location: Athens, Greece
Contact:

Post by Xelmepa »

Yes, I know that far. The question is how to get different onMouseOver (hover in CSS) effects on different links...

Any ideas?
User avatar
Xelmepa
Forum Commoner
Posts: 41
Joined: Sat Aug 24, 2002 3:02 pm
Location: Athens, Greece
Contact:

Post by Xelmepa »

Thanks feyd.

(Solved it over AIM).
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

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