Stop named anchors changing colour

HTML & CSS
1

I use <A NAME=" "> around headings so that when I click a link from an index at the top of the page it jumps to the heading. However, once I add the <a … /a> tags to the heading it changes colour as though its a link.

If I have a class called .heading, in the stylesheet how do I make it so that .heading and ‘a’ tags attached to it are all the one font and colour? Something in one line along the lines of .heading, a, a variants etc = greyblue

2

if you have something like


<a ....><h3 class="heading">TEXT</h3></a>

find in the stylesheet file the .heading section and add


.heading, a .heading {
/* whatever here */
}

or if that still not fix, try add !important at the end of each style to force the styling


.heading, a .heading {
/* whatever here */
color: #000 !important;
text-decoration: none !important;
}
3

There are two ways you could get around this.

  1. You could, as you hinted, use .heading a{color:whatever; } (or h1 a, h2 a, h3 a , h4 a {color:whatever;} would work too… assuming you were only going to give the class heading to Hxs.

  2. the other is to style A’s and then style a:link {}.
    a{} will apply to all anchors weather they are links or not.
    a:link will apply only to HREF anchors.

hope that helps

4

Thanks for those posts. Got it working now but needed to do a bit of CCS tidying in the process as well.

5

A better way to do this is not use <a> at all on the heading. Instead, give the heading an ID:

<h3 id="special">TEXT</h3>

Then, at the top of the page, place a link like this:

<a href="#special">

That’s the modern way to do it. name=“” is outdated. :slight_smile:

6

Excellent suggestion. Old html dog needs to learn new tricks.