Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Css elements - changing one particular element

    Hi Guys,

    Quick question. Say throughout my site I have a style that's used throughout my site. I'd basically declare this in a external stylesheet:

    Code:
     h2 {
     color:#0064ac;
     background:#dadada;
     font-size:1.25em;
     padding:1px;
     padding-left:4px;
     text-transform:uppercase;
     margin-bottom:5px;
     width:500px;}
    And then call it in:

    Code:
    <h2>This is the h2 element</h2>
    But say on one page I wanted the width to be 300px, is there anyway I could simply change the width in the <h2></h2> tag on one page without messing with all the others? Or is it a case of redeclaring a new css style?

    Thanks

    Chris

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    You’d declare a new style with only the changes. You can do this by either giving the specific element a specific ID or class, or by using any difference to all the other elements. I.e. let’s say you have your h2s in a div at the top, and the specific ones that are supposed to look different are not at the top:

    Code:
    <div id="content">
      <h2>Headline</h2>
      <p>Lorem ipsum…</p>
      <p>second parapgraph</p>
      <h2>Another headline</h2>
      <p>Lorem ipsum…</p>
    </div>
    Then you would first define the styles that are for all h2s and then you’d declare a new rule that either only the h2s on top will get or the ones that are in the middle:

    Code:
    h2 {
       color:#0064ac;
       background:#dadada;
       font-size:1.25em;
       padding:1px;
       padding-left:4px;
       text-transform:uppercase;
       margin-bottom:5px;
       width:300px;
    }
    h2:first-child {width: 500px;}
    Here I’ve said all h2 are supposed to be 300px wide unless they are the first child of any element. You can get more specific if writing div > h2:first-child. Vice versa you could write:

    Code:
    h2 {
       color:#0064ac;
       background:#dadada;
       font-size:1.25em;
       padding:1px;
       padding-left:4px;
       text-transform:uppercase;
       margin-bottom:5px;
       width:500px;
    }
    p + h2 {width: 300px;}
    This says all h2 are 500px wide and only those that are directly following a paragraph (as sibling, not child or parent) should be 300px wide.

    Note that these methods only work in modern browsers (incl. IE 7), i.e. will be ignored by IE 6. If you wanna be fully compliant you’ll have to go with a class or ID for the specific headlines.
    Read up on CSS selectors, that may help.

  • Users who have thanked VIPStephan for this post:

    stfc_boy (01-23-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •