Grow your CSS skills. Land your dream job.

Anchor Tag Conflicting with h2 Properties

  • # January 18, 2013 at 7:27 pm

    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:

    “>< ?php the_title(); ?>

    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!

    # January 18, 2013 at 7:34 pm

    h2 a {
    color #fff;
    }

    # January 18, 2013 at 8:30 pm

    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!

    # January 18, 2013 at 8:39 pm

    [You sure?](http://codepen.io/katbella5/pen/mCesK “Works for me.”)

    # January 18, 2013 at 8:47 pm

    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.

    # January 18, 2013 at 8:55 pm

    Sweet!

    # January 18, 2013 at 8:59 pm

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".