Grow your CSS skills. Land your dream job.

Override H1

  • # January 12, 2013 at 7:32 pm

    Hello,

    I’m trying to create an alternate header class. Default has a header color that is dark, but for my alternate I’d like it to be a lighter color because it will be sitting on a dark background.

    I have the following code for my default

    h1 {font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; font-size: 50px; font-weight: 300; line-height: 50px; letter-spacing: -1px; color: #707070; text-shadow: 1px 1px 0 white;}

    for my default I’ve only changed a few things, but the color for some reason will not be overridden.

    .bottom h1 {
    font-family: ‘GearedSlab’, Helvetica, Arial, sans-serif; font-size: 50px; font-weight: 300; line-height: 50px; letter-spacing: -1px; color: ##BFBFBF !important; text-shadow: none;

    }

    It’s strange because in my inspector I can see that all elements are being replaced except for the color. I’ve tried just creating a separate class that I just add to the h1 tags in the .bottom feature, but still nothing seems to override the color:.

    I am using Twitter Bootstrap so I’m not sure if that has something to do with it. Yes, I’ve already tried the !important tag as well. Suggestions?

    # January 12, 2013 at 7:33 pm

    Can you create a CodePen?

    # January 12, 2013 at 7:49 pm

    If that’s a straight copy/paste, it’s because you’ve got two `##` in front of your color declaration.

    # January 12, 2013 at 7:53 pm

    Thanks Doc. That was it. Such a stupid ##mistake.

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

You must be logged in to reply to this topic.

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