Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Simple CSS question

[StoaVio]

I'm looking to assign a different color, font, weight and size variable to some of the links on my site. For example, in the content area the links look a certain way but in the header I'd like them to appear differently. How can I do this? Would I use classes? By the way, I'm using an external style sheet. I'm kinda new to CSS.
Right now for example the main links look like this:

A:link {
color: #eeeeee;
text-decoration: underline;
font-weight: demi-bold;
}

A:hover {
color: #eeeeee;
text-decoration: underline;
font-weight: demi-bold;
}

------------------------------------------------------------------
Now, how would I make it so other links have different font/color/weight variables?
Would it be something like this?
------------------------------------------------------------------

A:link.class1 {
color: #000000;
text-decoration: blink;
font-weight: light;
}

A:hover.class1 {
color: #eeeeee;
text-decoration: underline;
font-weight: demi-bold;
}

------------------------------------------------------------------------

Like I said, I'm kinda new to CSS. Can someone help please?

[scarr105]

.Class1 a:visited{
color:#881C11;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bolder;
text-decoration: none;
}
.Class1 a:link{
text-decoration:none;
color:881C11;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bolder;
}
.Class1 a:active{
color:881C11;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bolder;
text-decoration: none;
}
.Class1 a:hover{
text-decoration:none;
color:B23427;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bolder;
}

[platinum]

a:link, a:visited, a:active, a:hover {
  color: #eeeeee;
  text-decoration: underline;
  font-weight: demi-bold;
}

a:hover {
  text-decoration: none;
}

That will set it all up for all "states". The underline disapears when you hover over it

[StoaVio]

Yea, I know how to setup the original states for links but what about links that I'd like to give other appearances too? What do I do for those? Would I assign a class or id?

[rrdega]

I think your first reply had that... Though that is not how I have done it. Here's a snippet of a page (urls mod'd) that works:

a:link.class1 {
  color: #606060;
  background: transparent;
  text-decoration: none;
}

a:visited.class1 {
  color: #606060;
  background: transparent;
  text-decoration: none;
}

a:active.class1 {
  color: #606060;
  background: transparent;
  text-decoration: none;
}

a:hover.class1 {
  color: #606060;
  background: transparent;
  text-decoration: underline;
}

And the HTML:

<a class="class1" href="http://www.yadaDomain.com" target="_blank">Yada, yada</a>

Though, based on the other reply, it could probably be done cleaner...

[Rich2k]

It should be

tag.classname:property {

}

so for the a links above with class defined would be

a.class1 {
color: #606060;
background: transparent;
text-decoration: none;
}

a.class1:hover {
color: #606060;
background: transparent;
text-decoration: none;
}

[StoaVio]

Thanks a lot guys!

[StoaVio]

I didn't know you could give anchors a class
<a class="" href="">link here</a>)

[rrdega]

Originally posted by StoaVio
I didn't know you could give anchors a class
<a class="" href="">link here</a>)

Yeppers! 'n, by the way, Rich's syntax is the Correct method... I have no idea where I came up with what I was using (and it did work), but I have now changed my sites' CSSs to use the correct syntax...

Thanx Rich!

[StoaVio]

Thanks guys! I really appreciate it. You're awesome