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}

You can make a group of various selectors. A comma will separate each selector. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color:green
}

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property:value}

The selector is the HTML element/tag which you wish to define, the property is the attribute or same HTML tag you wish to change, and each property will have a value. The property and value will be separated by a colon, and enclosed in curly braces:

body {color:black}

STORE IN SPECIAL PLACE OF MIND:

1. If the value is multiple words, put quotes around the value:
   p {font-family:”sans serif”}
   
2. If you want to define more than one property, then it must be separated with a semicolon. The example below illustrates how to define a underline decorated anchor tag, with a red text color:
   a {text-decoration:underline; color:red}

Just to make the style code more readable, you can describe one property on each line, like given below:

p
{
text-align:center;
color:black;
font-family:arial
}