First let me say, great little boards here, gang.

I'd like to ask a quick question as I'm working with my first site that will strictly use CSS for it's layout.

You can find my dev work here: http://www2.silentlightning.net

If you'll notice in the news windows of the postings that the bottom blue bar has links too dark to view them. I'd like to make those links a diff color than the links on the rest of the site.

Here is a snippet of the css:

a {
color: #000066;
text-decoration: none;
}
a:hover {
color: #000066;
text-decoration: underline overline;
}
.infobar{
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
border-bottom: #ccc 1px solid;
border-left: #fff 1px solid;
border-right: #ccc 1px solid;
border-top: #fff 1px solid;
background-color: #e2e2e2;
color: white;
font: 10px tahoma, arial, verdana, helvetica, sans-serif;
background-image : url(images/cap1.gif);
}


As you can see the .infobar is the section with the links that are too dark. My question is basically how do I add link and hover info in the .infobar portion so that it only affects the infobar links and not the rest of the site. This IS possible, eh?

a.infobar {whatever css;}
a.infobar:hover {whatever css;}

Well thanks for the tip on creating the new css code, but my concern really lies in how to get it in use on the actual php page.

It's not like I can just type:

<div class='infobar' 'a.infobar' 'a.infobar:hover'>


You know what I mean. Writing the next css piece was easy. And I should have been more clear, I'm sorry.

Suggestion?

you just have to stick with the same class and it should affect the area...

<div class="infobar">
links and stuff here
</div>

the examples in my previous post show the class of infobar on the link properties, so your whole example would be...

a {
color: #000066;
text-decoration: none;
}
a:hover {
color: #000066;
text-decoration: underline overline;
}
a.infobar {
whatever css;
}
a.infobar:hover {
whatever css;
}
.infobar{
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
border-bottom: #ccc 1px solid;
border-left: #fff 1px solid;
border-right: #ccc 1px solid;
border-top: #fff 1px solid;
background-color: #e2e2e2;
color: white;
font: 10px tahoma, arial, verdana, helvetica, sans-serif;
background-image : url(images/cap1.gif);
}

so the div containing class="infobar" will pickup the normal css specified as well as the link classes for it.

Nope. Didn't work.

I'm wondering if there is something inside the page elsewhere that I'm missing.

Hmmmm...