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!

asked Jan 10 at 19:48

4

  • The class names in the css and html tag h1 are different. Try h1.redheadline{font-size: 1.75rem; color:red;}

    Jan 10 at 19:50

  • class name in html and css file arn't the same

    Jan 10 at 19:50

  • My sincere apologies I fixed the html code. But it won't work.. the color doesn't change. Do I have to add "a" to the css?

    Jan 10 at 19:56

  • Open your page in a browser and right click on it and select "View Inspector" or "Inspect Element" and there is a whole suite of tools in most modern browsers to tell you exactly what CSS is applied to which elements.

    Jan 10 at 19:59

3 Answers 3

  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>

answered Jan 10 at 19:58

4

  • I can write css code as h1.redheadline a {font-size:1.75rem; color:red;} ?

    Jan 10 at 20:09

  • @falcon356 yes, it is also right. But if you write text other than the <a> element. This time the text appears as the default size of h1. I'm adding an example for your question to the snippet.

    Jan 10 at 20:11

  • Btw u saying h1.redheadline a {.....} will make changes to other <a> tags too?

    Jan 10 at 20:16

  • Actually no. If there is only text inside the <h1> tag but outside the <a> tag, then the text will appear in the default size of <h1>.

    Jan 10 at 20:20

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

Dharman

24.2k 20 gold badges 64 silver badges 113 bronze badges

answered Jan 10 at 19:51

Your css classname does not match 'redheadline'.

answered Jan 10 at 19:52

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.