CODEWITHSUNDEEP
htmlcss
falcon356
falcon356

Reputation: 57

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

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!

Upvotes: 2

Views: 1773

Answers (3)

BOZ
BOZ

Reputation: 2020

  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>

Upvotes: 2

Gautam Kumar
Gautam Kumar

Reputation: 39

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;}

Upvotes: 2

John Benfer
John Benfer

Reputation: 19

Your css classname does not match 'redheadline'.

Upvotes: -1

Related Questions