Understanding Text align property in CSS

Hello guys.

Welcome to our CSS series.

In our last segment, we learned about CSS text transformation properties.

I hope you have practically run and checked our CSS text transformation property.

okay! so, let’s start!

Our today's segment is on three things: Justify, text decoration and text align.

These three are different properties.

Throughout the section, we will see all the topics individually.

We will first of all start with justify.

CSS justify property is usually used with a CSS Flexbox container.

Flex means, when we had conducted the segment about CSS display property.

In that flex property, display column flex property, we had seen about it.

Because of it the content and elements that are there are set one next to the other.

It is set in a line.

Like it is written here.

This CSS property is used to align the items of the flexible box container, when the items do not use all available space.

On the main axis.

This means that if we have 100% screen width available, if we have placed one or two small elements on our screen, website or web page.

That usually starts for our leftmost corner and gets placed.

But what happens in this case, if we are placing the first or second element and after that a lot of whitespaces we can see.

Justify is our property, what happens with its help, the extra white space horizontally.

Means on x axis the extra whitespace that is there.

How to utilise that using our element?

That, we can do through justify property.

It defines how the browser distributes this space around and between the content.

Means if on x axis or on horizontal line, or on our website more than one content are placed in one line, then in between them and around them how much space should be occupied?

We can do it with the help of justify property.

Usually, we see every element.

We can do this by giving margin padding to every element.

But giving margin to every element becomes hectic.

When we work with the device.

For example, when we switch from desktop to mobile, this approach is not useful.

And the view gets spoiled when we are working with individual element margin.

In that case, our justify property is very useful.

clear guys!

The CSS property cannot be used to describe containers or items along the vertical axis.

Means this property, if we have placed any element vertically, this property will not be useful.

To align the items vertically.

We have to use the Align item property.

So, if we're working vertically with any elements, in that case, we have to use align item property.

From this it is very much clear that whenever we are working on the horizontal axis, it means the elements which are placed one next to the other.

At that time, we have to use the justify property.

When we are working with vertically aligned items.

Means items are kept one below the other.

In that case, we have to use an align item property.

So we have two properties here, first is justify and second is align items.

Both are individual, justified for horizontally aligned elements and aligned items for vertically aligned elements.

Now in our justify property, in which way we can write justify, so here justify content.

Then there are property values like centre, flex start, flex end, space around, space evenly and spaced between.

We will see each and every property one by one.

For justify, first we will perform the example, with the example in another slide we have written the description of each and every property, in which case, we have to use centre, in which case,We have to use flex end, space around, etc.

 So, we will see each property and along with that we will also perform our practical.

So, we will open sublime, example justify.

I have given the program's name justify.HTML .We will open it.

Because the items and the elements we have to place one next to the other, means horizontally we have to place a lot of elements.

For that, we will make use of more than one division.

We will give more than one division and we will set it with Flex property.

For example, if I take a div, inside the div I will give one class.

For example, how do we want div?

So, class; we will name it, item

Just to show we will give the name a.

We will take five items in total.

Okay.

We have taken five items and to every element we will give one style.

For example, to the element, we will give the width of 50 pixels.

 We will also give the height 50 pixels.

Height is not mandatory.

Padding, 10 pixels and after that we need a lot of things.

We have to generate a square block kind of a thing.

So, after height will come margin.

Which, we will give 5 pixels.

Padding also will keep 5 pixels.

We will keep padding and margin the same.

Font size we will take 2em.(two em)

After that we will take font weight, we will show a dark font.

 Colour we will take white.

Our text should look in white colour.

Border we will take 1px, solid, we will take the background colour as well, light green.

Our text which is there in it, we will text align ;centre.

We will save it.

Okay.

So you can see that whatever we have generated, each and every square is visible to us.

ABCDE, in each square our text is visible.

okay, got it ?

Now, we want to set it in one line.

What will we do for that?

We will take all our divs in one division.

So, for example over here, in our slide which is our 1^st property?

That is the centre.

If we see here, we have centre, flex start and flex end, like properties available.

So, we will see each one of them one by one.

So, first of all, we will start with the centre.

So, we will take one division here.

These divisions, elements that we have generated.

We will place them inside of it.

Okay.

We will give this division a class.

For example, if we want to give the 1st property of centre then we will take it flex-centre, we will generate a class like this.

