PDA

View Full Version : CSS Issues



Dan
February 25th, 2010, 02:10
Hey folks,

I am in the middle of doing a design. I want to use just one stylesheet to take care of the CSS for me. But I have a problem.

One part of the page is colored in say #3366ff and has Hyperlinks.
Another part of the page is colored white and also has Hyperlinks.

Here is an example of the way the CSS is done for part A and part B. Makes it easier to explain:



.parta {
color: #222222;
background: #ffffff;
}
.partb {
color: #F1F1F1;
background: #3366FF;


Now, for them both to have separate hyperlink styles, I was certain I could do it this way:



.parta a:link, a:visited, a:active {
color: #494949;
}
.parta a:hover {
color: #282828;

And use the similar style in partb but different colors. But it doesn't work. It will either use one or the other on both or if there is a master style for links etc in the document, it uses that.
I was certain this would work.
Anyone have any ideas why not, or if it should?

Dynash
February 25th, 2010, 10:04
You need to use classes.



<style>
a.link_one:link { color: #FFFFFF; }
a.link_one:visited { color: #FFFFFF; }
a.link_one:active { color: #FFFFFF; }
a.link_one_sub:hover { color: #FFFFFF; } /* notice the difference, add the class to the hyperlink you wish to change */
</style>

Then to use it,


<a class="link_one" href="http://www.internetz.com"></a>
<a class="link_one_sub" href="http://www.internetz.com"></a>

iBrightDev
February 25th, 2010, 10:14
dan, do this...



<style>
.parta a:link, .parta a:visited, .parta a:active {
color: #3366ff;
}
.partb a:link, .partb a:visited, .partb a:active {
color: #FFF;
}
</style>
<div class="parta">
text and <a href="#">links</a> should be one color here.
</div>
<div class="partb">
text and <a href="#">links</a> should be another color here.
</div>

Dan
February 25th, 2010, 12:30
Ahhhh. Classes. I see. Thanks guys. :)

characteredu
March 20th, 2010, 08:33
I have just started learning CSS, I hope soon I will be pinching with CSS.