CSS class Selector

In CSS, the class selector is displayed with a point number:
. Center {Text-align:center}
In the above example, all HTML elements that have the center class are centered.
In the following HTML code, the H1 and P elements all have the center class. This means that both will comply with the rules in the. Center selector.
This heading would be center-aligned
This paragraph would also be center-aligned.
Note: The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.
As with IDs, class can also be used as a derivation selector:
. Fancy TD {
Color: #f60;
Background: #666;
}
In the example above, the table cell inside the larger element with the class name fancy will display the orange text in a gray background. (a larger element named Fancy may be a table or a div)
Elements can also be selected based on their classes:
td.fancy {
Color: #f60;
Background: #666;
}
In the example above, the table cell with the class name fancy will be orange with a gray background.
You can assign the class fancy to any number of any table elements. The cells that are labeled with fancy will be orange with a gray background. Cells that do not have a class assigned a name of fancy are not affected by this rule. It's also worth noting that the class-fancy paragraph will not be orange with a gray background, and of course any other element that is labeled fancy will not be affected by this rule. This is due to the way we write this rule, which is limited to the table unit labeled fancy (that is, using the TD element to select the fancy Class).