The Difference Between ID and Class

For those of you who may just be getting started with  separating the presentation of your website from the content of your site by using cascading style sheets, understanding the difference between using id and class attributes may seem overwhelming. The id attribute provides a unique identifier for an element within the document. The class attribute classifies this element into one or more subtypes. The biggest difference between the ID and class attribute is that an ID can be used only once in a document while class can be used as many times as needed.

Chris Coyier has written an excellent article The Difference Between ID and Class

We need to ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p> and <ul> will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes. For example <ul id=”nav”>, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this: <div id=”footer”>. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class=”sidebar-box”>. These ID’s and Classes the “hooks” we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too. But what is the difference between them?  Chris Coyier has written an excellent article  The Difference Between ID and Class

Speak Your Mind