Grow your CSS skills. Land your dream job.

Multiple h1, h2, h3 Selector Issue when also have separate css for h2 tag

  • # March 25, 2013 at 10:11 pm

    So here’s the problem I have. I wanted to be efficient and set all of my header tags to be the same font-family. So I used the code below. However it only appears to work when the multiple selector code is AFTER the single h2 code.

    If i place the multi-selector code BEFORE the h2 code then it ignores it completely. I’m pretty new to CSS so am sure there must be something easy that I’m missing. Here’s a link to the test page:

    http://www.jasonkoprowski.com/test/JK_Test.html

    I want the header to display using ‘Crimson Text’ font but seems to be defaulting to ‘Times New Roman’ (not even sure where it’s getting this from actually. It works find when i put the h1, h2, h3, h4, h5 code after but not before.

    h1, h2, h3, h4, h5 {
    font-family:”Crimson Text”, “Lucida Sans Unicode”,”Times New Roman”, serif;
    }

    h2 {
    color:#232323;
    font-style:normal;
    font-weight:500;
    letter-spacing:-1px;
    line-height:1.1em;
    margin:30px 0;
    text-align:center;
    font-size:42px;
    }

    To add even more to my confusion, when I added the code to Code Pen (http://codepen.io/anon/pen/EDpJg) it looks to be rendering correctly…so something wrong on my site?

    Any help you can offer would be greatly appreciated.

    Thank you,

    Koprowski

    # March 25, 2013 at 10:59 pm

    i pasted in the entire CSS from my page and now the Codepen.io link isn’t working either when multi-selector code is before the h2 code.

    http://codepen.io/anon/pen/EDpJg

    # March 25, 2013 at 11:12 pm

    The problem is you don’t need the style element tag in external css files. Just delete the
    <style type=”text/css”>
    and
    < /style>

    and it should work fine.

    # March 26, 2013 at 7:31 am

    Perfect thank you so much!

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".