-->

CSS class tutorial

CSS class tutorial

CSS class tutorial


CSS class tutorial

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

Suppose you have 10 headings in an HTML document, 2 h1, 3 h3, h2 ... and so on. Now you want all h1 to be red and all h3 to be purple, so what do you do, give each heading an ID? And write CSS after each ID? The answer is no. Because CSS class is to solve this problem.

Since I will give red color of h1, I will give the same class of these two headings, thus I will give the same class of h3 3. Then styling over that class.

<!DOCTYPE html>
<html>
<head>
<style>
.demo_head{color:#f00;.}.tutorial{color:#c8a2c8;}
</style>
</head>
<body>
<h1 class="demo_head">Myhtmlcode</h1>
<h1 class="demo_head">Myhtmlcode</h1>
<p id="demo_para">Myhtmlcode.</p>
<h3 class="tutorial">Myhtmlcode</h3>
<h3 class="tutorial">Myhtmlcode</h3>
<h3 class="tutorial">Myhtmlcode</h3>
</body>
</html>



You can apply this policy to any HTML, not just headings. Simply put, if you want to give the same CSS (style) to multiple elements, you can do the same class in those elements and then write that class once and do styling in the CSS file. Remember to select with class you have to put a dot (.) Sign in front of it like see how I have selected class on lines 5 and 6.


See the example "demo_head" and "tutorial" class I wrote once in CSS. But it worked where the class came from. If you were going to do this with id, then you would have to give 5 different IDs for 5 headings and write the rule 5 times in CSS. This is the main advantage of the class that if you want to give a common style to more than one element, you have to write it once.


When to use the class:

Suppose your site has 20 p elements. Now you want the color, alignment or any other style of 10 paragraphs to be the same. In that case you have to use CSS class.

For example, look at the headings on this site that are shown on the left and right (tutorials, PHP tutorials, databases, Photoshop, web links on the right, etc.). Here the headings are given the same class as the div element inside (moduletable) then in CSS we have given the same style by targeting or selecting these headings in .moduletable h3. See background, color, font all the same.

Use multiple classes at once:

Suppose you want to see the first of the h3s in the middle in the example above, which means you want to give text-align: center, but the color will remain purple. In these cases, with a space in the first h3 element, another class with any name can be given after the tutorial. This is a very useful feature. In this way all the styles of the tutorial class will be in h3 and if you want in the first one you can give another style with the extra class. E.g.

<!DOCTYPE html>
<html>
<head>
<style>
.demo_head{color:#f00;}
tutorial{color:#c8a2c8;}
.centered{text-align:center;}
</style>
</head>
<body>
<h1 class="demo_head">Myhtmlcode</h1>
<h1 class="demo_head">Myhtmlcode</h1>
<p id="demo_para">Myhtmlcode</p>
<h3 class="tutorial centered">Myhtmlcode</h3>
<h3 class="tutorial">Myhtmlcode</h3>
<h3 class="tutorial">Myhtmlcode</h3>
</body>


</html>
Facebook Comments

Follow by Email