There is another attribute in the class like HTML id attribute. You can use it in almost all HTML elements.

Suppose you have 10 headings in one HTML document, two h1, 3 h3, h2 … more like this. Now you want all h1 colors to be red and all the h3 colors will be purple, so what to do, give each heading ID? And hold every ID and write CSS? The answer is no. Because to solve this problem CSS Class.

Since the h1 colors are red, I will give the same class of this heading and h3 3 will give the same class. After that class styling.

<!DOCTYPE html>
<html>
<head>
<style>
.demo_head{
color:#f00;
}
.tutorial{
color:#c8a2c8;
}
</style>
</head>
<body>

<h1 class="demo_head">ashik.pw demo heading1</h1>
<h1 class="demo_head">ashik.pw demo heading2</h1>
<p id="demo_para">demo content goes here.</p>
<h3 class="tutorial">ashik.pw HTML Tutorial</h3>
<h3 class="tutorial">ashik.pw CSS Tutorial</h3>
<h3 class="tutorial">ashik.pw JQuery Tutorial</h3>
</body>
</html>

 

** You can apply this policy to any HTML not just heading. If you want to have the same CSS (style) in more than one element, then you can style those elements in the same class and then be styling the CSS file. Remember, by selecting a class, there is a dot (.) Sign to look like, how do I select the class in line 5 and 8.

 

** In the example, see “demo_head” and “tutorial” class once written in CSS. But it worked where the class comes in. If I used to do this by id, then 5 different IDs were required for 5 headings and CSS 5 would have to write the rule. This is the main advantage of the class that if you want to give common style to more than one element is written once.

 

When to use classes

==========================

Suppose you have 20 p elements of your site. Now you want 10 paragraph colors, alignment or any other style will be the same as the CSS classes.

For example, look at the headings of this site that are shown on the left-hand side (tutorials, PHP tutorials, databases, photoshop, right-hand web links etc.) all have background color green. Here the headings are given in the same class of the div element (module table) then on the CSS we have given the same style by targeting the headings or by selecting it .moduletable h3. background, color, font all look the same

 

 

Use multiple classes at once

==============================

Suppose, in the above example, the first of the h3 is to want to see the middle of the text-align: center, but the color will be violet. In these cases, one of the first h3 elements, with space, is followed by a different class named after the tutorial. This is a very useful feature. In this tutorial, all the styles of the class will be in h3 and if you want to do the first class you can give another style. Such as

<!DOCTYPE html>
<html>
<head>
<style>
.demo_head{
color:#f00;
}
.tutorial{
color:#c8a2c8;
}
.centered{
text-align:center;
}
</style>
</head>
<body>

<h1 class="demo_head">ashik.pw demo heading1</h1>
<h1 class="demo_head">ashik.pw demo heading2</h1>
<p id="demo_para">demo content goes here.</p>
<h3 class="tutorial centered">ashik.pw HTML Tutorial</h3>
<h3 class="tutorial">ashik.pw CSS Tutorial</h3>
<h3 class="tutorial">ashik.pw JQuery Tutorial</h3>
</body>
</html>