I don't want all <a>s to be blue

[myrrh]

In my style sheet:

a
{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color: blue;
margin:0px;
}

But when I use an intradocument link:

<a name="penguin">

Naturally all text following it is blue. How can I use in-line styles to make the following text black yet have a following link remain blue?

Or, is it better to have it defined on the external sheet? If so, how?

[jdMorgan]

Use attribute selectors to style <a name> differently from <a href>:

a {
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color: blue;
margin:0px;
}
[b]a[name] {
color: black;
}[/b]

The a[name] style inherits all attributes of the generic "a" style, except that the color is changed.

Ref: [w3.org...]

I really don't recommend changing the intra-page link style -- People are simply used to blue links, and may not click on links of other colors -- A black link is simply going to look like underlined text (well, unless you set its text-decoration to 'none').

Jim

[edited by: jdMorgan at 2:32 am (utc) on July 12, 2006]

[encyclo]

When you say that "all the text following... is blue", I assume you are talking about the text before the closing

</a>

after the

<a name="penguin">

- it is important to always close the anchor element. Check your page with the HTML validator [validator.w3.org] to find any syntax errors in your page.

Two things,

a[name]

may have cross-browser compatibility issues (I'm not sure IE can handle it), and secondly using

<a name="foo">

is discorauged in favor of using an

id

attribute on a suitable block-level element - this negates the need for separate styles for named anchors as well as the unnecessary extra markup.

For example, if you want to link to a particular heading, you can use:

<h2 [b]id="penguin"[/b]>All about penguins</h2>

And link with the usual:

<a href="#penguin">Go to the Penguin section</a>

[Setek]

To confirm what encyclo pointed out, no,

selector[attribute]

is not supported by IE - although standards-compliant browsers handle it.

And using an

id

as your internal anchor is a much better idea :)

[edit]
P.S.: If you really need to use

<a name="foo">foo</a>

and don't want the hovering, I believe there's a method to single out only links - not internal anchor points:

a:link,a:visited { color: #f00; }
a:link:hover { color: #900; }

I've only tested briefly (IE 6 & Firefox 1.5.0.4 on Windows) but as far as I know this works fine.
[/edit]

[edited by: Setek at 3:04 am (utc) on July 12, 2006]

[bedlam]

Use attribute selectors to style <a name> differently from <a href>:

It's definitely good to know about this technique, but it's going to be a source of grief unless you also know that IE Windows does not support attribute selectors.

However, there are alternatives:

• IE can use javascript expressions in stylesheets; see this thread [webmasterworld.com] and this one [webmasterworld.com]
  
• You can use css classes or other types of selectors
  

To use a class, you'd just do something like this in the stylesheet:

.alternateLink { color:#090; }

...and this in the html:

<a name="foo" class="alternateLink">Foo</a>

There are several other possibilities, but it's a lot to get into here. You may want to have a look at the css forum's own css crash course [webmasterworld.com].

I really don't recommend changing the intra-page link style -- People are simply used to blue links

It's smart to take this into consideration, but I don't think it's that serious an issue in many circumstances--WebmasterWorld for example uses black links (though, to be sure, it also has an extremely tech-savvy audience).

My own recommendation for link colours would simply be to make sure they use both colour and another visual cue to distinguish them from the regular text. So, a red link may be fine, but a red, underlined link or a red, bold link will be better.

-b