CSS precedence

  • kalico

    (@kalico)


    19 years, 10 months ago

    I’ve been all over the codex and the web, and haven’t found the key to this. Maybe I just don’t know how to word it in a search, to find the answers.

    I have all my links looking how I want them with CSS. But when I have a <h3> that is also a link, things get ugly. Instead of being the normal size h3 font, it’s small like my other <a> tags.

    The only fix I’ve found is to remove all the size attributes from my <a> tags, but then they are bigger than all the rest of the text on the page. If I put all my links in a class, I have to do a huge re-coding project. Not sure I want to take that on, but if I have to… 😐

    Any thoughts?

Viewing 4 replies - 1 through 4 (of 4 total)
  • maerk

    (@maerk)

    19 years, 10 months ago

    How are you using the CSS?

    Are you putting it in a style attribute directly on the a elements, or are you specifying it in an external stylesheet?

    Because any CSS set in style attributes will completely override everything, it has the highest precedence.

    It would be better to put something like the following in your stylesheet:

    h3 a:link { color: blue; }
    h3 a:visited { color: purple; }
    h3 a:hover { color: orange; }
    h3 a:active { color: red; }

    Obviously, you can set the CSS rules to whatever you want.

    yosemite

    (@yosemite)

    19 years, 10 months ago

    Inheritance is what your after, I think. Hypothetical: Duplicate your css selector/properties but add an H3 to the ‘qualifier’. Example:
    a{color:#909D73;font-size:1em;text-decoration:none;}
    and
    h3{font-size:1.75em;text-decoration:none;}
    h3 a{color:#909D73;text-decoration:none;}.

    This making any sense?

    Thread Starter kalico

    (@kalico)

    19 years, 10 months ago

    Thanks to both of you!

    I am using an external style sheet, but the h3 and a are in conflict. The a is (or was…) overriding the h3 properties.

    I think I’ve got the “inheritance” working quite nicely for this particular case. It’s also great to know that the inline style will override everything — just in case I get desperate. 🙂

    moshu

    (@moshu)

    19 years, 10 months ago

    The order:
    external stylesheet
    stylesheet in the head
    inline style

    The one coming later always overrides the previous one 🙂

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

The topic ‘CSS precedence’ is closed to new replies.