Understanding Text Indent and Text Stroke Property in CSS

Hello guys.

Welcome to our CSS series.

In our last segment we had seen text related, justify, text decoration and text alignment properties we had seen.

I hope you have performed the practical that we had done in the last segment on your own.

We will go ahead with our today's segment which is on text Indent and text stroke.

We will check both these properties one by one.

The first one is Text Indent.

What is the meaning of indent that is written over here.

This CSS property sets the indentation of the first line in a block of text.

It specifies the amount of horizontal space that is put before the lines of text.

Usually whenever we write something in the exams or in the notebook at that time, what we do is for example if we write an essay, in an essay, we write the paragraphs.

So, when we write the paragraphs, the first line in that paragraph starts from the margin after giving a little space.

Then in the next line, we don't leave any space, we write it as it is starting from the margin line, the red line in the notebook.

In the first line where we leave more space and then we write.

As soon as that paragraph gets completed and after that the next paragraph that starts, we also give a little bit of space and then start writing.

So, this leaving of space in every first line of the paragraph, we call this in normal or layman terms as indent.

While writing in the notebook, we proceed in this way and when we write something in our web browser or in our HTML page.

That we can define through indented property.

Whenever we want to leave some space in the web page or in the HTML text at that time, we make use of this property.

It allows the negative values and if any negative value is defined.

Then the indentation of the first line will be towards the left, usually when we pass the positive value.

Little space is left from the right-hand direction.

But when we pass the value in minus or negative, the same space is left from negative or the left-hand direction.

We will perform both these things through the practical so that we get a clearer picture of this.

When we work with any indent, when we work with text indent property.

We've two values available with us.

First is in length and second is in percentage, giving the values in length means giving values in centimetre, points, pixel or in em.

When we give the value in length, at that time, we can give negative values.

The default value of it is zero.

If you are giving negative then it is minus one centimetre, minus one or five pixels.

Even these values we can give.

The indentation of the first line is on the left when its value is negative, meaning if we have given a negative value, it will start from left.

If the same value has passed in percentage.

So, in the percentage, it specifies the amount in space as the percentage of the width of the containing block means the same as we are doing in the length.

the same will happen in percentage as well.

But this time the values will be given in percentage.

We will perform its example and we will open the Sublime Text.

First of all, we will set HTML, example text indent.

Save, text Indent.html.

In this what do we have to perform? We will take a div and we will give some properties to the div and then we will apply Text Indent in our individual paragraphs.

For that first of all what we will do is let's say we will take h3 tag where we will pass the heading, this is an example of text indent property, save, we will run this program.

Okay.

Here we will apply a few basic CSS for example here in style like you want the data to be centre aligned.

So first of all, I will take one div, inside this div for example if I want to add some text, if I want to add some dummy text for, I actually want a paragraph, so let's say I will take Hello friends.

Welcome to learnvern.

This is the best platform to learn various programming languages.

Please go through all the related subjects to build your career in web development.

Save, now I will reload it so I'm getting two lines, now for example, I will repeat the same lines again, so I'm getting four lines.

First of all, I will give some styling to my text.

So, for example, my div is there.

So, I will give all my divs a common style.

Like I want a font size of 20 pixels and I want the width to be 500 pixels and I want the division's height as 200 pixels and my text at the end, you can see that at the end the text is a little uneven.

So, for that I will justify it.

Reload.

Okay.

So, I'm getting my text in this way properly and everything is left aligned.

Now, what we will do is we will set this in the centre.

So, for that margin, zero auto we will give, so that it sets in the centre and to out h3 also, we will give the same property, h3, margin.

0 auto.

H3 div, body text align centre.

Okay so our heading has come in the centre and this is our paragraph.

Now to this paragraph for example, I have to give an indent so let's say first I would want to give it in pixels.

So, let's say that I will take a class here.

So, class, indent for example, I want it to be 70 pixels.

So, let's say 70 pixels.

let's say I will copy, since it is class, so dot and then class name, text Indent,70 pixels.

Okay.

As soon as I give Text Indent 70 pixels and reload it from here in our first line, from here after a distance of 70 pixels my paragraph starts.

So, this is our text indent.

After leaving some space from the right-hand side, our paragraph starts.

Usually when we write in the book in the same way we start our paragraph and continue with the rest of our paragraph.

So, we have tried it in pixels.

Now we will do the same thing but… for example I will take the h3 tag here.

 I will make it one and then this h3 I will take, I will take the same thing indent 70 px okay.

So, example when we make it 70 px and in my other example I will pass the values in em.

So, let's say if I want to give values in em.

5em, text indent 5 but I will pass it in minus.

So here first of all we will make the class Text Indent, minus five E M along with that we will also pass the heading here, indent minus 5em.

So, when we are passing indent minus 5em, so you can see that it is going in the minus direction, which means earlier when it was moving to the right-hand side now it is moving instead of right to the left-hand side in the direction of minus 5em.

So, if you compare the screen width, it is going out of the screen width.

let's say if I make it minus four.

Okay.

It is starting from my screen width just by leaving a little bit of space.

In that case in every place, we will make it minus four.

Okay so this is our indent minus four.

we had seen one more thing that we can also pass the values in centimetres.

So, we will copy the same content, indent, four centimetres.

We will copy the class name .indent, text Indent 4 centimetres, reload.

So here indent four centimetre So, from the initial position after leaving four-centimetre space, our paragraph starts.