Now, in this class, .flex-centre,(dot flex centre) display, flex, so that we have to set it in one line.

Okay.

So, it has come in one line.

And the 1^st property that we are going to see form the slide is centre.

So, for that we will write here, justify, content and after that centre.

Okay, save and reload.

You can see that when we have given centre, our content has come and set in between.

From the left and right sides, we are getting even spacing.

So, you can see here that as soon as we gave justify centre after giving left and right space, all the elements are set in the centre.

So, this is our first example of justify centre.

For this we will keep one heading.(pause for 10 second)

Okay.

So, this is our justify content centre which is coming exactly in the centre.

Now, we will go into our slide.

In our slide 1^st is centre.

Next is flex start.

So, we will copy the same thing from here and place it.

Justify whichever is our class, flex centre, in its place we will write flex start.

We will copy it.

Inside .flex start (dot flex centre), our property as it is above, display, flex and justify content.

Flex start, the name that is here.

the same we will copy here and write, reload.

As soon as we gave Flex start property.

All our elements are starting from the start.

Means from the leftmost side.

Next property in this is flex end, for this also the same, we will copy this portion, flex end, flex end.

 Save.

okay!

So, here in Flex end, you can see that the contents that are there are starting from the rightmost side.

So, flex start means starting from the leftmost side.

Flex end means starting from the rightmost side.

So, this gives almost like a float right result.

But if you're using float right, so comparatively, in place of float right.

If you would use this, it would be easier and more useful.

Float makes the content uneven sometimes.

guys clear!

Next after the flex end is space around.

We will copy the same content even here.

Space around.

We will write its CSS, display flex space around.

So, here we can see one difference.

The centre elements are all in the centre.

In start from left and in Flex end, we are getting all right elements.

But in the space around you can see that all our elements are set in the front end in such a way that the space around it should be even.

Means we have given fixed margins to our elements.

So, the margin is not yet coming.

Apart from the margin, we are getting the same space in between each element.

The space that is there on the left side of a, we are getting to the right side of a.

Again, the space that is on the left side of b, the same is on the right side of b.

So, this is space around, with this the elements are in this adjusting on the screen.

The space around it is evenly spread.

got it?

Now, Next is our space evenly.

Now we will check in this, what will happen.

We will copy this content, space evenly.

Okay and even here.(pause)

Here, it is not showing us suggestions for space evenly.

So, in this property we will first see if we are getting any results from it.

Okay.

So, even in space evenly we are getting the result.

So, what is the result we are getting in evenly?

The space is evenly spread.

So, you can see here to the left and right of ‘a’.

The space is the same when we have given space around.

But what is happening in space evenly.

How much of a space is there on a’s left side, the same space is between a and b and b and c, in the same way e and of the end where the browser is ending, there as well.

The difference between spaced around and spaced evenly.

The difference is space evenly is putting even space between the elements and what happens in space around a particular element space becomes even.

We are getting even space.

When we are looking at the view, the difference is clear.

Left and right of any element of any division, the space that is there, same is between all the elements.

divisions left and right.

But what is happening in space evenly in between every element, we are getting given space.

Got it, guys!

Next is space between, so that we will try.(pause for 4 second)

Okay, so what is happening here in space between, in between every element the space that is there, is adjusted in such a way that the first element left most and the last element rightmost is getting adjusted.

In the first and last element the default margin of 5 pixels.

Apart from that, you're not getting any other extra space.

So, this is space between, whichever extra space is there that is getting adjusted between my elements.

Means in between each division we are getting the spacing.

So, here you can see that space around, evenly and between, these three are such properties that we are getting which is giving our elements proper view in the front end.

Whereas we have done adjustments with the space, we will make use of this property.

So that with every device it can be properly set.

It can give us a proper view.

So, this was all our justify content property, centre, flex start and space around, even and between.

clear guys!

 Next, we will go ahead.

Next is text decoration, how we can decorate the text.

So, here in text decoration, it is written as a CSS property that decorates the content of the text means whichever text we have written, how we can decorate that..

Like it is written here.

It is a CSS property that decorates the content of the text.

Means whatever text we have written.

How we can decorate those.

Usually lines are used.

Like it is written here.

It adds lines, under, above and through the text.

Means adding the line above text, adding line through it or adding line below any text.

This we can do with text decoration.

 It sets the appearance of decorative lines on text.

This CSS property decorates the text with several kinds of lines.

 So, extra lines are added to the as many types of lines you wish to add, those lines we can add.

Normally for text decoration, there are three ways available with us.

First is the text decoration line, which means through the line we will decorate it.

Then there is text decoration colour, which means using colours we decorate.

Then there is text decoration style.

There are some default styles available with us, property values.

We can decorate it through those.

In text decoration, first comes the text decoration line.

How we can decorate it with the help of a line.

For this, we will generate a new program.

Okay, example text decoration, save.

Okay.

Now, in this we have to do the text decoration first of all with the line.

For that, we will take one paragraph or we will take any statement.

So that we can generate one line.

So for example, I'll take one h2 Tag which will tell us that we are going to use a text decoration line here.

So, it should be like text.

Decoration, text declaration, line okay, save.

This is our program.

Okay. Got it guys!

Here, we have got a text decoration heading.

Now, what we will do in this, we will add a few statements.

For example, I will take a p tag and in the p tag I will take… we had 3 examples on line.

Line above the statement, line through the statement and the line below the statement.

For example, this is a statement with an over line.

First of all, we are taking; underline. the same statement in which it was on this statement line through, again the same statement will come, hover line.

First of all, you need to save it.

So, we will give a little bit of styling, style, and body ; text aligns.

okay.

So, everything is in the centre now.

Now, we will take first of all in p tag, text declaration.

This first is under line, save.

So, below is our statement.

we are getting a line here, then it is line through.

So, for the other we are getting style, text decoration, line through, save.

So, you can see that our line is passing exactly from the middle of the text.

Then text decoration, over line.

Okay, the line is passing above our text.

Means the line is passing through the text, below the text and over the text the line is passing.

We will generate one more.

This statement is with combination of all values.okay!

In this we will add first of all, over line, then we will give space and underline and after giving the space line through.

Okay.

So, what did we do here?

First three properties we have written individually and now, we have written all three properties together.

We will save and reload.

So, here we are getting a statement, this is a statement with a combination of all values, which is twice here.

Okay, underline, over line and line through all three we have added in one statement.

So, this is a text decoration line.

How with the help of the line, we can decorate the text?

Usually, there are three property values in it, underline, over line and line through.

We have seen all three.

Now, we will go ahead in this text decoration style.

The lines that we have used, we will give style to them now, which all styles we can give.

For example, we will copy the same program.

We will copy the same below.

Text decoration, and now, we have style.

So, we will use this property.

So, in text decoration, style. As here, written in example

After text decoration; underline, line through or overline, we have to use line.

 But, we have to give it a design. For example, double is written here.

So, we will 1^st try it.

We will save and reload.

Below , we are getting our lines; underline, line through and above line.

In this, we will add our extra property like it is dashed.

Okay!

So, we are getting underlined.

But how is it that we're getting it?

We're getting a dashed line.

So, this was our example, dashed is written.

Next example is our double.

So, we will give  the line through a double.

We will save it and reload.

The line through which was passing, we are getting to see two lines, 2 lines are passing in between.

Then comes after dashed and double, in over line.

Over line, again over line property.

Actually, there was no overline but dotted property.

So, it should be dotted.

Okay, so if you can see here that there is an overline but it is dotted.

Here, dashed and dotted, there is a difference.

In the dash; line , we are getting longer,  the width is a little more.

while in dotted lines, we are getting dots, through the lines.

Now, we will see the next one.

Now, we will add all these properties together.

We had added a combination.

In the same way.

What we have given in the example, the colours we are adding, we are  using a wavy pattern.

So here, we will remove these properties.

First of all, we will add this colour; light blue, then our property wavy.

Means our lines should look like waves.

You want that this should be overline and underline as well.

It should be on top and bottom both and there should also be a line through.

Okay, we're taking all three overline, underline and line through with a wavy pattern and one colour.

Okay.

So, you can see here we're getting one colour here, we'll change the light blue colour and take a darker colour.

For example, taking blue.

 you can see, we are getting a blue wavy pattern.

But we are getting all three, underlined, line through and over line, all three we are getting.

This is a statement with a combination of all values.

We are also getting our text, even that we are getting.

So, this is text decoration, the lines that we have added in those, we have added few designs, few styles we have added.

So, this is our text decoration style, in which we are adding patterns and then comes style decorations colours, what happens in colours, we can add colours to our lines.

