SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    0 Post(s)
    0 Thread(s)

    To id or not to id?

    Alright, I know this has been discussed in the past, but I don't know that I've ever seen an explanation that was clear enough for me to put this issue to bed.

    While I _think_ I might, possibly, maybe understand how these work, I'm not sure.


    Can anyone please describe, possibly even with examples, when to use # and id= and when to use . and class= ? Why use one over the other, what difference does it make, can you go wrong by always use . and class=, etc.?

    If you think a good explanation has already been given, please provide a link to that topic. If you feel there is a good online tutorial with a _complete_ explanation, please point me in the right direction!

    Thank you so much.

  2. #2
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Ayr, scotland
    0 Post(s)
    0 Thread(s)
    ID's are used only once on a page and are mainly used for scripting purposes (accessed through getElementById). They can also be used to 'group' your css to related areas of your page.

    For example, I often ID parts of my page 'header', 'content', 'rightbar' etc. this means that in my stylesheet I can define the css for each of these areas independantly. For example:

    #content p{
    can be different from
    #rightbar p{

    without me needing to use a class on every paragraph in the rightbar thats got a different style than the content. follow??

    classes on the other hand can be used as many times as you want on a page. Instead of the above I could have had:



    and applied them to each <p> in turn.

    You could do it with classes, theres certainly nothing wrong with that but I've found that using ID's where appropriate makes your css more logical to follow and your html cleaner and more pure

    So to recap.

    # ID's can only be used once on a page.
    # They are a standard way of interacting with the DOM via javascript.
    # They can make your css more logical and you html easyier to understand.
    # Classes are used to assign the same style to multiple items on a page.




Posting Permissions

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