Examples of how class selectors are used in CSS

In CSS, the class selector is preceded by the class name with a dot number, if the multi-class is not to hit more than one point number and the. Important.urgent this form.

Class Selector
In CSS, the class selector is displayed with a dot number:

    . Center {Text-align:center}

In the example above, all HTML elements that have the center class are centered.
In the following HTML code, both the H1 and P elements have the center class. This means that both will adhere to the rules in the. Center selector.

   <H1 class= "center" > This heading'll 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 the ID, class can also be used as a derived selector:

. fancy td {         color: #f60;         Background: #666;         }
In the above example, the table cells inside the larger element with the class name fancy will display the orange text on a gray background. (a larger element called fancy may be a table or a p)
Elements can also be selected based on their classes:

    td.fancy {         color: #f60;         Background: #666;         }
In the example above, a table cell with the class name fancy will be orange with a gray background.

   <TD class= "Fancy" >
Multi-Class selectors

1. In HTML, a class value may contain a list of words separated by spaces. For example, if you want to mark a particular element as both important (important) and warning (warning), you can write (the order of the two words doesn't matter, warning important can be written as well):

<p class= "Important warning" >this paragraph is a very important warning.</p>
We assume that all elements of class important are bold, and that all elements of class warning are italic, and that all elements in class that contain both important and warning have a silver background. You can write:

. important {Font-weight:bold;}. Warning {font-weight:italic;}. important.warning {background:silver;}
2. By linking the two class selectors together, you can select only the elements that contain these class names (the order of the class names is unlimited).
If a multi-class selector contains a class name that is not in the list of class names, the match fails. Take a look at the following rules:

. important.urgent {background:silver;}
As expected, this selector will only match the P element that contains the word important and urgent in the class attribute. Therefore, if only the word important and warning are in the class attribute of a P element, it will not match. However, it can match the following elements:

<p class= "Important urgent warning" >this paragraph is a very important and urgent warning.</p>