Over writing <a> modifier in CSS

[PupChow]

I applied a style to all the text links in a page with an external file, but for the top menu items, I would like them to have a different style than the rest of the links. What would be the best way to do that? I tried placing a <div> tag between the <a> tags:

<a href="test.htm"><div class="foo">link text</div></a>

It works, but it would add a linebreak after. Is there a way around this?

Thanks in advance!

[BonRouge]

I'm guessing that your menu is in a div (or maybe a table).
You just have to be specific in your css. If your menu's in a div called "menu" then in your css define the links like this :
#menu a:link {your styles...}
etc.

If you've put your menu in a table, just do the same thing - give your table an id.

I hope this helps.

Cheers

[createErrorMsg]

PupChow, welcome to WebmasterWorld.

BonRouge has this one right. I just wanted to add that this...

<a href="test.htm"><div class="foo">link text</div></a>

...is not valid code. <a>nchors are inline elements; <div>s are block elements. According to the W3 [w3.org] specs you cannot nest a block element inside of an inline element.

[PupChow]

Hey thanks a lot guys! That worked out beautifully. My menus are in a DIV and I added another CSS named .menu a:link {styles}.

However, using the same technique I run into a problem:

<div class="featuredred"><a href="monkey.htm">Eighteen Disciples Battle the Monkey King</a></div><p class="featured">After the Monkey King...</p>

What ended up happening is that the "Eighteen Disciples Battle the Monkey King" took on the style <a>, but when I mouse over the title, it jumps back to the style of featuredred's a:hover style... following is the actual CSS:

.featuredred {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #800716;
text-decoration: none;
}
.featuredred a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #800716;
text-decoration: underline;
}

Did I do something wrong when applying the style?

[DrDoc]

I would like them to have a different style than the rest of the links. What would be the best way to do that?

Give the link a class name:

<a href="somepage.html">Link text</a>
<a href="somepage.html" class="foo">Link text</a>

a {
font-family: 'Times New Roman';
}
a.foo {
font-family: Arial;
}

[Philosopher]

It is resetting because a:link only sets the style for the link when it is not in hover mode and when it is not a visited link.

You could also just set the hover and visited properties exactly as you did for the a:link

Something like

.menu a:link, .menu a:visited, .menu a:hover {

}

[PupChow]

Thanks guys! Man, seems like I have a lot to learn in reference to CSS... can somebody suggest a good place to learn all these? It seems like there are many different methods of applying CSS to a site.