html - Color of link within H1 tag doesn't change why?

Question

I'm trying to change the color of a link within the h1 tag. Html code as follows:

    <h1 class="redheadline">
    <a href="">Link text color here..</a> 
    </h1>

The css code I'm trying to use is:

h1.redheadline {font-size: 1.75rem; color:red;}

The font size changes but the color of the link's text doesn't change. Where in the css code I have to add color? Thanks!

Answer 1

1. h1.headline and <h1 class="redheadline"> they are not the same class name.
2. Since its <a> element has a default color, it does not accept a color from its parent.

Chrome defaults:

To do this is to define the correct classes to override the default attributes of the element.

Returning to your question, we should define as h1.redheadline a { ... }.

You can run the code snippet.

h1.redheadline {
  font-size: 1.75rem;
}

h1.redheadline a {
  color: red;
}

<h1 class="redheadline">
  <a href="">Link text color here..</a>
</h1>