Let us learn how to use the font property of CSS in an HTML page. These are the font properties, font family to change the font face, like Arial Times New Roman sans serif font style, whether you want it as italica ugly font variant, you want it as a normal text or in small cap, font weight, you want it as bold or bold as that is to change the weight of the text, font size, increase or decrease the size of the font. If you don't want to use these properties, you can go in for the shortcut property for now, let us see an example of using these CSS font property in a HTML page created a page with three heading tags, h1, h2, h3, I want to apply just the font properties to these three tags. Let me do that. So inside style for h1 First is font family.
Sans Serif then we have seen font variant, small cap, then font style italic only these three I'm going to apply now for each one. So right click open in browser, you can see the output it is shown over here Have a good day is coming in sans serif and in small cap and it is also it Alex. If you want you can also check in for the size font size right and you can just increase the pixels look like you can give this either in person days or in pixels or an E M. Now, I will give it 10 pixels so far You can see the change. Next, let me do it for h2. For h2, again, I don't want to apply everything let me add the font. Size.
Font weight, bold. Okay, let me save this. Let me refresh over here. You can see the font size is getting increased to 40 pixels, and the font weight is bold. And let me go in for the hex for h3 tag. I don't want to use the individual properties.
I want to go in for the shortcut property. So let me add the shortcut. colon. It Alec Boyd. I need to specify the pixels 50 pixels space. I need to now specify the font family sans serif What is the difference between sans serif font Times New Roman, in case of times through Roman you can see that it has sharp edges.
In fact sans serif it has blended edges. So, you can go on just even research on the different font faces available. Now, I have added this, let me just refresh it, you can see the output. So when you want to use this CSS property font, either you can go in for the individual properties, or I can go in for the shortcut property. In case of shortcut property to be very careful, you cannot change the order. The order has to be like font variant, sorry, font, size, then font weight, then font size, finally, only the font family.
This is all about the font property of CSS. In the next session, let us learn how to use the text property of CSS. Thank you.