With the “Class” selector you can define different styles for the same type of HTML element.
Let’s say that you’ld like to give two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align:right}
p.center {text-align:center}

You then just have to use the class attribute in your HTML document:

<p class=”right”>This paragraph will be right-aligned.</p>
<p class=”center”>This paragraph will be center-aligned.</p>

Note: If you want to apply more than one class per given element, the syntax is:

<p class=”center bold”>This is a paragraph.</p>

The paragraph above will be styled by the class “center” AND the class “bold”.

You can also omit the name of tag in the selector to define a general style that can be use by all HTML elements which will have a certain class. Below In the example, all those HTML elements with class=”center” will be center-aligned:

.center {text-align:center}

Below  code, we have two HTML element tags and both the “h4” element and the “p” element is using same class=”myclass”. This means that both elements will follow the same rules defined in the “.myclass ” selector:

<h4 class=” myclass “>This heading will be center-aligned</h4>
<p class=” myclass “>This paragraph will also be center-aligned.</p>

Remark Do NOT start a class name with a numeric/number, reason behind is that It won’t work in Mozilla/Firefox. You may add Styles to Elements with Particular Attributes. The style rule below is matching all input tag that have a type attribute with a value “text”:

input[type="text"] {background-color:blue}