Question

I have designed specified some CSS style for general hyperlinks. I want to specify some other CSS for a hyperlink heading inside a specific div.
Please have a look at following HTML code. I want to specify a different style for h2 heading in the div class box only.

<a href="example.com" title="title">Normal Link </a>

<div class ="box">
<h2><a href="example.com" title="heading">Heading Should be red. </a></h2>
    <a href="example.com" title="links">Should be normal green</a>
</div>

Here is CSS code:

a:link, a:visited{
    text-decoration: underline;
    color: green;
}

a:hover{
    text-decoration: none;
    }

.box{
    border: 1px dashed pink;
    width:400px;
    height: 100px;
    margin:10px 0px;
}

.box h2{
    color: red;
    font-size:24px;
}

and here is jsfiddle demo:
http://jsfiddle.net/HVX3d/1/

Answer 1

It looks like you want to style the tag in the h2, not the h2 itself. See here:

http://jsfiddle.net/Paulpro/HVX3d/2/

Since you are styling the anchor tag with css to be green. Styling the h2 to be red doesn’t do anything, it’s equivalent to the inline style:

<h2 style="color: red;">
    <a style="color: green;">
       This will be green...
    </a>
</h2>