We know that CSS language is to provide styling to HTML webpages like colors, decorations, borders, fonts etc. CSS syntax contains two important parts. They are

1. Selectors
2. Decoration Block

selectors{
decoration block;
}

Selectors:

Selectors can select single or multiple HTML elements using attributes like class, id, and type etc. Once elements are selected, styles can be applied to all of those selected elements.

Decoration Block:

Decoration Block contains key and value pair which are separated by semicolon(:). There can be more than one decoration block in a selector.

Example:

h1{
color: red;
background-color : green;
}

In the above example, all the h1 tags content will have color red, and background color green.

There are 4 types of selectors that we are going to discuss here. They are

1. Type Selector
2. Id Selector
3. Class Selector
4. Attribute Selector

Type Selector :

This type of selector selects all the HTML elements that match the tag name. Type selector is also known as Element selector.

tag{
property: value
}

Example: Consider the below code as HTML code

<h1>First Header</h1>
<div>
    <h1>Header inside div</h1>
</div>

And this below code as CSS code

h1{
color: red;
}

Output is as shown below:

Id Selector:

This type of selector selects the elements based on the "Id" attribute of tag. And these are accessed in CSS as "#" followed by Id name as selector. Id's should be unique.

Example: Consider below code as HTML code

<h3>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</h3>

What if we want to only style Paragraph 2 and not Paragraph 1? Then we use "Id" attribute as shown below.

<h3>
<h2>Heading</h2>
<p>Paragraph 1</p>
<p id="para2">Paragraph 2</p>
</h3>

Below code is CSS code

#para2{
color : red;
}

Output is as shown below:

Class Selector :

This type of selector selects the elements based on the "class" attribute of tag. And these are accessed in CSS as "." followed by class name as selector.

Example: Consider below code as HTML code

<h3>
<h2>Heading</h2>
<p>Paragraph 1</p>
<p class="para2">Paragraph 2</p>
</h3>

Below code is CSS code

.para2{
color : red;
}

Output is as same as previous output as shown below:

Attribute Selector :

This type of selector selects the HTML elements based on the tag and its attribute (or) with tag and attribute value.

Example: Consider below code as HTML code

<h3>
<h2>Heading</h2>
<p>Paragraph 1</p>
<p class="para2" id="para2">Paragraph 2</p>
<p class="para2">Paragraph 2</p>
</h3>

Below code is CSS code (tag with attribute)

p[id]{
color : red;
}

Below code is CSS code (tag with attribute value)

p[id = "para2"]{
color : red;
}

Output is as same as previous output as shown below: