Text alignment Property in CSS

Hello guys! Welcome to our series, CSS. In our last segment we had learned about different display properties. In which we had learned about inline, inline block,block, none and  very important flex properties of display. I hope whichever properties were taught to you have tried and practiced it. Our today’s segment is on CSS’s position property. Earlier once we had covered, CSS’s position property. In which we had covered positions like relative, absolute, static and sticky, which were element related. Today as well it is related to element but today, we are going to cover CSS’s left, top, right, bottom like position property. These are the possible ways that our element on the current screen, our viewable screen, on which place we can place the element. The previous positioning property that we had covered, in that also same thing happens. That position property identifies with the element that who is it relative to or we have made them static, fixed in one place. With these differences we had positioned the element, when we had learned relative, absolute, sticky, etc., positions. Today’s position is applicable to all, to label, div and p, it is applicable to all. But this we have to set from where and at what distance, for that this position property is used. If I want to set my element 50 pixels to the left, for that I will take left. If from the top I have to set my element at 100 pixels from top, I will take top for that. Our today’s position property is related to the distance. At what distance and at what place we have to set the element. So, total there are 4 ways with us, top, left, right, bottom. We can give the distance from there, we can set our element. While using this property there are some fundamental rules available with us. From that the 1^st one is effects of this property on positioned elements other than the value static. Means anywhere we have used static property of position, position static. So, with that we cannot use this value; left, right, etc. We cannot use anything with static because, instantly it gets fixed in one place. Then they have mentioned 3 rules here. When the element is absolutely or fixed positioned, if we give it in this way, position absolute or position fixed. At that time our left property specifies the distance between the element’s left edge and the left edge of its containing block. For example, I have taken any element or any division and I am giving that a property, left and then some value, so what happens in that case, this value that is there, it shows a distance. From what? From the leftmost edge. If I have taken division then it's the leftmost edge. If I have not taken anything then the leftmost edge of my body, body tag’s leftmost edge. From there it will count the distance and give me. Now this thing will be applied to all. If I have taken left then from left edge, left distance. If I have taken right, then from right edge right distance, if I have taken top, then from top edge, top distance. If we have taken bottom, from bottom edge, bottom distance. From all four directions my distance will be calculated. So, basically if I am applying this property in any division, over any element. The edges related to that, the distance will be calculated as per that. If I am not giving any body tag, the distance will be calculated as per that. Next point is, if the element is relatively positioned, the left property sets the element’s left edge to the left/right from its normal position. Means if we have taken the position relative, then in that case, the left property that is there, that will set a normal position from it’s left edge. The last is, if the position is set to sticky. Means we have taken sticky, Then the position context is the viewport. Viewport means our current area that is visible. If I am using any desktop of 19020-pixel width. How much ever width or height of my current desktop, the total viewable areas of that desktop, which we call a viewport. According to that my position will be set. When the element is inside the viewport, means if it is showing up inside the viewport, that much distance we have given. The left property behaves like its position is relative. Means it will be on a fixed place relatively. When the element is outside, it behaves like its position is fixed. Means if I am working with a sticky position. If I define my left property somewhere, then if it is inside the viewport, then it will work with relative position. If it is outside the viewport, it means outside of my current screen. If it is coming somewhere down, in the webpage we have given it down somewhere. So, that will behave as a fixed. So, it depends if you are working with sticky or not. So, these are our 3 fundamental rules, how this property works. Basically, first we will check these properties one by one that how left, right, top, and bottom are given. Whenever we give left, right, top and bottom. That value we give in such a way, Syntax, then left or right or top or bottom. And in that there are 3 values. We can give auto if we don’t have the value available. We can give the property by length, for example centimeter, pixels, em, etc. We can also give the value in percentage. For example, 1%, 2%, etc. Whenever we work this way, I have created examples over here. Like if I am giving length, it should be length in pixel. If I am giving in percentage, then length in percentage and if I am giving auto then auto. All 3 have a value. If we are giving auto, it takes a default value, that means that we don’t have to pass any value. Same, if we are giving, we can give it in pixel, centimeter, point, etc. If we are giving a percentage, we can give it in percentage. So, for this we will perform practical. We will set it on html, “Example Left Property”. Save, left.html. Now, in this 1^st of all we will take a div and in the div we will add…for example, like our example was there here. There we had used length, percentage and auto, we had used these 3 things. So, for this we have to generate a total of 3 divisions in which length properties can be used. So, in div, 1^st of all we will take class. Let’s say it is for length, so length.(pause) After that was our percentage and last was our auto. Okay, so we will show up with length in one, percentage in one and auto in one. So, the 1^st is, if I want to show from the left. For example, I have generated 3 divs. So, I will 1^st of all give styles to each div. So, in style, mine is div. For example, I want 1^st... when we are working with left, right, etc. with position properties, at that time it is necessary to be absolute. So, I will first of all define the position as absolute. So that it can move with my screen width. And after that I will give this div 150 pixels width and height also 200 pixels. So, that my rectangle type division would be generated. Then if we are taking any font, I will give it 20 pixels. Okay, my 1^st is class length. So, I will 1^st define the class length. I want that the length property that has given that border should be in green color. So, like 2 pixels; solid green. And here I will give, left. And after that lets say I am giving it a length of 250 pixels. Save. So, if I have taken length 250 pixels from left. I will even show that from the left it is 250 pixels. And these 2 we will comment as of now. We will run the program.(pause) So, this is our program. Okay. So, you can see that the currently left 250 pixels is written means this division that is there is from the left side of my body, this is at 250 pixels distance from my body. Now, I will do the same thing but with the percentage. Okay. So, this is my percentage, class, percentage, border : 2 pixels, solid blue. And in this we will take left, for example I have to give a percentage and I want that from left, it should be around 60%. Okay, so this is one of my blocks. In that we will add a text. 60% from left. So, this is at a distance of 250pixel and this block is from the left at a distance of 60%. Next is our class in which we are going to give an auto. It should be left auto, in that also we will take  border: 2pixel solid orange, left auto. When I have given auto, it has gone and stuck to most of the left part. Means it has been placed here. In the case of auto, we are not explicitly giving it a value. So, it is not calculating the distance from the left side. This division is showing me from the left most portion means it is showing me almost attached to the body. So, we did this program, in which we used percentage, pixels and auto value. But we have currently used absolute value. So, our program is getting set in one line. If in the same program I give relative instead of absolute. So, what happens? You can see that my 1^st defined block is coming 1^st, then the next defined block is coming in the next row, means after that and the 3^rd defined block is coming under it. So, my blocks are coming one below the other. Means they are not coming exactly at the same place. They are setting one below the other. So, it is happening when I am taking a relative position. So, I have 2 options available with me. Left we have kept as is. If we keep the position absolute. Then we get a different output. In which all my blocks are set in one line. If I am keeping the positions relative, my blocks are unevenly getting set, my blocks are getting set in new rows. So, this is the difference, if my block is absolute set or my block is relatively set. So, our divisions based on absolute and relative are giving 2 outputs. So, here position relative and position absolute, which I will comment. So, our file will get generated. This is our relative output. Same if we want to do for our right, what will it be for that? But here we will not see relative. 1^st of all we will see in absolute position. And wherever we have written left, there we will write right. Save, right.html.(pause) So, this is my right. You can see in the right. That we have in the program…like we did in left, same thing we have done. But we have distance from right. So, 1^st is length class, in length you can see that it is in green color. So, here green color means from the right 250 pixels.okay! Here you can see that it was 250 pixels from left but here it is 250 pixels from right. Got it?  Then it is in percentage, so from the left 60% distance and from right auto. From right auto means wherever is our div, there it will be placed. So, basically for us from left 00 will be calculated. So, by giving auto from right, our this div is not set on right side but it is set on left side. But if this same thing, like we did earlier, changes to relative. So, you can say that my both the divs are not showing up last div is showing up. The reason for that is as soon as I change it to relative, my elements are going out of my viewport. What I will do for it is, the 250 that I have taken, I will make is -250 and the percentage I have taken, I will change it to -60%. And as soon as I reload it, both my divs are showing up. Means, from right 250 pixels, means relative to my body all these 3 are showing up. As soon as taking relative and minus, it is not getting calculated from ther but from here. So, I am getting almost the same output like left. And all 3 divs are showing up to me. So, this was for our right. So, we will copy from the right and we will paste everything here and wherever we had mentioned right, there we will make it top because it is our first example, we will run absolute itself. Save, top.html. Okay, so here you can see that on the top we are just getting one, while in total we have generated 3 divisions here. So, what can be the reason? When we copied the code from the right and took it on top. At that time we wrote minus. So, what happens is this top line that is there of the browser, our content is going over that. So, we will make it positive again. Save. So, here you can see that below the top. Since we have taken absolute, earlier we had taken left and right. So, our content was getting placed on the top most line. Now we are taking absolute and we are calculating the distance from the top. So, in our leftmost row, we are getting the content, we are getting the division. Now you can see here that the 1^st one is auto, 2^nd in green color, where 250 px was mentioned and the 3^rd division that we had kept on 60%, is getting overlapped. But that is not a problem because we have only given distance to the 3 divs. We are not concerned about the overlapping. So, it is fine if it is overlapping for our particular example. So, here you can see that we have taken absolute. Now we will change it to relative. After changing to relative, you can see that the 1^st one that is there, that is 250 pixels, class length. So, our 1^st division is coming on 250 pixels from above, our 2^nd division is coming at 60%, so in the same line, at 60% is another division. And at the end auto. Auto we have written 3^rd. So, where our 2^nd division ends. From there our auto, means 3^rd division is starting. So, this is our relative. okay! Got it? So, you can see that. This is not getting scattered in different lines. Because already looking at it horizontally our 1^st, 2^nd 3^rd division, they are there in different rows itself. That is the reason our 3^rd division of auto, where our 2^nd division, percentage one gets over, from there it starts. So, this was relative. Now we will copy the same and write for the bottom, bottom.html, right, top, bottom, instead of relative the 1^st example of absolute, bottom, we will run this program.(pause) Okay. You can see in the bottom that from down, the spacing is counted. So, these 250 pixels division that is there, it is 250 pixels from down. So, lets do one thing, instead of 250 pixels, 100 and we will make it 50. Okay, from the bottom most line, from 100 pixels, 250 one. Actually, it is not 250 now, we have taken 100 and 50. So, it will come 100 and 50. So, 100 pixels division and then 50% means exactly from down, this is our 50%. So, our division is starting from there and in auto as it is in the left most corner is our division. Now we will do one thing, we will change it from absolute to relative. So, you can see that our 100 pixels one, 1^st division, that has gone up because now our position is relative. So, it is calculated from top. If I consider it minus. So, you can see that in the bottom minus pixels. Means the calculation is considered from the top as we have taken minus this time. Then comes 2^nd, 50% from the bottom. So, as usual. And at the end comes auto. Every time in the new row it has been calculated. In the new row each of our division is starting. So, because we took minus, our 1^st row which was there, from this position it has gone down 100 positions. Same, if I do plus again.  My first width that is there, its height is of 200 pixels. It is till here for me. From this line if we consider the bottom. So, from this line at a 100-pixels distance, this division is starting. The remaining division is going out of the browser. Understanding this is a little difficult. From this line, if I don’t consider my division as bottom. I  comment it. You can see that my division is exactly coming here. And now how much up it is going from the bottom. From bottom how much 100 pixels distance we have taken. So, from this line 100 pixels division in the upward direction we have to consider. So, 100 pixels division upwards from here. So, it is coming here and starting and the rest of the division is getting cut. We are seeing this division entirely as its height is 200 and it is starting from 50% distance. Last is our auto which is starting from here. Last is our auto which starts from here. So, here in absolute and relative, what is the difference that comes? Relatives mostly start in new rows. Where my fist division gets over, my second division starts from there but in absolute what happens is in one row and in one column, all our divisions are counted. So, these are all our properties, 1^st was our left one, 2^nd was the right one, 3^rd was our top one and the last one was the bottom one. So, we have covered all 4 position properties today. So, guys, in our today’s segment we have covered position’s left, right, top and bottom properties. Till the time you don’t practice it, understanding it totally and thoroughly is difficult. It is also difficult to work with it if you are not hands on with it. I request you to practice this and it’s practical that we have performed today run it yourself and see. If you are getting any difficulty in that or you are getting difficulty in understanding anything. You can tell us about that on forums.learnvern.com. We will try to revert to all your issues with the solutions. Our next segment is on CSS’s position property. Thank you.