In addition to adding CSS to HTML elements like paragraphs, it can also be added to Id Selectors and Class Selectors.

The three types of CSS Selectors are,

1. Id Selector
2. Class Selector
3. HTML Element Selector

Id Selector

First of all, what is an Id?

Id is a property of HTML elements that you can specify like shown below.

<p id="para1">This is a Paragraph.</p>

You can use the specified Id to manipulate the corresponding HTML Element as shown below.

#para1{
color: red;
font-size:20px;
}

The above style is applied to the HTML element with Id “para1”.

“#” symbol is used to specify the Id

Class Selector

Class is a property of HTML elements that you can specify like shown below.

<p class="class1">This is a Paragraph.</p>
<h4 class="class1">This is a Heading.</h4>

<p>This is a Paragraph without class.</p>
<h4>This is a Heading without class.</h4>

The difference between class and id is that Class is used to apply styles to a group of HTML elements while Id is used to apply styles for a single unique HTML element.

Styles are applied to classes as shown below.

.class1{
color: red;
font-size:20px;
}

The above style is applied to the HTML elements with class “class1”.

“.” symbol is used to specify class.

HTML Element Selector

Styles are applied to HTML elements without “#” or “.” as shown below.

p{
color: red;
font-size:20px;
} 

The above style is applied to the HTML element “Paragraph”.