h3 and anchor tag styling issues

Question

I have the following html snippet which works correctly on my page:

<a href="url goes here" onclick="return ! window.open(this.href);"><h3>title goes here</h3></a>

using the following css

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

However, this is not valid xhtml as the <h3> tag should not be within a <a> tag.

When I move the <h3> tags outside of the <a> tags, the css does not seem to work, i.e. it loses it's style for some reason.

For example:

<h3><a href="url goes here" onclick="return ! window.open(this.href);">title goes here</a></h3>

with:

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

does not work the way it did with the <h3> tag within the <a> tags.

How can this be corrected?

Answer 1

You have to apply the style on <a> tag

try this

h3 a
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

Answer 2

This is because the styles for your anchor are taking precedence. You can simply change the stylesheet to

h3, h3 a /** Applies to both H3 and LINK inside H3 **/
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

This should fix the problem.