Maintain Original Formatting with Hyperlinks

Question

I am trying to set up links within a webpage to parts of the same page, but want to maintain the original text formatting, which was a simple h4 heading. I have tried many things, including putting the h4 setting and text-decoration set to none in a style, but while the underline from the link is removed, it will not revert back to the color and size of the h4 heading. Is there a way to accomplish this?

Answer 1

I'm not sure what your code looks like, but a structure like this would prevent the h4 styles from becoming messed up (jsFiddle):

HTML:

<a href="#contact" class="self_page">
    <h4>Contact Us</h4>
</a>

CSS:

h4 {
    color:#666333;
    font-family:Georgia,serif;
}
a.self_page {
    text-decoration:none;
    color:inherit;
}

Answer 2

If the markup is

<h4><a href="...">Some heading</a></h4>

(which uses the valid way of nesting h4 and a elements), and if the color of h4elements is black (the default), the following style sheet removes link formatting, making the heading text look just the same as if the a markup were not there:

h4 a {
  color: black;
  text-decoration: none;
}

If the color of h4 elements is not black, modify the style sheet rule that sets its color so that the selector h4 a is added. E.g., if it is h4 { color: orange }, change it to h4, h4 a { color: orange }. (You could make the link inherit its parent’s color, using h4 a { color: inherit }, but the inherit value is not supported by all browsers.)

If you want to hide the link even on mouseover, when the pointer (erroneously called “cursor” in CSS terminology) by default changes to a hand, you can add this:

h4 a {
   cursor: text;
}