Specifies the name of the element type, and applies the style to all elements of that type.
Let's consider the following example:
h1 {
color: red;
font-family: Garamond, serif;
}
In this case, the elements are all the h1 headers in your document. All h1 headers will be red and, will have the font Garamond, which is a serif font type.
View Flash illustration of using type selectors
Let's say you want to change the style of specific paragraphs within your document (but not ALL the paragraphs). Type selectors would not work, as they are applied to all paragraphs. In this case, we should look to class selectors.
You have to use the class attribute in your HTML document. Assign the paragraphs which you want to style to the same class:
<p class="first"> This paragraph has been assigned to the class "first". </p>
The selector would look like this:
.first {
font-size : large;
text-align : center;
}
A class selector is made up of a dot, followed by the name of the class which you are styling.
Note that class selectors are not limited to elements of the same type. Both a paragraph and a header may be assigned to the same class, and the styling would be effective on both.
ID selectors style a specific element in your html document. No two elements in your html document may have the same ID. Let's look at how an ID may be assigned to an element.
<p id="disclaimer">This is a disclaimer.</p>
In this case, the ID "disclaimer" has been assigned to the above paragraph. To style the paragraph, key in the following rule:
#disclaimer {
font-size : large;
text-align : centre;
}
The ID selector is preceded by a hash (#), then the name of the element which you want to style.
(NOTE: Do not begin ID selectors with numbers, as it is illegal.)
View Flash illustration of using class and ID selectors