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

user_14890911 0
Viewed 943

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!

css html
3 Answers

The class name that you have given to h1 tag in html code is redheadline, but you are trying to apply the style on h1.headline. Hence it is not applying the style correctly.

You need to use the correct classname.

h1.redheadline{font-size: 1.75rem; color:red;}
user_106635920
  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:

enter image description here

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>

For your second question:

h1.redheadline a {
  font-size: 3rem;
  color: red;
}
<h1 class="redheadline">
  <a href="">Link text color here..</a> Pure Heading Text Here...
</h1>

user_111510400

Your css classname does not match 'redheadline'.

user_146650830
Related