So, this was our text indent   property in which we have passed the values in different ways.

First of all, we passed it in pixels.

Then we passed it in EM and then in centimetres.

And now if we go on our slide.

We have got the values in percentage as well.

So, we will pass the percentage as well.

So, for example indent 5%.

Okay, reload and here indent.

After writing 5% This is the space that we are getting here.

The values that we have taken, for example, first of all 70 px, then minus four, then four and then 5%.

These values we have taken randomly, we have not taken any fixed values.

Even when you are performing the practical of this, even you take random values and perform the practical.

Our main goal is that in all ways we can give the indents.

So first of all, we saw that we can give it length, like in pixels in EM and in centimetres.

And then later we can give the same thing in percentage as well.

So, we have performed all four things with the help of an example here.

Next, we will go ahead to the text stroke.

Text stroke means when we type some text.

It has got an outline border so how can we play with that border?

Like the stroke of text, the outline border of the text, we can give it width, we can give it colour, we can do all this designing with the outline border of the text.

We can do it through text stroke property.

Like it is written here.

The CSS property adds a stroke to the text and also provides decoration options on them.

It means on any text stroke.

It defines the colour and width of strokes for text characters.

Now we can do this work with two properties, text stroke width and text stroke colour, here fill colour is also given, if you want to fill the text with some colour in that case.

So first of all, text stroke width means how much width do we want in our text that we can do with the help of this.

We will perform this as well with an example.

So, we will run a new programme HTML, example, text stroke.

So after saving this program we will open this, so this is our program.

Here we will add for example, we will add some text randomly.

So, first of all in our body tag let's say we will add this is an example of text stroke. In this we will take one h3 tag and in h3 For example, we'll take a class, text stroke.

In h3 we will add whichever is our text.

For example, this is learnvern, save reload.

So, this is an example of a text stroke.

This is learnvern, this much has come.

 Now in its style.

First of all in the body.

What we do is, text align the centre, so that we can see it properly.

After the body, this class that we have taken we will take that dot class name, now we will apply the stroke property to the text, whenever we apply the stroke property, so let's say I will take its colour initially white and font size also I will increase.

For example, I will take it 50 px, so here is my text, here is my colour.

It is visible on selection.

This is learnvern.

It is hidden in white colour but when we apply the text stroke property to the outline of the texts we will get, we will go into the slide, there is a note written there.

Here it is written that the text stroke can only be used with the webkit prefix.

Now what is webkit prefix? That we will see when we will go further in our CSS in advanced level.

But currently we will only remember that our text stroke and text stroke width that is there, it will work with webkit prefix only.

So, whenever we use this property, we'll write it in this way.

WebKit, we will start with the hyphen, WebKit and again with hyphen, we will write it with this and our properties name is text stroke width Okay.

So here comes our text stroke width, how much do we want the width of this? For example, I want to take the width two pixels so I will take two px, same thing Web Kit text stroke and colour and I even want its colour and I want to take the colour is red.

We will save it and reload it, as soon as we reload.

Here we are getting an outline colour for text in red colour.

And we are getting the thickness of the outline.

And we are getting a border width of our text which is two px, if I want to increase it and make it five px, we are getting it in 5px.

If we give one px, we can get normal one px also.

So currently we are keeping it to only two pixels.

So, this is our text stroke.

This works only with WebKit.

If I remove this WebKit, you can see that this property doesn't work, like it is written in the note.

Adding a WebKit keyword is very important.

Save, run.

So here comes our this is learnvern.

Now, in the same property they have mentioned in this slide.

You can also use WebKit text field colour property.

So, if in WebKit we do fill colour, so the text that is visible currently in that we can add a colour.

For that, what we can do is WebKit, text, fill, colour.

So initially we had taken white colour, so we have to remove this white colour.

We will remove it and in the colour for example, I will take yellow, but currently I will comment on it, reload.

So, our default colour of the text or the font is black.

But if I comment this uncomment line, if I want to fill the text with colour, save and reload.

So what am I getting here so whatever was my text, outline I'm getting with the help of a stroke in red colour.

And inside I have filled this.

So, I'm also getting a fill colour which is yellow.

Now I will do one thing, 2px red, yellow is there, now to make it more stylish and attractive.

The box shadow and text shadow properties that we had learned.

So, currently is our text.

So, I will add here one text shadow for example five px, five px.

We will add a little bit of radius of six pixels and our colour, adadad, save, reload.

So, you can see that our text outline is in different colours, filled in different colours and behind there is a shadow that is all available to us.

So, this is a text stroke property in which we have seen in total three things, text stroke width, text stroke colour and fill colour.

We have run this with all these properties.

So, this was our text stroke.

Earlier where we had seen was Text Indent, how we can give it space in a horizontal direction as well as in vertical direction, left direction as well as right direction and how we can generate the paragraphs.

And after that we have seen text strokes, how we can perform the strokes.

So, these are properties used to decorate our text.

So, guys in today's segment, the texts related two things that we have learned.

If you have any question or doubt in this, you can tell us on forums.learnven.com and along with that I request that the practical that we have performed today, you practice that.

And if you have any query or doubt in that, you can tell us on forums.learnvern.com.

 We will try to rectify all your questions and revert to you with answers.

Our next segment is on CSS columns.

How we can divide the columns in CSS and generate an output.

Thank you.