March 2nd, 2019 
Nilesh Chaurasia class Selector
class selector is used to apply the Style to an HTML Element with the use of class attribute. CSS class Selector is defined by the (.) symbol in stylesheet.
If you want to apply different styles to the same HTML Element than classes selector is used.
Example 1 – class selector Example with h1 and p tag.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green;
background-color: yellow;
}
.red{
color: orange;
background-color: olive;
}
</style>
</head>
<body>
<h1 class="red">This ia a heading</h1>
<p>This is an another paragraph</p>
</body>
</html>
The above syntax shows that how can you apply the CSS Style to an HTML element with class. Here a class with name red is created and this class is only referred in the h1 tag. And this CSS design specification will apply to the only h1 heading element having same class name.
Drawback Of Tag Selector
The Drawback of the tag selector is that, all of the element are having same look and feel on a web page. For Example, if you have specified CSS Design Style for p element with the help of tag selector than all the p element on that web page looks alike. To solve this problem we have to use more advanced selectors, like class Selector or id selector. The advantage of class selector is that you can target any HTML element with the help of the class name irrespective of tag name. Means in any web page you can have more than one p elements with different class names. The browser will apply design specification to all the elements with reference to class name.
Example 2 – class Style CSS Example with h1 and p HTML tag.
<!DOCTYPE html>
<html>
<head>
<style>
.hello {
color: orange;
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="hello">This is a heading</h1>
<p class="hello">This is an another paragraph</p>
</body>
</html>
The above code shows that how actually class selector work.
Here p and h1 both HTML Element have class, hello than browser will apply the Style to both p and h1 HTML Element.
Example 2 – CSS class in HTML is specified in the class attribute of the tag.
<!DOCTYPE html>
<html>
<head>
<style>
.red {
color: black;
background-color: yellow;
}
.blue {
color: olive;
background-color: red;
}
</style>
</head>
<body>
<p>This is a first paragraph<p>
<p class="red">This is a second paragraph.</p>
<p class="blue">This is a third paragraph.</p>
</body>
</html>
Here three p elements and I want to have different look and feel in all the three p elements. In this example I have been provided two different classes(red and blue).
In the HTML part I have one p Element without any class, and browser will apply default design specification to this p element.
In the HTML part I have one p Element with class attribute value as red, and browser will apply design specification of red class to this p element.
In the HTML part I have one p Element with class attribute value as blue, and browser will apply design specification of blue class to this p element.
You can also apply same CSS specification to the different HTML Elements.
Example 3 – CSS Stylesheet class can be used multiple times in different HTML element.
<!DOCTYPE html>
<html>
<head>
<style>
.blue {
color: olive;
background-color: red;
}
</style>
</head>
<body>
<h1 class="blue">This is a heading.</h1>
<p class="blue">This is a paragraph.</p>
</body>
</html>
Here p and h1 two HTML elements and I want to have same look and feel in both HTML element.
In the HTML part I have one h1 Element with class attribute value as blue, and browser will apply design specification of blue class to this h1 element.
In the HTML part I have one p Element with class attribute value as blue, and browser will apply design specification of blue class to this p element.
Posted in 
Tags: 
