How to set color & margin of link within a H1 tag?

[born2run]

Hi so I have the following css:

h1.headline {
 margin: 2rem auto 1.5rem; 
 font-size: 1.75rem;
 font-style: italic;
}

And I have the following h1 html:

<h1 class="headline">
<a href="">Link Title</a> 
</h1>

The code above works and it shows a headline of required margin/padding/fontsize etc.

However, I want to color the link to red too. What css should I use? If I add an "a" to the h1 css then the margin etc don't work.

Can anyone please help? Thanks!

[NickMNS]

h1.headline a

[born2run]

Nick the margins don’t work then for some weird reason.

[not2easy]

Have you changed the html to reflect the css changes? If you only changed the css and use the same html then it "won't work".

[NickMNS]

Have you changed the html to reflect the css changes?

What?

Nick the margins don’t work then for some weird reason.

I should have provided a better explanation, leave what you have in the OP, and add the style definition h1.headline a and then add only the definition of the link color to be red.

h1.headline a {
 color: "red"
}

[born2run]

Very interesting Nick! I’ll try this and revert back. Why did you split the css?

[NickMNS]

Why did you split the css?

It is not split, it is more specific. h1.headline applies to the h1 tag and will make changes to it only, whereas h1.headline a applies to all children of h1.headline that are "a" tags. I assume that when your margin was applied to h1 it worked for you, so if all you want is the change the color of the link then you just need to target the link. Note also that the "a" tag has default styles applied to it, so it wont inherit those styles from it's parent you need to style it specifically.

[born2run]

Aha yes it worked thanks Nick! :-) This one had me at my wit's end..