coding pseudo classes on the same page problems

[swizzy]

How would I go about coding two different pseudo class styles on the same page without the style actions (default for all pages) interfering with other page style content links?

I want the :link and :hover colors and styles to be completely different.

Thanks for any advice. Much appreciated.

Miss Swizzy

 

[BillyRayPreachersSon]

Use classes on your anchors. e.g.:

a:hover {
   color: blue;
}

a.green:hover {
   color: green;
}

a.red:hover {
   color: red;
}

...

<a href="#">A blue link when hovered over</a>
<a href="#" class="red">A red link when hovered over</a>
<a href="#" class="green">A green link when hovered over</a>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[swizzy]

Hi Dan,

Thanks for your input. Actually I will post a link here to let you know what I'm talking about:

http://www.theartofpleasure.net/links.html

The other pages have links at the bottom of the page in the "copyright" div that I put together, but on the "links" page I tried what you said, but maybe I'm confused?

I want the text and colors in the "content" to be as such:

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #efbf95;
text-align: center;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #efbf95;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: c78e5d;
}

but the links in the copyright are affected the same way.

so, I write it as?

a.link
a.visited
a.hover

instead? when I applied these classes to the links, they didn't work

I coded them like this:

a.link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #efbf95;
text-align: center;
}
a.visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #efbf95;
}
a.hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: c78e5d;
}

I want to change the colors AND the text as well, completely different than the links in the copyright area.

swizzy

 

[vacunita]

Give them the individual class names.
quoting Dan:

a:hover {
color: blue;
}

a.[red]green[/red]:hover {
color: green;
}

a.[red]red[/red]:hover {
color: red;
}

...

<a href="#">A blue link when hovered over</a>
<a href="#" class="[red]red[/red]">A red link when hovered over</a>
<a href="#" class="[red]green[/red]">A green link when hovered over</a>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[swizzy]

Thanks Dan,

I'm sorry CSS is all so new to me.

Thanks for your help.

I'll keep trying

Swizzy

 

[swizzy]

Hi Dan,

This is the way I have it:

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
}
a.gold:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #efbf95;

a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #66CC99;
}
a.green:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #66CC99;
}


I apply a a.color:hover class style and apply it and it won't take. I even include the text style in there.

I need to change the text to 14pt (and keep the 10pt for the copyright)

am I writing it correctly?

I don't know it looks funny here:

http://www.theartofpleasure.net/links.html

This is the only thing about CSS I've had so many headaches with :^(

I guess I was getting confused because I thought class styles had to start with a (.) and a.green:hover starts with an "a".

*sigh*

 

[Vragabond]

http://www.htmldog.com/guides/cssbeginner/

Do the beginner tutorial, move on to the others. Then come back if you still have questions. We can help you with individual problems, but we cannot teach you all the css.

Class starts with a dot (.), elements are named, pseudo classes begin with a colon ) and ids begin with a hash (#). You can get more info on what selectors mean on SelectORacle.

So, what that code (a.color:hover) is telling you is:

anchor element (<a>)
that has a class of "color"
and is being hovered

will have that styling.

But then again, this was all explained by Dan.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[swizzy]

Thank you Vragabond,

I will read this tutorial source, it will be helpful, and you never fail to be helpful as well.

I'm looking forward to continuing on with CSS, I have quite a bit more to learn however, I'm having fits and starts!

Thanks again all,

Miss Swizzy