Hello guys! Welcome to our series, CSS. In the last segment we had seen about CSS’ positioning property. In which we had seen how CSS float property is used. In float property after giving float left and float right. How we clear the floating, that also we had seen in that segment. So, I hope, how much ever we had covered in the last segment. You have performed the practical on your own and you have checked. If you have any question or doubt from that segment, you have any query or while performing the practical, you are facing any difficulty. You can tell us about it on forums.learnvern.com. We will try to revert to your queries at the earliest. Okay guys! so, We will go ahead with our today’s segment. Our today’s segment is on width and height property. In the other CSS properties that we have seen, in those properties we have already used width and height. Especially in image and table. Today we will see, in which all ways we can define the width and related to that there is one more extra property that we will see. First of all, what is the width property? Width property defines the area of the content on the screen. That in how much area we have to show a particular content. Here in the width padding, margins and borders are not included. Which means our content only occupies the width. In that margin, padding and borders are not added. So, when we define width property. That is without these 3 points. Next, it sets width of the area inside the padding, border and margin of the element. means Padding, margin and border, leaving these three things, the content that comes to us, to that content only the width property is applied. Here in this slide we can see three values of the width, auto, length and percentage. So first of all, we will perform the practical and check these three values and after that we will go to max width and min width to see the difference in it. So, I will open the Sublime Text, we will set it on html. (pause) Example width property, save, CSS width.html. Okay. So, here is the image that we have with us, image.jpg. We will use the same image here. So, its image, image.jpg. So, 1st of all if we reload this image as it is then, we are not getting the image here that means that there is some spelling that has been typed wrong. Source images. In the folder's name s has come. Okay. So, here in the images folder there is an image which is called Image.jpg So, here I have not defined the width in that case, I'm getting this big an image which has a bigger height. We are getting a bigger scroll bar in both x and y direction. Now, if I want to define the width of this image, I have the image's own attributes, image’s width and height. We are seeing CSS. We will surely define the attributes but we will override it with internal CSS. So, first of all I will give width here 200, I will give the height 200. So, this is 200 width and 200 height. With this our image has been shown. Now, to the same thing I will give style image, image tag, in that I will define the width as 50 pixels, first of all we will only give the width. Okay, so you can see that in the internal CSS the width that I have defined of my image that becomes a size here. We will zoom into this and see, okay. So, this is the width that comes. So which size did the image take? Height, Height is what we have defined in the image but that has been overridden with the help of CSS. So here one precedent is also clear that when we give them height with the help of the attribute, even that we can override using internal style sheet or external or in any other way, whichever CSS we will add, we can overwrite it with its help. So, here our width has come, 50 px if the same thing I wish to write in percentage, let's say I take 10%, so my image will look bigger than 10%, if I make it 100% The image is getting wide as much as the width of my screen. It is getting stretched. Okay, guys! If I make it 50, the image is coming exactly in half of my screen. So here we have seen two values. One was length in TX and one in percentage. Now if we auto define the width. So, in the case of auto the width that we have defined, 200 200, that width we are getting here. If I zoom it out 100%, without auto, we had got the same image size, when initially we had added only the image in the screen. So, whichever size is given in the image tag under attributes, same size we are getting here. So, these are the 3 values of our image. In length, in percentage and in auto. In same thing, we will do a new program. We will copy the same thing here. And we will name it, Example height property, we will save it, height. Html, run it, so this is our height and we are getting the same image here. Okay. So, now here the height, the width that we have got, height, 50 pixels, what we had done in the width we are doing the same thing. So by giving 50 pixels height, the width that we had defined 200, in the attribute the same width is coming here and the height is getting shrinked to 50 pixels. If I do the same thing by commenting this, in percentage, I am getting it in 50% height. If you zoom it out, you can see that our image is looking almost the same as we were seeing it before. So, we will get to know that if the height is defined in attributes, then the percentage property doesn't affect. okay! guys! I am repeating, when the height is given in pixels, at that time it was affecting. But when we give the height in percentage, at that time it doesn't affect.same, If we mention the height auto, in that case as well we will get the same result. What we have defined it the attribute, the same thing we will get here. So, you can see that in width, length property was working but, in the height, our percentage property doesn't work. Now, we will go back to our slide property. In this slide we have seen the width property with the three values and along with that we have also seen the height property with its values. In width and height, we are getting two things. Here we are getting Max width, Min width and here Max height, Min height. All these 4 properties we will check in both the programs one by one. For example, when I work with width, then, let's say if I remove the auto, width and height l keep it as it is 200, 200. Now. I will add max width property here. Max width, let's say I add it 100 pixels. Save and here I will define the width as 50 pixels. This defines that my next width will be as much as 100pixels. Here I have given the width as 200. And here I have given the width as 50 pixels. Now I will go in this width program, Okay. So, you can see how much my width is, it is as broad as 50 pixels. Now, if I make the image 100 pixels, it becomes 100 pixels. Now if I make the image 200 pixels, you can see that it is not becoming 200, It is staying at 100. Which indicates that even if I have defined width as 200. And even here I am taking the width as 200. But what is the max width that I have taken, 100. So, my whichever image would be there in this program, it will get one limitation that this image will not be bigger than the maximum value of width that has been given. Max width and Min width are very important properties and if we have to control any image in the web structure…let's say if I have a website and I have added 8 to 10 pages in it but I want that my entire website has to be consistent. In that, any of the images should not occupy more space than 500 pixels or 20%. So, in that case, I will define the Max width property. either In the image,in this attribute, or by going anywhere if I add CSS, that will override with Max width property. okay! Now, we will do the same thing with Min width. Min width, let's say I add it, 50px, let’s say we make it 100 itself, so that our image looks square. Okay. Now the width of my image was minimum 200. So, it is exceeding. if I make it 100. Okay, so you can see that my image width is becoming 100. If I make it 70. It is not happening; you saw that 70 pixels is not happening. So, I have bound the image at 50. Let’s say between 50px and 100px, we take 70px. Okay. So, the image is now 70px. Now if I make it 50, It is becoming small. If I make it 100, it is becoming 100. But if I make it 10. It is not becoming 10, It is going to 50 and getting stopped. In this way we have controlled our image to minimum by 50 pixels maximum by 100 pixels. So that it doesn’t get wider than that. Same if we go into height. Max height if we add, let's say 100 pixels in the height program. You can see that our height has become 100 pixels. We have passed in the attribute, 200 and this is exceeding, so the height is not getting wider than 100 pixels. If I take the minimum height 50 pixels. Okay. Currently I have given the height as auto. I will comment this. If I take 30 as in between 50. Let’s say my 30 height is not happening. The height is 50, I will reload 50. Same height, I will make it 70, height increased, I will make it 100, height increased but when I make it 200 It's not working. means we have bound even the height in between 100 and 50. Means we have seen two programs, one was of width and the other was of height. We have controlled the width with max width and min width and height we have controlled the height with max height the min height, so that our image is not more in height or width than this. The same thing we can do with elements as well. When we are working with a table and want the table that is visible on the screen that table should not be broader than a particular width or we have to occupy a fixed width that only in this range our table’s width should come. No matter how much is the content inside. In that case we can make use of min width, max width, min height, max height like attributes. So, guys these were our width and height properties. I hope whatever we have covered in the segment today you have understood that. Width and height we have already used in our previous segments. But today we have seen an additional property in this, max width, max height, min height, max height also we have checked.okay guys! So, I request that you try this practically on your own, perform it and if you have any issues or difficulties in performing the practical, you can tell us on forums.learnvern.com We will revert to your issues as soon as possible. Our next segment is about CSS’s overflow property. Thank you
Share a personalized message with your friends.