CSSShark - The Basic Class and ID Values
The CSS Know-How Site

The Basics

CLASS and ID

Both these attributes can be used with any HTML element. A CLASS is preceded by a dot (.), and an ID with a hash mark (#), then the CLASS or ID name and the declaration.

With the ID selector you identify an element to be an *unique instance* in a document.

You assign this element a name, like the NAME attribute of a form element, and it can be applied only once in a document, and this style rule with the ID selector can only apply to one single element.

An ID's name may interfere with other behaviors on the page if it has the same name as a behavior that is calling JavaScript function.

http://www.w3.org/TR/REC-CSS1#id-as-selector

You can declare a CLASS and apply this class to all elements inside the BODY, a <p>, a <span> and a <div> multiple times within the same document, on the same page, without any problems.

In essence, with classes you create your own HTML tags. The styling of the font for the content area for example can either be accomplished by re-defining the HTML tag <P>, or you create a class like .contentarea. Like HTML tags, classes can be re-used in a document, but unlike HTML tags, these classes can be applied either to different tags or to <DIV> and <SPAN>.

IDs (#) - due to their uniqueness - have more weight than Classes (.) - see Inheritance, Cascade.

The CSS Discuss List has a very good short introduction at Class vs. ID

Note: The CSS1 specifications did not allow the class or id name to start with a digit. That meant, #px14 was ok, #14px not. Remember that when you are tempted to name a class .14Verdana or similar. Also, underscores in class/id names were not allowed in the CSS1 specifications. That got changed later, but browsers like NN4.xx should not - and does not - accept names with underscores. Read more about this topic from Eric Meyer on DevEdge.

Second Note: Through experience I learned that some browsers react iffy to class/id names that are 'reserved' words in Javascript or SQL. I had IE5.5 throw a print error on *one* page (not on all the other pages) because of a class named 'top'. So if you encounter something strange with a class that's seems to be valid, proper and named 'main' or 'date' try renaming.

Then there are the Pseudo-Classes and the Pseudo-Elements: neither exist in HTML - they are not visible in the HTML code.

Pseudoclasses have the ability to change the style of a document's links, based on whether the links have been visited, or how the visitor is interacting with the document.
That means that Pseudo-classes offer the possibility to display the same element differently in various states. You find pseudo-classes used commonly in link presentations.

In theory, pseudo-classes like :hover apply to all elements, like <p>, or a <div>. To designate this element, the user has to do something, like pointing a mouse to it. But, as so often, that is the theory. Browser support at this time (October 2001) is almost non-existent (see http://www.xs4all.nl/~ppk/css2tests/hover.html).

Pseudo-elements like :first-letter and :first-line are called pseudo-elements because they allow you to set a style on a subpart of an element - for example the first line of a paragraph. That means that regardless of how the visitor resizes the window, the first line will be styled.

Other topics:

•  Syntax
•  Elements, Properties and Values
•  Links
•  DIVs and SPANs
•  CLASS and ID
•  Inheritance and
•  The Stylesheet