HTML & CSS Crash Course Tutorial #8 - CSS Layout & Position

Key Takeaways

okay then gang so we've seen quite a lot of different CSS properties so far but they've mainly been to do with colors fonts margin and borders and that kind of thing now there's also a few properties we can use to control the layout and position of elements on the webpage and one of those properties is called the position property now it can have one of five values static fixed relative absolute and sticky and we use these two position elements differently on a page so first of all static now HTML elements have this default value of static to begin with there's no special positioning qualities given to this value but it does keep the element in normal document flow of the page now if we set an element's position to be relative then we can shift the element around the page relative to its original position in the page so for example I could say of a certain element position relative then left 20 pixels which means moving away from the left by 20 pixels of its original position and then bottom 20 pixels so move it from the bottom of its original position by 20 pixels as well so that's how we can shift things around a little bit using position relative now position fixed that positions a certain element relative to the viewport and now the viewport is just a part of a browser that we see the webpage on so for example we could have a navbar element and we could give it a position fixed and we could say left:0 top:0 and that positions this navbar relative to the viewport zero pixels from the top and the zero pixels from the left so it's going to stay there even when we scroll down the page like this it will always be fixed at the top of the viewport now the absolute position allows us to position things absolutely relative to its closest parent which has also been given a position property that is not static so I could have one section here the parent which has a position of relative for example then I could position a child element inside that which has a position of absolute left 20 so 20 pixels from the left of the parent and bottom 20 so 20 pixels from the bottom of the parent so when we use position:absolute it's positioned absolutely relative to a parent which has a position property applied to it as well okay now don't worry if you don't really understand that just yet we're gonna have practice of this in a minute and same goes for sticky we'll practice this in a minute rather than me show you a diagram of this because it's a little bit too complicated to go over in a slide but essentially it's a mixture of static and fixed it's static to begin with then it becomes fixed when your scroll position on a page reaches a certain points so again we'll look at this in detail shortly so now I have a brief overview of these different types of position let's go ahead and try using some of them in our project ok then so I'm back over here in the project and in styles dot CSS we don't have anything yet now what I'd like to do is show you static position first of all now remember I said that static position was like the default position that all elements have originally and it doesn't really actually do anything but let me just demo this regardless I'm going to grab the header so I'll say header and that's my selector then inside I'll say position is static save that and preview in a browser and notice this header over here this thing doesn't actually change we can see the position is static but if we uncheck that so that it's no longer static then it's not doing anything on the page all this does is put it into normal document flow and by normal document flow I just mean that's how elements are normally displayed in a browser from top to bottom without any kind of extra positioning so I suppose this position property of static is good if we want to reset something that's previously being positioned absolute or relative and we want to put it back into normal document flow otherwise it's basically just the default value so the next property value I'd like to look at is the relative position value and remember I said that if we position something relatively it means we can move it relative to its original position so we could shift it to the left shift it up down etc so let me first of all position the header relatively and just nudge it around a bit to show you how this works so I'm going to change this now to relative and then if I save it you're going to notice first of all it doesn't actually do anything but if I then apply a left property and say 100 pixels that means it's going to shift the header from the left edge to the right by 100 pixels and that's going to be relative to its original position so if I save this now you're going to notice it's moved over here to the right away from the left position now that's a little confusing when you first start using this because if you're thinking well this is called left surely it should go left by 100 pixels but that's not the way these positioning things work when we use left and provide a value it means we want to shift away from the left by this value likewise if I did top it means I want to shift away from the top by 100 pixels in this case so if I save it and preview over here now we can see that it's down here and it's actually gone over this image right here so the image hasn't moved down in itself this has just been moved over it now this original position over here this still has a space this header for where it originally was but we've taken what was in that space and just basically moved it relative to this original position that's all this does now a lot of the time when we position something relatively we don't necessarily move it around like this we position something relatively so that we can position something else inside the element a child element absolutely relative to the parent and we're going to see that in a second for now what I'd like to do is just take this off because we don't want to position this relatively anymore instead what I'm going to do is position the banner over here relatively instead because this thing here the welcome message which is currently down here we are going to position that absolutely inside this bun out later on so for us to position this absolutely we need this parent to have a position property as well so we'll set that to relative to begin with so let me come down here and Banat and we'll say position:relative now I'm not going to shift this around at all like I said the only reason I'm doing this is so we can position something absolutely inside it later but if I wanted to I could do that I could say top you know 200 pixels and that's going to move it down by 200 pixels so let's just leave it like that for now okay then so the next position value I'd like to talk about is the absolute position value but before we do that I just want to tidy up a couple of styles right here because at the minute this image is a little too wide at most it should be 100% width of the browser so what I'm going to do is first of all target the image I'm going to say banner then get the image tag inside it because that's where the image is right here inside the banner and then oops if we say MUX - width we've not seen this property before and set it to a hundred percent then the max width it's going to go now is a hundred percent of its parent or if that's not been set away than a hundred percent width of the viewport so now it's fully contained inside the viewport okay so now what I'd like to do is position this welcome message right here and let me just zoom into the browser a little bit so we can see this position this relatively or rather absolutely relative to this banner right here so it's going to sit on top of the image so remember to do that I first of all have to make sure that the parent has a position property that is not static and we do we gave it a position of relative the banner is the parents of the welcome section so now we just need to position this welcome section absolutely relative to that banner so let me come over here and grab the banner welcome like so and then inside I'm going to say position is absolute so if I save this and come to the browser notice what happens here we still see this welcome message down here but now the rest of the content is moved up behind that welcome message and that happens because we've positioned this absolutely and when we position something absolutely we take it out of normal document flow and we lose that space that it was originally in now remember when we positioned this relatively and we moved it around the space that it was originally in was retained we kept it there it was just a gap at the top but now when we position something absolutely we do not retain that space this comes out of normal document flow and that space is then eaten up by the rest of the content underneath it so that's something to be aware of what we need to do now is position this so it goes over the banner and we need to position it from the left of the banner and the top with the ballot now if we inspect this and hover over banner we can see the dimensions of the banner over there on the page we can see the little blue box that goes over it so that's what we're positioning this welcome message relative to so if I now say okay well from the left of that banner I want it to be zero pixels then it's going to position it from the left by zero if I then say from the top by I don't know 200 pixels then it's going to position it from the top by 200 so if I save this and come over here now we can see it's right here so that's zero from the left edge 200 pixels from the top now we could use a pixel value like this but notice that as the banner gets smaller and larger then the position of this welcome message doesn't actually change because we're using an absolute value it's always the same height from the top even when the banner gets smaller now that's not really going to work so what I'd like to do instead is use a percentage of are you right here instead I'll say 30% and that will work a bit better so now it's 30% from the top but as the banner itself gets smaller and larger it kind of recalculates itself so that it still fits in the banner that's using percentages okay okay then so I'd like to apply some extra styles to this to make it look a bit better so let's go over here and first of all give this a background and this is going to be a background color of F eb6 1/4 I've already found that color if not just making it off the top of my head it's an orange color so let's preview this and it looks something like that's okay now I'd like to make this text white so we'll say color is going to be white save that oops don't do it in capitals color is white save and preview okay looking good and then finally just a bit of padding to space this out inside so we'll say padding is going to be about 30 pixels all the way around so save that and people okay that's looking good now I'd like to make the font size a bit bigger so if we open this up we can see the inside we have an h2 so what I'm going to do is set the font size of the h2 itself and I'm going to set that to be about 75 or 74 pixels so I'm gonna say bummer and then h2 we don't have to say dots welcome then h2 because we don't have to make it that specific we're not trying to override another style so in here we'll say fonts - size and that will be around about 74 pixels if I save this and preview then we can see it looks like this now that looks very big at the minute and that's because I'm zoomed into the browser over here at 150 percent if I reset this back to 100 that looks a bit better now now I'd also like to make this word a little bit bigger than these words now if we look inside the index over here and we scroll to where we have this welcome message this word mario club that i want to make bigger is inside a span tag so we could use that in our selector to target this single word so let me do that I'm going to say banner h2 spun and then there I could say font size and if I wanted to I could set this to be something like 90 pixels and you know that would work fine it would make it a bit bigger but instead I'm going to show you a different unit of measurement that we can use and that is going to be m/s so I could say something like this 1.2 or 1.3 m/s and what that does is take the value that it currently is that it inherits from the parent which is this 74 pixels and it times is that by 1.3 so I can't work out what 74 times 1.3 years but it might work out about I don't know 100 or something like that maybe a bit more so if I save this now and preview we can see this now is much bigger now if I inspect this and come over here we can see that the font size right here is 1.3 m/s so 1.3 times whatever this is which is 74 pixels now because that's what we provided to it okay the my friends so that is absolute position remember the important parts are that first of all the parent element has to have a position property that is not static in our case it's relative secondly we use position absolute on the element that we want to position inside that parents then we can use a combination of left top or even right and bottom instead to position this element inside that parent element so the next position value we're going to look at is the fixed position value now something with a fixed position is position relative to the viewport itself now the viewport is just this section of the browser that we actually see the website in so over here now this would be the viewport right here on a mobile device the viewport is gonna be something like that okay so what I'd like to do is position the header at the top this thing up here fixed to the viewport so it's always at the top because right now if we scroll down we lose that header I'd like it to stay at the top all the time so to do this we're going to position this header as fixed so over in the code we already have a selector for the header now we just need to first of all give it a background color and this is going to be like a ready color I've already found the hex code for that and then also I'm going to give this some padding we're going to do all the other styles first of all then look at the fixed position so that's 20 pixels all the way around then I'm going to say text align and set this to center so the text is in the center then I'm going to look at the position so let me save this first of all this is what it looks like so far now unlike to position this now so it's fixed to the top of the viewport so to do that I'm going to say position is fixed and then the width of this thing is gonna be 100% now in fact before I do this let me just cut that I'm going to save it and notice the width has completely gone if I inspect the element and then go to the header you can see it's that little square in the corner right and it's behind the banner as well now first of all let me sort out the width I'm just going to say the width is 100% so then it goes to 100% of the viewport width so now if we hover over this we can see that box is now 100% width but it's still behind the banner we can see it poking out over there now that's no good we want it in front of the banner now to do that we're going to have to use a property called Z index or Z index and what that property does is bring things forward or push them back on the page so we want to bring this thing forward right here now initially before we start using Z index at all on a page everything has a Zed index of 0 by default now if we give something as said index of more than that then it brings it forward and if we give something as that index of less than that it pushes it backwards so since everything has 0 to begin with if I give this a positive value like 1 or 2 then it's going to bring it forward okay so let me try that I'm going to now say over here is that index and give this a value of 1 save it and now we can see it's brought forward on the page so we can see it ok so now this has a position of fixed so if we start to scroll down you can see is still fixed at the top but we still have a little bit of space around the left and right so I need to give this a top and left property so top 0 so it's 0 from the top of the page and left 0 so it's 0 from the left of the page save that and we get rid of those little spaces so that looks good finally I just want to style this h2 or h1 I think it is a little bit so it looks a bit better so let me have a look inside indexed or HTML and we can see at the top that this is an h1 inside the so I'll say header h1 to grab that and then first of all we're going to call this white then I'm gonna give this a border and that's going to be eight pixels in width it's going to be solid and it's going to be white I'm also going to say padding is six pixels to the top and bottom and 12 pixels left and right now when I do two values for padding like this the first value is for the top and bottom the second value is for the left and right so let me save that and see what it looks like so far okay not great this is because it's a block level element so by default it takes up the full width of the page we've seen that in the past we don't want to do that we want it to only take up the width of this thing right here now we can't set it to inline because then we can't use margin and padding properly on inline elements but we can set it to inline block which we've seen before as well so we can say display is inline block and then we get the best of both worlds so it doesn't take up the full width but we can still use margin and padding on it properly so now it looks something like this now there's one more property I'd like to show you and that is something called border radius and border radius helps us to give a curved corner on the element so I could say something like this border - radius and set it to 10 pixels and then that's going to make the corners curved a little bit so if we see this we can see those now they're quite soft the corners what I want to do is make this more like a capsule so I need to increase the border radius by quite a lot I'm going to set this to be instead 36 pixels save it and now it looks something like this which i think is a bit better so there we go my friend that is fixed position and we've used it for this heading at the top of the page awesome okay they're my friends so the last position value I'd like to talk about is the sticky value and that's kind of like a combination of a fixed position value and also a static position value so say for example we give this navigation right here a position value of sticky then what is going to do is initially behave as if it was given a position of static it's just going to sit there and do nothing but then as we scroll down what we can do is say okay that's a certain point like here now become fixed and stay in this spot so if we scroll any further then it's not going to go up behind this header it's going to stay fixed just below the header okay so that's what sticky does and then when we come back down it goes to its original position so let's give this a whirl first of all I want to give this navigation some Styles so if we look inside the index file we can see this nav right here we'll just use that as a selector because that's the only nav element inside this HTML so we can say now and then I'm gonna say the background color is equal to f4 f4 f4 that's a gray color and I'm also going to give this a padding of 20 pixels all the way around so now if I save this and preview we can see this is what it looks like okay I'm gonna make these things look a bit better as well so first of all let me say nav Li and inside here I'm going to say the width is going to be roughly about 25% because if you think about it these things right here there's four of them we want each one to take about 25% with the width so they spread across so the width of those is going to be 25% and they're going to display as in line - block so these sit next to each other okay the font size of those is going to be about 24 pixels now if we save this then it looks kind of okay but the last one goes to the next row so this is just a quirk of using inline block and 25% they should all add up to 100% but it does go to the next line now we can combat this by going to the parent which is the UL so I can say now ul and then I can say white space and set that to no rap like so and that basically means it's not going to rap on to the next line and we should see them all in one single line which we do now awesome so that looks a bit better now what I also want to do is come to the nav ul and say the max width of this is going to be 1200 pixels and then I'm going to give this a margin of 0 top and bottom and then auto left and right and what that does is say ok on the left or right if there's any space left over I'm going to automatically apply it to both sides so essentially it centralizes it in the middle we have a central column of 1200 pixels and if the viewport was say 2000 pixels wide we'd have an extra 400 on the left and 400 on the right of margin because of this auto keyword it works itself out so that's a nice way to centralize things we give something a max width and then a margin of auto left and right so if I save this now and come over here we can now see that these sits in the middle that's nice now ok I want to now style the anchor tags a little bit so I'm going to say nav Li a and I'm going to say the text decoration is going to be not oops not like so and then we're also going to color these differently and we'll say the color is going to be 4 B 4 B 4 B that's like a gray color so save it and now it looks like this awesome now the first one right here that has a class of joint so I'm going to style that a little bit differently and color it red so if I now say nav Li a dot join that's the class and then give this a different color and that color is going to be the same as this heading color wherever it is at the very top that so let me copy that dude and oops I've done this all wrong so now if Li a dot join and the color is going to be this thing right here so let me save that and that is looking better okay so that's the now styled a little bit now what I'd like to do is apply this stick and position so it stops about there and becomes fixed so let me now come to the nav itself and give this a position of now if I save it at the minute and preview this then it's not actually going to do anything but if I now say the top value should be about 100 pixels then it means when it gets to a hundred pixels from the top it's going to stick there so now if I do this when it gets to a hundred pixels it stops and we can just about see the gray there okay so we need to increase that top value by a little bit but I can do that easily I'll just change this to about 120 pixels and this is just going to take a little bit of playing around so okay not quite let's change this to 140 and see that almost there we'll say 150 and I think that should be good yeah okay I'm gonna go to 1 for 8 and that looks perfect okay so now what happens is it stays below the banner but as soon as it gets 148 pixels I think yep 4 on the top it becomes sticky and now as we scroll down we can still see that navigation at the top so that's quite nice that is position sticky so then for the rest of this video what I'd like to do is apply some more styles to different elements on this page to get it looking more presentable to make the layout and to get it looking good on desktop devices so I'm actually going to start by selecting the body and a few other different elements and resetting some of their values because remember I said that a browser provides certain properties by default if we have a look at for example a link over here and now we've overridden most of the styles but if we look down here we can see user agent stylesheet and if we look at the Li then we're gonna have user agent stylesheet the UL user agent stylesheet and there's things like margin and padding that's applied to things I want to strip all of those back all of those default browser styles by resetting some of the properties now you quite frequently hear this being called a CSS reset and you can get varying different degrees of these things I'm going to do a simple one which targets just a few elements like the UL li body h1 h2 I don't think we use an h3 we'll stop there and incur tax and what I'm gonna do is set the margin of each one to be zero so strip out any margin that the browser applies to it by default also the padding zero and then I'm going to give each one of these elements a font family of Arial now it's enough to give just the body a font family of Arial and then it will cascade into the rest of the rules through inheritance but I'm going to be explicit so font-family:arial and this is a web safe fonts so if I save now then it's already starting to look a bit better like this and if we scroll down here okay we need to adjust this now because obviously the font was a different size therefore we need to bring this up now so let me go to the nav down here and I'm going to change this to about 108 this time I can see already it's not quite there I'm going to do 106 instead and I think that would be absolutely fine 106 okay looking good so already this is looking a bit better now I want to move on to the rest of the content down here so if we have a look inside the HTML below the banner we have this main tag right here so let me target that first of all I'm gonna say main and inside there I'm gonna say the max width of this is going to be 100% so it's not going to go off the page then I'm going to give this a width property of 1200 pixels so this looks a bit contradictory but what I'm saying is say for example we have a web page or a browser that's 2,000 pixels wide then the width is going to be 1200 pixels but say we have something where the browser or the viewport is 800 pixels wide then the max width is going to be 100% so the maximum it can get to on that particular device is going to be 800 pixels it's not going to reach this okay so the kind of work in tandem so after we've done that I'm going to say then margin is going to be 80 pixels in the top and bottom and then auto left and right that was the trick I showed you earlier so if we have a 2,000 pixel wide viewport then we're going to have a central column 1200 pixels and the margin is going to be equally distributed on the left and right because of this auto keyword okay so let me just add a couple more things I'm now going to say the padding is going to be zero top and bottom 40 pixels left and right and then I'm going to use a property called box sizing in fact let me preview this first down here here we can see this right and it's a central column now on the page and we have the margin Auto worked out on the left and on the right now if we inspect this if I go a bit smaller we can see it goes off the page now I said the maximum width was a hundred percent so why does it go off the page well that's because we have a width of 100% but we also have padding as well so we have a total width of the hundred-percent width plus the padding and we can see that right here you can see the green on the left and also if we move over here we can see the green on the right so it's the padding that's actually pushing it off the page now what we can do to combat this is use a property called box sizing so I'm gonna say box sizing and I'm going to set it to border box and what that does is say okay I want you to incorporate this padding right here into the total width so the max width can be 100% inclusive of the padding don't add the padding on top that's what this does so if I save this and preview now we can see no longer scoots off the page on smaller screens okay sweet alright then so after the main we have the article let's have a look at that we have an h2 and a paragraph tag so I'm going to target both of those two things separately so let me say article h2 and then inside that I'm going to colorize this it's going to be f6 3 2 3 2 so if I save this it's kind of like a ready color we can see now it's this color okay so I'm also going to set a font size and that is going to be 48 pixels to make it a bit bigger so this looks something like this now starting to look a bit better now we need to target the paragraph tag inside the article so I'll say article P and then the line height is going to be 2 m/s so I think we've seen line heights in a previous tutorial it basically determines the space between lines on a paragraph or some text so this line and this line and this line the vertical space between them that is the line height now what I've said here is 2 m/s so what that does is it takes the front size of the paragraph tag which by default I think is 16 pixels in a browser and it times is that by 2 so now we have maybe 32 pixels so if I save it and preview now we can see we have this larger line height okay so the next thing I'd like to do is apply a color to this so color and that's going to be 4 B 4 B 4 B okay save that and should be a lighter gray okay looking better okay so the next thing I'd like to do is style these images down here now that is a UL tag with a class I think of images yep so let's grab that class and use that as our selector images and then I'm going to say text align to the center I want to essentially align everything inside this I'm also going to say margin is going to be 80 pixels top and bottom zero left and right and then we're going to whoops make sure this is on a separate line then I'm going to target the Li tags inside the images so images li and they are going to be display:inline-block and that's so they sit next to each other but we can also use margin and padding on them correctly so let me save this and preview so far okay so we can see at the minute they're still on top of each other but what I'm going to do is say okay well the width of these should be 40% like so and then we also need to set the max width of the actual image tags inside of these because by default they take on the full size of the image but we want the maximum width of each image to be the size of the Li tag 40% in width so we can say image is Li and then image and the max width is going to be 100% which is 100 percent of its parent container so 40% so let me save this and preview and now we can see they sit next to each other that looks a bit better I want to apply a bit of margin between these two Li tags so I'm going to set the margin to be 20 pixels top and bottom and also 5% left and right so if you think about it we have 40 percent weight for each and I five to the left of each one and five to the right so that's 50 in total that each alive we have two of them so that should take up the whole 100% now you might think these are going to sit next to each other but they don't they go on top of each other and we solve this problem before when we displayed these as inline-block and the contact went to the next line that's just the way inline block works what we need to do is go to the parents and we need to say white - space no rap and that solves the problem these are just the little quirks you've come across in CSS and should go along and you'll pick most of them up as you start to develop but anyway now that's looking a bit better there the next thing I'm going to do is go on to this bit at the bottom so if we go back to the HTML we can see this section has a class of joint so let me style that I'm gonna say dots join and then first of all this is going to have a background that background is going to be F 4 F 4 F 4 don't forget your hash sign at the start okay so that's like a light gray background then we're going to say text - align and that is going to be in the center we want to centrally aligned any text the padding is going to be 60 pixels at the top and bottom and 20 pixels to the left and right and then the color the color of the text itself is going to be a dark gray which is 4 B 4 B 4 B okay so let me save that and take a look all right start to look pretty good we still need to style this bit right here this h2 and probably also this input a little bit as well so let me now say join h2 to style this all I want to do oops no capital so join h2 and all I want to do is set the font size of this to about 36 pixels like so and that looks a bit better okay now I want to style this input field which has a type of text so all I'll do is say I want the form because we have a form over here remember a form tag and then I want the input field oh it's type email rather not text inside that form so form input there's only one and that's all it's going to style so I want to give this a margin 20 pixels top and bottom zero left and right then the padding is going to be 10 pixels top and bottom 20 pixels left and right the font size is going to be 24 pixels to make that a bit bigger the border radius which remember gives it a softer corner and that is going to be 28 pixels makes it more rounded and capsule-like and then finally we'll say border itself is going to be 4 pixels solid and white okay so let me save this and prove your and it looks something like this now the reason I gave it a border of 4 pixels and solid and white is because later on when we learn about pseudo elements and hover effects and select effects then we're going to change the color of this border without changing the height or anything we're just going to change the color so it's there to begin with but it's kind of invisible and later when we select it will change the color of that so that a user knows it's in focus okay so that's pretty much this section done the last thing we need to do is the footer down here so I'm going to come down here and say footer and then this is going to have a background of F 6-3 and it's actually there this red color and then after that I want to say the color of the text in here will be white the padding is going to be 10 pixels all the way around and we're going to align the text to the center so text aligned is Center save that and preview and there we go so whoo that was quite a lot of work but this is all CSS you've kind of seen in the past we do have a little problem here which I'm going to take a look at in the middle because I'm not sure that should be like this so we'll address that in a second but basically apart from that this is looking pretty good so like I said it's all stuff we've seen so far if you find yourself struggling with it do go back and check the earlier sections because 95% we've already covered in previous videos but the more practice you get the easier this kind of thing is going to become and the quicker you're going to be able to style websites using CSS so let me just address this issue right here because that doesn't look great and I think what's happened is we have this anchor tag right here with a class of join and we also have this section with a class of join and when we style this join class down here we're actually giving it a background color and some padding now instead of just styling join let's do section dot joint so then we're just styling any section with a class of join not the anchor tag itself so if I save this we should see that go back to normal which we do okay so there we go my friends we've now styled this website and it looks good for desktop there's a few more things I'd like to do but to do those we're going to have to understand pseudo elements and pseudo classes and these things allow us to do things like hover effects or select effects when we select a certain input field of things like that so we'll see all of that in the next video