• Home
  • Idea Book

Face Off - Class v. ID

November 21st, 2007

What is the difference between a class and an ID in CSS? Both seem to behave identical, but they have different uses. A good coder knows when and how to use each one.

IDs:

  1. Can only be used once on a page
  2. Can be used with a class for the same element
  3. Used to identify one and only one specific element

Classes:

  1. Can be used several times on a page
  2. Can be used with other classes and IDs
  3. Reusable and can be applied to any element on a page

So what is this big who haw? If you have tried to use an ID multiple times I’m sure that you have noticed it works. Well the who haw is that it is not valid. This gets us into another discussion which is the importance of valid code, but for now we will hold off on that.

– Lets break it down. The only difference between a class and an ID is that a class can be reused and an ID cannot. –

Both classes and ID can use numbers, letters and some special characters, like an underscore. But be careful here. Upper case characters and lower case are different characters. Some browsers will be forgiving and treat “a” and “A” the same, but some will not and here you will run into problems. So be sure that your tags are identical.

Where did these names come from?

This will hopefully help you remember the purpose for each. A person’s ID is unique and individual to them. A class is made up of many people. bring this back to coding for the web. An element, for example one specific paragraph on a page, can have an ID unique to it. Also it can have a Class that it will share with all of the paragraphs on that page.

del.icio.us Slashdot Digg Facebook Technorati Google StumbleUpon Bookmark.it Diigo Squidoo

Posted in CSS, Web Development

No Responses to “Face Off - Class v. ID”

  1. There are currently no comments on this entry, want to be the first? Use the form on the right.






  • Just another Blog and narcissistic self esteem builder. If you think I have anything to say take a second and let me know - Post a comment - and you too can shamelessly promote yourself just as I do here. Have Fun!
  • Archives

    • June 2008
    • May 2008
    • April 2008
    • March 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • July 2007
  • Categories

    • Advertising
    • APIs
    • Cool Shit
    • CSS
    • Cyber Culture
    • Digital Marketing Conference
    • Idea Book
    • Javascript
    • Live
    • MySQL
    • Rant
    • Tools
    • Uncategorized
    • Web Development
    • Wordpress
  • Blogroll

    • 1 + 1 = 11
    • A List Apart
    • Dave Shea
    • Deb Morrison
    • Exact Center of the Internet
    • Logic + Emotion
    • Love is a Verb
    • Mashable
    • Micro Persuasion
    • Photomatt
    • Professor Christy’s Blog
    • Step into my World…
    • Straight Up With BK
  • Tags

    AJAX API Book Class Cool CSS Facebook FedEx Flash geocoding Google Google Maps ID Idea Book Images Innovation iPhone Javascript Jonathan Harris JSON Life MySQL News OpenSource Overview PackMapr PEAR HTTP_Request PHP Pingdom Politics Programming RSS School Starbucks Stats Tools Tutorial University of Oregon UPS USPS Web Trends Weiden + Kennedy What if Wordpress youTube

Powered by Wordpress | Design by Zach Blank
XHTML Strict | RSS Entries