Class vs. ID

The ID attribute of an HTML tag is intended solely to provide a unique identifier. The CLASS attribute, however, was specifically designed to allow authors to assign styles to elements.

Strictly speaking, no two elements within a document (web page) can have the same ID. Anytime you add an ID attribute to a tag, its value should be different from that of any other element's ID on the page, even if they have different tag names. So a style rule with an ID selector can, at most, only apply to a single element on a page.

So why not just use an inline style instead of an ID selector in a style sheet? Well, you'll probably find it more convenient to keep all your style definitions in one place, rather than scattered throughout the document. And, if the style sheet is external, it can be shared by multiple pages.

The class selector, on the other hand, can be applied to several elements on a page. You can even make rules using the same class name with different tag names. As an example, given the following,

h3.this{
color: red;
}

p.this{
color: gray;
}

...

Danger

Proceed with caution!

the text within the H3 element would be red but the text within the P element would be gray.