This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
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.
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.
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.