How do I get 2 styles of H2 tags on the same page

Discussion in 'CSS' started by the taxidermist, Aug 12, 2008.

0
  1. #1
    Hey everyone,

    Im using wordpress 1st off, Im still new-ish to CSS no formal bg in programing... Anyhow, my problem is getting multiple h2 styles on the same page. I have ".entry h2' and ".pages h2, h2.page_header" I want to add another h2 style to another div on that same page but all it does it takes on the style of .entry h2 even tho it shows in firebug as being pulled from ".entry .split h2" What am I doing wrong? Whats the correct way this should be written?

    Here is the basic flow I'm pulling from firebug -

    .entry .split h2 {style.css (line 564)
    }
    .entry .split h2 {style.css (line 564)
    }
    .entry h2 {style.css (line 237)
    }
    .pages h2, h2.page_header {style.css (line 181)
    }
    .entry h2 {style.css (line 237)
    }
    .pages h2, h2.page_header {style.css (line 181)
    }
    h2 {style.css (line 116)
    }
    h1, h2, h3 {style.css (line 75)
    }

    THANKS!!!
     
    the taxidermist, Aug 12, 2008 IP
  2. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #2
    To get two styles of h2, use something like this in your HTML:

    
<h2 class="style1">Heading Style One</h2>
<h2 class="style2">Heading Style Two</h2>
    Code (markup):
    And this in your CSS:

    
h2.style1{
    color:#0f0;
}

h2.style2{
    color:#f00;
}
    Code (markup):
     
    blueparukia, Aug 12, 2008 IP
  3. Cobnut

    Cobnut Peon

    Messages:
    184
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ... or alternatively, define different H2 styles depending on their containing div:

    #div1 h2 {color:red}
#div2 h2 {color:blue}
    Code (markup):
    However, blueparukia's suggestion is usually the better way to go since it doesn't require you to keep track of multiple different definitions when your H2s could appear in lots of differently named divs.

    Jon
     
    Cobnut, Aug 13, 2008 IP
  4. the taxidermist

    the taxidermist Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    cool let me give this a shot.
     
    the taxidermist, Aug 13, 2008 IP
  5. the taxidermist

    the taxidermist Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ok so I did that, its still using the same style attributes from ".entry h2" Do I have to rewrite all the attributes from .entry h2 in "h2.style2" ? Is this what Im missing?

    Should I dummy down hy H2 tags at there simplest point and build up from there? Im trying to do this with out using multiple stylesheets as I would have done before.
     
    the taxidermist, Aug 13, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You'll need to combine the above techniques-- use
    .entry h2.newclass {
    stuff;
    }
    Because your other h2's are being referenced by their parents,and another by class alone... so since the one you want new styles on seems to be inside some parent with the class of .entry then you'll need that to be more specific than the other h2's who are only being referred to by the parent: .entry h2

    Hope that helps.

    Ah, somewhere on my main page I have a link to paul O'brien's How The Cascade Works article you might want to read... but it's in a long list of links at stommepoes.nl
     
    Stomme poes, Aug 13, 2008 IP