CSS and HTML links

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Not sure if this is the right place for a CSS question but I saw some other
CSS posts so here goes a pretty basic question.

I want the color of an HTML link to be blue on one section of my HTML page
and green in another section of the same page.

I am familiar with CSS and I know that I can use the a:link property to set
one color for the _entire_ page.

But I am having problems setting the link color on specific links.

Is this possible? If so, could you give me a brief example on how to do this?

TIA
 
I am not sure whether this is the right place to ask these questions,
either.

In your situation, your design will benefit from using CSS class rules to
identify links. For instance, if your code is as follows:

<div class="SectionOne"><a href="">Link 1</a><a href="">Link2</a></div>
<div class="SectionTwo"><a href="">Link 3</a><a href="">Link 4</a></div>

The CSS code to color links of the first section blue and links of the
second section green is as follows:

..SectionOne a { color: blue }
..SectionTwo a { color: green }

I would also highly recommend reading up on how CSS works in MSDN library:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/css_node_entry.asp

:DG<
 
While these other answers will work, there's a much simpler way to do it.
Just use different classes. For example:

a:link.blue
{
color: blue;
}
a:link.green
{
color: green;
}

Then, for your links:

<a class="blue" href="URL">Text</a>
<a class="green" href="URL">Text</a>
 
Sorry, the CSS should have looked like this:

a.blue:link
{
color: blue;
}
a.green:link
{
color: green;
}

And where I have :link, you can do the same things with :hover, :active, and
:visited.
 
Back
Top