We will simply copy this.

okay guys!

Here, our property is colour.

So, what will happen in colour?

For example, the underline line we'll add some colour to it.

So, I will comment this temporarily.

I will take red.

Okay.

So here, I'm getting a dashed line but with red colour.

Now, if I uncomment this and add colour to other properties as well.

For example, green and then in dotted, yellow.

Okay, so we are getting red, in the double line green and in dotted, we are getting yellow line.

So, this is our colour pattern, how we can add different colours through the lines.

Again, the same example; light blue, wavy, overline one.

We have already added colour to it.

In the wavy patterns which we have used we have added the colours in it.

So, in total we have taken three properties of text decoration.

Text decoration using lines, text decoration style and text decoration colour.

We have seen all 3 properties in one-by-one examples.

How we can add simple lines, we can add styles in it and in it we can add colour.

Now, comes text align, which means whichever text we add horizontally.

How can we align the text?

Here, it is mentioned, it is similar to the vertical alignment property but in the horizontal direction.

Means whichever text we have added in the front end, the lines that we add.

How we can handle those in the view, that we will see through text align property, in this also we can set the alignment, whether it is justified, centre, right or left.

okay!

So, for that, what we will do first we will generate a different program for it.

HTML, example; text align and in this, we will save it.

Text align.HTML.(dot html)

Okay.

So, this is our program.

Now, we will go into the program and in the program, we will add one h2 tag.

First of all, we will take h1, then in h1 we will write, these are the examples of text align property.

In this, we will add different h2

we can add h2 or h3.

Also, we will add different headings and in the headings, we will first of all add, for example, this statement is left align; okay, save, reload.

So, these are the examples of text align property means the examples below are of text align properties example.

First the statement is left align, which means that we have to add a style here.

text align left, reload.

Default property of any text is setting the text to the left.

Here, we have written left aligned.

We have also given the property left aligned.

And the default property is also left align.

So, when we reload it, we're not seeing any difference.

The default is also left aligned.

Okay guys!

If we're copying the same statement and we write, this statement is right aligned.

What we will do here; right so here you're getting one statement that is starting from the right side.

One statement that starts from the left and one statement that starts from the right.

So, for the right we have given the right align property.

Instead of left and right, centre align, so this is our centre, okay, this statement is the central line.

Now, the last property is of text align justify, what happens in justify usually the width 100%.

Any statement should properly fit in it.

That's a reason why we normally need long statements.

For example, I will add one h3 here and I will add that, this statement is kept intentionally long to fit the screen size, okay.

Then, we will reload it.

You can see that we are getting a long statement here.

And, we will add some content.

Screen size of the given device.

Okay.

Now, the statement comes below, okay.

You can see that this is the statement intentionally kept long to fit into the screen size of the device.

Now, after this statement, there will be spaces left and here in this statement, we will add style, text, align, justify.

As soon as we are reloading, we are not seeing the effect here because we have not defined the width of any div, we placed this line here as it is.

Means, justify our content… means the space of the text.

It is occupying only this space which is remaining and not occupying other space.

So, what we will do is, we will add here, of the given device.

Okay guys!

So now, you have seen that if I remove this style, I will reload it.

You have seen that not getting the space after  given, our browser is letting the space remain as it is.

And our next word that is coming down.

This space is getting wasted and it is not getting occupied between this statement.

But as soon as I add text align ; justify, save it and when I reload it.

This space will be occupied.

 You can see the space that was here at the end, it has been set between different words.

And this entire line is set according to screen width size.

We have intentionally written a long statement because it can fit in the entire screen and it should fall down as well.

It can go from one line to another.

 So, this was our example to justify.

Okay guys!

When we add a line it is justified and it fits in the entire width.

So, these were four property values, left align, right align, centre align and when we work with a long paragraph, justify.

 Okay.

So, we have seen 4 properties.

So these are today's text decoration related justify, text decoration and our text align property.

In total, we have seen 3 properties.

In three properties, there are a lot of values that are coming.

So, guys I request that you perform all 3 practicals on your own, practice them.

In practice, if you're getting any difficulty or issue or you have any doubt in this segment, if there is any question that you have not understood, you can tell us on forums.learnvern.com Your all your doubts would be clear there.

In our next segment, we are going to see two properties, text related, text indent property and text stroke property.

Thank you.