In this session, let us learn how to use the class attribute of HTML using CSS. Whenever you want to apply styling to a particular HTML element, you use that element directly. That is, if you want to apply styling for a p tag, you use feedback. If you want to do styling for h1 or h2 tags, you use them directly as h1 or h2. What if you want to apply the same formatting to different types of tags? In that scenario, you need to go in for this class attribute of HTML.

How to use it in CSS, you think dot Have a look. I have used it over here as dot. Now I have got a p tag, a div tag, h1 and h2 if you will want to apply the same formatting to all these type of that can go in for using the class attribute of HTML. I have given class equal to check. So all the tags are going to have the same name, how to use it in CSS using this dot dot check, have a look dot check. And I'm trying to give the same background color and the font color to all these tabs.

Let me directly go to sublime and I will explain it from this tab HTML page with P do h1 and h2 tags have a look I have got to pee that one was classified reduce one without class attributes. Similarly for the h1 and h2. Now, let me start applying the style one by one. First that we do this do it for p tag for p let me give the background color as my be like no then same way For h1, let me give you the background colors. Green. Then h2.

Let me do the font color for h2. I'm going in for the font color as blue and I have a do also for them again let me give the background color as pink. Okay, this is that first let me open it in the browser open this file in the browser. Now I have kept the browser and Sublime Text side by side. Let us examine the output. All the P tags are having the background color is yellow, that bill tag having the background color is pink and the h1 tag having the background color is green and h2 tags having the font color or text color blue.

Now what I want is I want to give the same font I think for all the tasks which are having classes check, let me do that I am coming over here. Now I am just going to use dot check. Let me first start with text, transform and change everything to lowercase font style. I am changing it to italicize and let me give a color. Let me change the color as red and also I will increase the font weight to bold. Let me save this now.

Let me refresh that are having the class attributes are having the text transformed to lowercase. And then the font style is changed to atomic. The colors text colors change to red and the font weight is bold. Even for the last one for h2. Okay now when you want to apply the same formatting to different Going for the class attribute, give a value for the class attribute, use a 10 CSS using the dot operator the class attribute. Thank you.