In this session, let us learn how to use the text property of CSS in HTML page. Similar to background and font property, this text also has got few categories. To change the color of the text. To change the direction, from left to right or right to left. spacing between the letters by letter spacing. spacing between the words is done by word spacing.

All these can be given either in pixels or in points or in percentage and then, to indent the first line of a paragraph. Again this also can be given in pixels, points centimeter or in percentage. text align to align the text left right or center text decoration underline overlaying or strikethrough text transform, lowercase uppercase or capitalized whitespace to your text section To provide shadow for your text, it has got three values. The first one is the horizontal and the second one is the vertical value the third one is see color with which you want to use shadow for your text. Now let me go back to sublime. And we will see an example of using the text property in HTML page HTML page with h1 and P tags.

Let me apply the text property to both h1 and p tag. Let me first start with h1. Color already we have seen so many times. Then text decoration underline. Then text transform, uppercase or lowercase or capitalized. So here I have given it as uppercase.

Let me first save this and run it output now. h1 color is red text decoration underline and text transform uppercase. Now let me apply a few text properties. To the paragraph tag first let me show you let us spacing letter spacing, I will give it as four pixels save this refresh, you can see the difference. Now I will change this to two pixels and watch spacing I will change it I will give it us four pixels refresh, okay you can see the word spacing. Then next text indent let me give it us 10 pixels.

This is to indent the first line of a paragraph, saving it refresh. You can see it is getting indented. Okay for spacing, I have given text in under 50 pixels. Let me refresh this. You can see the text is getting indented to the right. If I'm giving a negative value, the text will be intended to the left Let me save this refresh.

You can see it is getting in under to the left, okay, I want to have Word Spacing, so I will add Word Spacing here, I will remove this and I will add it to the h1 tag. Okay, let me refresh. You can see this getting in under to the left because I have given a negative value. Okay, then direction. By default it is from left to right, I want to change it from right to left. So, the text will be printed from right to left.

Can you see the output the indentation is from the negative forces getting into debt to the left. Okay, what else we can apply us and we can also give a text shadow so I can have text shadow. Okay, I'll take you the horizontal or the vertical value. So it is two pixels come on to stage two pixels. I need to give a background kinda save it refresh. You can see the text shadows also up to nine that of course, you might be knowing to align it to the left or to the right.

Now I can just give it a center I will remove the indent Okay. Now let me refresh. Now the text is aligned to the center, this is the output. So here for the first one for the h1 tags, what are we have applied, we have given color then text decoration underline, we are aligning the text to the center we are giving text indent, text shadow. And what about for the paragraph for the paragraph we gave letter spacing, Word Spacing and the direction. So this is how you use text property of CSS in HTML page.

You can also do more research by instead of giving pixels you can do points or centimeters or percentage and check how it is working. Thank you