Addition to adding CSS to HTML elments like paragraph, 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 which 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 like 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 Id

Class Selector

Class is a property of HTML elements which 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 element while Id is used to apply styles for a single unique HTML element.

Styles are applied to classes like 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 "." like shown below.

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

The above style is applied to the HTML element "Paragraph".

Next Lesson > CSS Example