In learning HTML & CSS my earliest teacher was “View Source,” and an early obstacle was determining why some DIVs were given an ID while others a Class. They appeared to be interchangeable, and because I didn’t understand the difference, I avoided Classes entirely.
Eventually I discovered they’re as different as apples and bad metaphors.
In the context of a DIV, an ID does exactly what the term “I.D.” implies: it gives the DIV a name. And a DIV needs a unique name in order to be uniquely styled. Ah, but what if you want some of those DIVs to be similarly styled?
Classes.
Classes paint with a broader brush. Similar to the caste systems throughout history, you belong to a Class. Several elements can be part of the same Class. Hell, several different types of elements can be part of the same Class. You want your <h1>, the 2nd <p>, and your navigation DIV to have a blue background? Toss ‘em all in the same Class that you’ve defined in your CSS as having... a blue background. Easy peasy. Remember though, the DIV still needs an ID. The Class is in addition to it.
Consider a Chemistry classroom (Classroom). Each student has their own unique student ID but all of them share the “owns a Chemistry book” attribute. Unless you’re a bad student, I guess.
ID vs Class is an extremely common source of frustration early on, and I hope this might shed some light on the subject if you are having the same experience I did. As you get more comfortable you will find that elements can even have multiple Classes and you may find clever ways to mix and match Class styling throughout your pages. Good luck!
-Pixeltender
Any other thoughts, comments, ideas? Please share in the comments!
