We'll wrap up our discussion of classes by distilling the preceding information into usage guidelines for classes.
Guidelines for Using Classes
- Use a class if you want to specify a style that can be used for any element in the document that requires the same properties.
- Classes are applied to an element with the
classattribute:<tagName class="className"> content here ... </tagName> - There can be multiple elements within a document that use the same class.
You might, for example, have numerous uses of your company name in a document. If
you want every company name to be red, italic and 2em, it might make sense to
define a class named
"companyName"
which defines these properties.
If a heading contains only your company name you can apply the class to the heading tag:
<h3 class="companyName">Widgets Incorporated</h3>If later in your document you have the company name embedded inside a paragraph, you can apply the class to selected characters using the SPAN tag, assigning the companyName class to it:
<p> <span class="companyName">Widgets Incorporated</span>, the best! </p> - Any element can have multiple classes applied to it.
- Classes can be used multiple times in a document. You can use them whenever you need them!
- Remember that class names are case-sensitive and must conform to XHTML
naming conventions
!
Our next topic covers a very important and powerful component of CSS design, IDs.