1. CSS intro
2. CSS stylesheets
3. CSS syntax
4. CSS Classes & ID's
5. CSS comments
6. CSS BG properties
7. CSS text properties
8. CSS font properties
9. CSS list properties
10. CSS border properties
11. CSS margin properties
12. CSS padding properties
13. CSS outline properties
14. CSS table properties
15. CSS dim properties
16. CSS class properties
17. CSS position properties
18. CSS pseudo classes
19. CSS pseudo elements
20. CSS shortcuts
21. CSS media types
22. CSS summary

CSS Classes and ID's

Why should a particular style be specified only for particular tags? Classes and ID's make it possible to specify a particular style for a variety of tags. With classes and ID's, you can also define different styles for the same HTML tag.

This tutorial focuses on:

• Classes
• ID's

Classes

With classes, you can specify different styles for the same HTML tag.

For example, you can specify two paragraphs to have different color text:

To specify a tag as part of a class, you have to use the class attribute within that tag:

Styles for classes are specified with the . (dot) character followed by the class name in an internal or external stylesheet.

In the above example, the class text is specified to have a font type of tahoma, a font size of 16 pixels, to be bold, and green. Any tag specified as part of the text class will get these properties.

Based on the stylesheet from above:

NOTE: Begin class names with letters only, not numbers. Class names that begin with numbers do not work in Mozilla/Firefox browsers.

ID's

ID's are specified with the # (pound sign) followed by the ID name in an internal or external stylesheet.

In this example, the text ID is specified to have a typeface of georgia, a font size of 18 pixels, to be bold, and blue. Any tag specified as part of the text ID will get these properties.

Based on the stylesheet from above:

NOTE: Begin ID names with letters only, not numbers. ID names that begin with numbers do not work in Mozilla/Firefox browsers.