Differing h1 tags

Discussion in 'CSS' started by rowen77, Apr 3, 2009.

0
  1. #1
    I have a h1 tag where I want the margin-bottom to be 30px, and another h1 tag where I want it to be 60px

    How can I make different heading tags in CSS

    thanks 4 any help
     
    rowen77, Apr 3, 2009 IP
  2. Somesite

    Somesite Peon

    Messages:
    152
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There's a few ways of going about this, You could either define said margins manually <h1 style="margin-bottom: 30px;">blah</h1> within the page.

    Or you can define the header class - to do what you want via css file...

    style.css:

    .h1_margin_1 {
    margin-bottom: 30px;
    }
    .h1_margin_2 {
    margin-bottom: 60px;
    }

    page:

    <h1 class="h1_margin_1">blah</h1>
    <h1 class="h1_margin_2">blah</h1>
     
    Somesite, Apr 3, 2009 IP
    rowen77 likes this.
  3. Jalpari

    Jalpari Notable Member

    Messages:
    5,640
    Likes Received:
    137
    Best Answers:
    0
    Trophy Points:
    260
    #3
    as somesite said, add manual style <h1 style="margin-bottom: 30px;">text</h1> where u want.
     
    Jalpari, Apr 3, 2009 IP
  4. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Using inline styling dirties up your html, like said use css classes or id's
     
    007c, Apr 3, 2009 IP
  5. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #5
    Semantically, you should only have one <h1> element on a page. <h1> is like the title of a book. <h2> would be the chapters. More than one <h2> would make sense but not <h1>.
     
    drhowarddrfine, Apr 3, 2009 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    What he said. More than one H1 == /FAIL/

    You may want to explore how headings are SUPPOSED to work - which is to say like a tree. H1 is the trunk, H2's are branches off the trunk, Lower level headings are supposed to indicate subsections of the heading above it. If going down a heading level (never go down more than one!) ask yourself 'is this a subsection of the heading before it' - if it is not, it should be the same level or higher. If that same level is a H1, you have the WRONG ELEMENT as a H1... Which is why for most sites I make the h1 my site logo/name/banner since all the headings are subsections of the SITE. Kind of like putting the name of a book or newspaper at the top of every page - The first page may have the name of the paper bigger, and the title of the 'headline' bigger, but grammatically they are the same 'level' on every page (h1) or article (h2).
     
    deathshadow, Apr 4, 2009 IP
  7. Somesite

    Somesite Peon

    Messages:
    152
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Let me refine this, only one H1 per page. (Not just 1 all together) It's best if said H1 tag resembles the title of said page as well. H2-Hwhatever can be anything you wish, and be used as many times as you like on said one page.
     
    Somesite, Apr 4, 2009 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    So long as the order makes sense... Don't go H2 followed by a H5 - that makes no sense.

    Likewise don't use H5 in your sidebar because they are 'unrelated' because all you are doing is making them a subsection of whatever heading is before it... I see this all the time where someone makes a H5 in their footer, skipping H3 and H4 effectively making that heading a subsection of one of the H2 under the content area.
     
    deathshadow, Apr 4, 2009 IP