SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question When to use id or classes

    I did a quick search on this board to see if I could find a post that explained a bit more about using id's and classes. I am trying to figure out where it is appropriate to use one or the other.

    From what I have read and seen would it be correct to say:
    Use ID's for main blocks of content or blocks of text (ie just in the DIV/SPAN tag)
    Use Classes for individual HTML tags such as images and also for formating text

    It's just because when I begin to design my new site (which I am trying to leave tables behind in) I want to know how to best set up the css.

    Thank you.

    Laura
    ****************
    The Webmistress

  2. #2
    SitePoint Member deluks's Avatar
    Join Date
    Oct 2003
    Location
    Munich (Germany)
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ID: Layout purposes. Each ID is unique, meaning it can only be used once in your page, why they are used for layout. For example,

    Code:
    <div id="maincontent">
    block level or inline elements in here
    </div>
    Classes: can be used multiple times for formatting text. span would also work, example:

    Code:
    <span class="something">some text</span>
    To do a design I would recommended sketching a draft of the general layout. Then examine what ID's would you need. If you wanted a two layout with a repeating background then this would work:

    Code:
    <div id="leftside">
    navigation here
    </div>
    
    <div id="maincontent">
    content in here
    </div>
    Examining what you need first, then desigining it is the best way to start. Additionally, design your pages in parts, and develop in Firefox, then after each change, make sure Firefox and IE agree, that way, you won't develop 80 styles that will only work right in one browser, not that I have done that before

    Good luck.
    Ryan Butler

    Midwest Web Design

  4. #4
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Deluks link is worth looking at, it's always good to get it from the horses mouth.

    But in general my policy is this:

    IDs can only be used once so I tend only to use them when I'm 100% sure that it won't reoccur. So generally I'll stick to using ids when I'm making the site's template and I'll have a divs with ids with names like masthead, mainNav and subNav etc.

    For general styling, I'll use plain html selectors and use those divs for greater specificity. So I might have:
    Code:
    #subNav p{ font-size:0.8em; .....}
    Then I'll use classes for any special styling that might reoccur. So for example I might have an interview done and there'll obviously be questions followed by responses. There's obviously no <question> and <response> html tags so I'd give each p element a class name alternating between "question" and "response." Although, as I write that I realise you could just style the blockquote element for the responses and use the default p stlye for the questions. But it still works as an example

    HTH,
    John

  5. #5
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, Thanks that's great. Just the information I needed.
    ****************
    The Webmistress


Bookmarks

Posting Permissions

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