treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Anchor Tag Conflicting with h2 Properties

  • I am creating a WordPress website. Currently, the anchor tag is set to a mid-green color and I would like all of my links to be this color. Except for my titles for my blog posts, which is subsequently a link and an h2. I just found out today that even if I give a color property of white to my h2, it will be overridden by my anchor tag properties. So, with that said, I need to know how to make my blog posts white. Here is the code I am dealing with...

    Anchor:

    a {
        font-size: 1em;
        outline: none;
        color: #A7BC60;
        transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
        -moz-transition: all 0.3s ease-in; /* Firefox 4 */
        -o-transition: all 0.3s ease-in; /* Opera */
        text-decoration:none;
    }
    

    h2:

    h2 {
        font-size: 2em;
        font-family: 'Arvo', serif;
        font-weight: normal;
        color: #FFFFFF;
        text-shadow: 0px 2px #A7BC60;
    }
    

    And finally, the HTML and PHP:

      <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    

    I feel like this is something easy, but I have not been able to figure out how to bypass the anchor tag and use the properties for the h2. Thank you in advance!

  • h2 a {
        color #fff;
    }
    
  • I felt like an idiot for a second, because that is so bloody simple, but I just placed that code in there and it is still green. Hmph. I even pressed Ctrl + F5 and it stayed exactly the same.

    Edit: The only thing I can think to do is make a div class out of that one line of HTML and PHP, then apply properties to it in CSS.

    Edit: And I just tried that and nothing happened. Ugh!

  • If you first don't succeed, delete what you wrote and type it again. Thank you @theacefes for reminding me to double-check my code. Using CodePen to prove your point was helpful as well. You can't really argue with CodePen. If it works on there, it should work on my localhost. Sigh. So, thank you @TheDoc and @theacefes! It works now. I probably forgot a semicolon or a bracket the first time around.

  • Don't. For some reason I never catch it either untill I load it up. Anchor always needs to be specified