CSS Tricks : CSS Problems Solved

well hello Internet very often I get the same cascading style sheet questions asked and in this one video I'm going to answer about 50 of the most common questions that I get asked all the time in the description you'll find a link to all of them so you'll be able to really quickly find whatever problem you might have click on it and find a solution so I have a lot to do so let's get into it okay so on the left side of the screen I have a basic text editor and over on the right side of the screen I have HTML and I'm going to do a whole bunch of different things here let's just start off by editing my body tag now very often it is very useful to use the e/m unit sizing for our text and just about everything else because it scales so nicely the only problem is is the e/m sort of don't make sense so I'm going to show you a really easy way for them to make sense what we're going to do is come in here and define our font size as 60 2.5% now if you don't remember basically whenever we use EMS document wide all of your sizing is going to be based off of the root level font size in this situation that's going to be body so by making this 60 2.5% what we're going to be able to do if we take 16 times 60 2.5% that is going to equal 10 and what that's going to allow us to do is let's say that we want to define something as 1.6 e/m that is going to be equivalent to 16 pixels which is a very common way for us to style fonts and that is what we're going to do so that's just the first thing we're going to do here then I often come in and to find my margins as 0 for my body this is going to solve a lot of problems as well as my padding also for 0 very common question is how to get images to repeat I'm going to use background image and we're just going to go URL repeat pattern dot pang is something that I have saved and when we just come over here and reload that and you're going to see there is a repeating pattern now as we mess around with this it's going to get very very sloppy but we're going to clean it up slowly but surely you can see there is a repeating pattern and that is how simple it is to do that by default it's going to repeat to the right as well as downwards so the thing we hear about all the time is how do we use a fixed background during scrolling we're just going to go background attachment right like that and here I can just say fixed and when whenever we reload it you can see that everything is scrolling but the background is staying just firm just the way it is you can use repeating backgrounds at the same time that you use a fixed position for your scrolling let's come in here and let's style the rapper so we'll be able to see this a little bit better than the rapper I just use all the time so that I can style everything and have styling that completely surrounds everything on my document now here for font size I can just go 1.6 p.m. and that's going to work for us because of this guy up here it's going to make a lot of sense you can think of that like 16 pixels which is a very common way of using fonts come in here install my padding margin:0 and auto is going to put everything in the center of the screen let's just give ourselves a fixed width of 900 pixels a height of 2,000 pixels and we're going to be messing around later on to show how we can make a fluid sort of layout so that we won't have to worry about defining the height and let's make this white and now you can see it looks a little bit better and if we come out here you can also see that the non scrolling background is there still working for us now let's get back inside of here and do a couple more styling with our body and let's say that we want to create a gradient background well in this situation we're going to have to do some cross browser stuff and in this situation I'm going to use the linear gradient layout and you can see it right there and exactly all the different ways we're going to have to use or define for this to be cross browser and you can see I just want to start the gradient at the top of the screen go downwards and we're going to start off with black and then fade to gray and if we save that reload it you can see that's exactly what it does starts at black and fades to gray and it's also staying stable there as well because we still have the non scrollable background and I have a link in the description that has air all this code and it's basically set up like a cheat sheet so you can be able to use this to do all kinds of different things copy and paste another thing we might want to do is use a scalable background image and to do that what we're going to do is go back round the image and I'm going to use a completely different one-minute link to my url and let's say I've a mountain background make sure you always put the semicolons there at the end then you're going to want to define your position as Center Center remember we're trying to make a background that is going to automatically scale as the browser window scales also going to come in and make a background attachment and make this fixed then we're going to have to do another css3 trick here and make a cross-browser and what we're going to be using is background size with the default set for cover and now you can see as the background or the browser windows scale so does your background image so another neat little trick now let's go outside of the body section it's normally a good idea to set your default margins and padding's for all of your elements to zero so that you can build from that and to do that we'll use star and then we're just going to say margin and zero and padding and zero another thing that is very useful to be able to do is to include all of your padding and your margins inside of the width and height that you define for all of your elements and to do that document wide you're also going to do that after the star which once again is going to focus on every single element the whole entire document wide and you're going to use box sizing with border box like I said it's just simply going to collapse if you say that an element is going to be a certain height and width it's going to include the margins and padding with it and it just keeps from a whole bunch of things overloading let's reload that you can see here because I changed my margins and padding's that if things are a little bit sloppy but we're going to fix that up let's go down inside of our wrapper area here and change a whole bunch of other different things let's say you wanted to place a non-repeating background and we're going to do it in the wrapper in this situation so let's put two of them down so we're going to go background and image and I'm going to URL flower background and this is a ping file as well we have to remember it's going to by default repeat both horizontally as well as vertically so if we wanted to do something different we're gonna have to say in this situation we're going to say no-repeat and we're just going to put it one position and the position that we want to put it in background position let's say we want to put it in the bottom right of course you could do the top and left and all those other different things I'm going to do bottom right in this situation if we do that and reload it you're going to see there is our little flower that we put in the bottom right hand side of the screen now we're also going to be able to put two of those background images in there if you would like and to do that we're going to go background and here we're going to define URL and let's do flower background again that is put our ping file in there and let's say we want to put it in the top right this is one look a little bit weird we can also go and do no repeat here as well and then we could also go you around flower background thing bottom and I'm basically just overriding the other one that I created already no repeat and then we're going to put white inside of there and reload it and you can see there's a flower background right there and there's the other flower background so you can use multiple different backgrounds all in this different screen whatever you'd like also very easily come in and change the opacity for the wrapper which is basically going to be everything that's on the screen except for the body which is going to be the background then of course the background body is going to show through as you can see right there and another thing that's kind of interesting is let's say we want to use custom fonts now there's multiple different ones I like to use but let's say we want to use google fonts in this situation you just type in Google web fonts and Google has a ton of different fonts that are all free another option is font squirrel but you have to pay for those fonts so I i'm kind of cheap so i just like to use whatever i want to use and let's come in here and let's first off with specifically one of the very popular ones is called lobster so let's just take an Lobster and there's lobster right there to use it you just come in here and click on your little button scroll down here you're going to want to take this guy this link right here and copy it jump over into your HTML and you can see i already went in there and put pasted that in so you're just going to paste that guy right there and then very easily jump back over into our CSS and let's say we wanted to style this h1 that's up here Sherlock Holmes let's say we want to style that guy give it this funky font go h1 and we're going to say font family like this and you can just jump over here to the Google Fonts and it's going to tell you exactly what to do you're going to use font-family lobster or cursive copy that jump back over here ace a 10 and reload it and you can see now you have a funky type of cool-looking font right there that you are going to be automatically able to use and of course it's from Google and it's free so thank you google another thing it's very common is that we want to use our links however we want to use them and very often we do not want underlines with our links and I'm sure many people know how to do this a and visited and then you're just going to say text-decoration:none that's going to get rid of any underlines you have in your links another thing you might want to do however is highlight the links anytime somebody hovers over them and to do that we can just go hover and background-color and reload it and you can see that line went away but if we put our mouse over top of our link you can see that it automatically has that different background which is kind of cool so now let's go in here and style our header section and of course we're going to be able to use these tags multiple times I have an h1 tag there say I want to put an h1 tag down here no problems just going to override anything I'm going to put a margin bottom on this guy of 0 and then I'm going to put a text shadow on it and to do that we can just do text shadow and here you're going to do how much you want it to move to the right and downwards and how much of a blur you want and then your color of choice you can see now there's a text shadow on there it looks kind of cool we could then come in and let's style these paragraphs a little bit and let's give them a margin of 10 pixels see they spread out a little bit let's also say that I want to then come in and remove the margin for a paragraph if it follows an h1 to do that look for an h1 and a paragraph and then we could change our margin top to zero if you don't like to indent text so the first paragraph I here has a class of first P if we jump over here and look at that see first P there it is let's say I want to go in there and indent attack specifically just type in first pay like this and tatting left and then point emm 1.4 a.m. and you can see that indented so I'm just rocketing through all the different ways of doing all these things let's say you also want to enlarge the first letter of a paragraph let's say in this situation I want to enlarge the first letter of my fourth paragraph I can just go fourth pay and I can target the first letter right like this let's say I want to change my font size 200% I'm then going to want to float it to the left so that it has a little bit of shape there and change my line height one see how that works reload and you can see there is the T and it's a little bit enlarged and it fits right in there and the reason why it fits inside of there is causing the float now let's go in here and fix my dog pick this little cute dog up here going to focus in on this guy again dog pick let's throw a boarder on him want to know how to you can throw borders on pretty much anything so solid and let's just make it black just for simplistic reasons let's also throw a margin in there 10 pixels and the reason why is we're going to float that to the left so that it works seamlessly with all the text but also has some shape there and there you can see very very simple no the thing we can do say we want to add a drop shadow to our little dog picture again we want to do this in a cross-browser way so this situation we use box shadow and just like before we're going to say how much we want it to move horizontally and vertically and this is going to be the blur amount and this is going to be the size of the shadow and this is going to be the color of the shadow and you can see that's just how easy it is to add a little box shadow say we also want to come in here and round the corners of this box again this is a cross-browser way of changing the border radius and we're going to change that radius by 10 pixels reload it and now you can see it's rounded and then finally let's say we want to rotate the image again cross-browser we're going to target using rotate and we're just going to rotate it three degrees and there you can see it's rotated three degrees there's a whole bunch of different ways to work with images and we'll get into a couple more another thing we want to do here is let's say that we want to use an image inside of our list items here's a list item right down here and let's say we want to throw in a little picture inside of there instead of using boring bullets and things like that well we just go list style image if you can see here I'm using sublime text if you have a little bit of a nice editor it's going to automatically throw in everything you need there you're not going to have to think so I enjoy not having to think if at all possible let's come in here and if we want to remove the list indents which can be unsightly we can just go to list style type and change that to none and we're going to have to also change our padding left let's make that 20 pixels and then remove the margin left automatically and we'll change that to zero point now you have little cute little icons there instead of ugly bullets then you can play around with the margins and have that line up however you'd like if you would then want to have all of your list items instead displayed horizontally these are called notices that's the name of this class we would then target our list items like this and then display inline reload and now you can see they line up horizontally it got rid of the bullets and all that but here is the list items right there all horizontally set up and now let's mess around with tables so we have this table down here that has all kinds of football statistics inside of it I'm going to style that guy up first thing I'm going to do is target the table as a whole and I'm going to define that I want my caption which by default goes at the top so this guy up here I'm going to automatically put that down at the bottom instead and to do that you have to go caption side and change it to bottom and you can see and if L football stats goes down at the bottom we could then come in and target quarterback stats bounce over here and look at it where's our table app you can see here is a table there's the caption there you are and the name of this is quarterback stats that's the table again so we could either target it as the table or using the class name doesn't really matter say that we want our width for this to be 600 pixels we could add a border to this all one pixels and let's make it solid and let's make it black if we want to eliminate any space between ourselves we could do border collapse and set that for collapse up change this to quarterback stats there you see our tables start to look a little bit nicer if we would want to come in and put a border around ourselves we could do quarter back stats target the rows and let's also target the headers stats th and then go border one pixel let's make it solid let's make it black again it's coming together looking a little bit nicer each time we make a little change here we could then style the table columns specifically so quarterback stats TD say we want to have the text alignment set for center because we think that'll look a little bit nicer and we could come in and do some padding as well say 0.3 e/m coming together looking a little bit nicer now let's come in and style our table headings specifically change our font way to bold so that they show up a little bit nicer change our padding to the same 0.3 mm let's give them a different background color a little bit darker color and let's change our text color to white so that it shows up nice boom coming together alright so let's go in here and change couple other different things let's say we want to alternate the colors on our table rows a very common thing people like to do we can just go TR and then go end child and let's say we want to do styling on the odds you could also put even inside there to get the absolute opposite results and then you just go background color and if you're wondering where I get these colors from well let's reload it so you can see that there you go it's looking pretty cool I just go wiki colors and if you go on here right this guy right here Wikipedia wiki list of colors a through F you're going to see a whole ton of different colors and this is where I get all those couplers from I've shown you guys this before but what the heck ought it show again another thing might be kind of neat is if we're trying to look at this table right here let's say we would like to really be able to focus in whenever we hover over certain rows we can also do that we're back stats and TR and we can specifically zoom in on hover and make changes only when it's hovered over and background color I need to figure out what you can do and what things you can change whenever you're hovering over different things it's a nice little touch you don't often see on most web sites and then we can also change the color of the text if we'd like and reload and now whenever we go over all these different rows we'll be able to really focus in and be able to read the information in the table a lot cooler and you can see this these two little lines of text right here and it adds a lot of functionality it's something you don't often see and it's really cool now let's go into actually styling forms and you can see here is a form right here and it's very very ugly so let's make it so that everything lines up a little bit nicer now this has the ID of custom form so let's target that and let's give it a width first off of 375 pixels we then target a div inside of it so custom form you can see over here what that is let's get out of this and here is our form right here and it has the ID of custom form so custom form and then inside of it it has a div okay so custom form div say we want to float this to the left side of our screen with 375 pixels add some padding to this guy so 0.5 e/m basically the same thing on the right let's add a little bit more padding though see it's starting to straighten up a little bit so let's add a little bit more of width to all of our labels so that they will all line up for themselves let's go to a custom form and target the labels which is the thing that's causing problems you can see here the labels are butting up right next to the input fields and you know kind of a mess let's fix that to a float:left on those and then define their width let's make it 100 pixels so that looks like boom now you can see they line up a little bit better let's also come in and specifically target the input fields custom form which we have a text area here and let's also go and target the inputs that are inside of the form and let's give all of those the same width of 250 pixels boom now everything lines up looks a lot neater got that submit button down there looking kind of ugly though so let's go and fix that as well so let's go custom submit let's float it to the right side of the screen with auto and then give it a margin right of 10 pixels see what that does reload boom there you can see it lines up all really nicely and looks a little bit nicer and looks a lot nicer than it did before another thing it's kind of neat is to be able to really highlight the different parts of the form whenever they are accepting input and how you can do that let's go to custom form input and use focus so anytime an input field has focus we're gonna change this background color their background color you can play around with this and pick a color that you think works best for you there we go just that one line of text and now whenever you focus we're gonna see the background colors ever so slightly changes so that's useful and then we could do exactly the same thing for the text area let's just come in here and we could just do this copy just to keep it simple and then focus reload and now you can see the color change there as well just a little touches a little touches here and there as this whole tutorial is basically about just a little tiny changes you can make that add a lot of functionality now let's say that we want to come in here and let's just imagine this is a store or something like that and we want to float a discount offer up here on the right side of our screen how might we go about doing that and we can see here come way down there it is div class discount is the name of the class and let's say we want to float 50% off with offer code Sherlock okay let's say we're selling Sherlock Holmes stuff here well to target that we're just going to get a discount change our background color here to a white so that shows up real nice and easy let's go and throw a border on it because things like that normally have a border and we'll say 4 pixels solid and let's make that black and we'll throw a little bit of a padding on that as well of 10 pixels and then let's have our font size which would make a lot of sense if it was 14 but we're using our little e/m trick that I showed you here first off so we're going to be able to go 1.4 am and now what we're going to want to do is since we want this to float up here on the top right hand side of the screen and the div is actually in any HTML way way far below what we're going to do is we're going to position this absolutely so whenever you do things absolutely the positioning is going to be based on the viewport the browser window itself and we're going to see that sometimes things like that can go horribly wrong but I'm going to show you how to fix that so we're going to go absolute and we're going to say a top zero pixels from the very top of the viewport and then we'll say right 55 pixels so 55 pixels from the right and reload it and you can see there's our offer code right there but you can see also that as it is moving around it's sort of looking terrible so let's fix that it's bouncing around a lot we don't want that we want it to stay more fixed well we can fix that really really easy by just targeting our wrapper and then set our position for the wrapper to be relative so that means whenever this is positioned absolutely this discount div that's inside of the wrapper it is going to be positioned absolutely relative to the wrapper that surrounds it reload it boom now you're going to see whenever we resize it it is not moving around it is going to stay exactly where it is so kind of cool they could also come in here now what you would never do this you would try to keep all of your different styling together but let's say I want to move that discount over a little bit so that it's positioned right on the very edge of the wrapper reload and now you can see it is its position right there and no matter how this is sized it's automatically going to stay exactly where it is you're probably wondering down here in this HTML what are all these puppy pictures and what am I going to do with them well what I'm going to do is I'm going to turn them into a gallery so the name of these puppy pictures or what surrounds them is gallery you can see right here UL class gallery and they're in an unordered list so I can target them by going ul gallery like this we of course want to eliminate all of our bullets and to do that we go list style and none our bullets are going if we don't want to allow our elements to have anything on the left or the right of our gallery so that we what I'm saying is we want this gallery to come down here so there's not going to be a forum on the left side of the screen we can just go clear and both and that will not allow anything on the left side or the right side of our gallery and you can say there see they automatically move down now what I'm going to do is target each one of my list items and I'm going to display them using inline block a lot of people get fused about what exactly does inline-block mean well basically we have different ways of categorizing elements inside of our page or inside of our document inline elements are going to be elements that are not followed by a new line and whenever you use inline elements one of the negatives is that you're unable to style the margins the padding the height width and so forth and so on so if we want to have our elements act like inline elements meaning there's not going to be a new line so that we can have our gallery items all lined up right after another however we also want to come in and be able to style the margins and padding's and Heights what we use is inline block we can then position them relative and what we're doing with this is we're going to set it up this way so that I can position the spans like eating stick and all these these guys are only going to show up if you float over your image so I'm going to be working with an element inside of my pictures which is just a span and I'm going to have them show up anytime I float overtop the image you'll see here in a second I'm gonna target you our gallery and specifically target my spans I'm going to give them a width of 250 pixels because that's the size of my image I'm going to give them a height of 35 pixels I'm going to have them align to the center of my image and then I want to specifically position the span on the gallery images so to do that go position:absolute so we use relative here so that these are positioned absolutely relative to the pictures okay so just like we did previously I'm going to have them show up position to absolutely insan those pictures zero pixels on the bottom and then start on the left zero pixels so it's going to completely cover the bottom of the image whenever we put our mouse over it you're going to see here in a second how I do that let's change our background color to black but give it an opacity of 75% so it looks kind of nice in the image shows through and then to finish off let's say we want our color to be white so that the little text shows up on the image really nice and then go ul galleries fan and have the default for our span whenever it's not being hovered on the margin left set for something extremely large like ten thousand pixels so that means this band by default is going to be off the screen and then what we can do is go ul Galerie and whenever the list items are hovered over we want to target our span that is there and move the margin left to zero and boom and everything lines up and you can see and have a little bit of a bug make sure that we spell everything right there is position and reload and now you can see whenever we put our mouse overtop of the image the little span pops up there and gives us more information on the image there's a whole bunch of different things we can do tricks with CSS now what I'm going to do is focus min on layouts and how to set up a two column layout as well as a three column layout okay so you see here I have a basic little bit of HTML and what I'm going to do is style this into a two column layout and show you how easy is to transfer it into a three column layout so I'm again going to come in here and target every single thing on the screen and I'm going to set my margin to zero on that and my padding to zero on that and very often you use something called normalize to normalize everything across the entire website and I normally do use that you can see a lot about that in my Suzy tutorial which is on my youtube channel let's come in here and first off start targeting the background color for our body now let's just make this gray again just to keep everything simple again we're going to change our font size for the body to 60 2.5% so that we can use EMS and make them make sense we could then target our wrapper which is going to wrap around every single element our web page and let's change that to 900 pixels let's change document wide our font size to 1.6 am let's have everything automatically center there that's how we do that and let's change the background color for this guy to white reload that and there you can see it's sort of kind of coming together first off what jumps out is the padding onto the paragraphs looks absolutely horrendous so let's change our padding change it to zero zero one e/m and zero again see how that works reload we have our unordered list down here which is going to eventually be in the sidebar let's target that ul and let's get our padding left on that change that to 20 pixels now let's mess around with our header section so we have cute but dangerous let's make that look a little bit nicer and let's jump over here and look at this alright so basically I have here's the regular head section you can see I'm going to use another google font here here's my link to my stylesheet right there and you can see here is the wrapper which surrounds everything here is the header which just has an h1 tag in it that says cute but dangerous so let's style that so header do a whole bunch of things here let's change text align let's have it automatically aligned to the right side of the screen let's target my background color on this and let's make it brown just to see what that looks like change our color for our text white so that shows up nice change padding across the entire things to e/m change our font family this is another Google phone I have it's called permanent marker or we'll use cursive by default and then finish everything off we'll add a text shadow which you saw previously and two pixels to the right two pixels vertically and the amount of blur that we want if we want to define a very specific color with our alpha let's just have this be zero zero zero which is going to be black and then we'll have it be 50% a couple little minor changes and you get pretty dramatic results okay so let's change this again let's focus in on the main part which is going to surround all of the article information so come over here see right here is main and then I have everything divided into sections for each one of these guys and there's going to be h2 tags there's gonna be a picture is going to be a couple paragraphs of information and then you can see there's another section there so main is going to surround all of the actual articles on our web page so let's do a couple little things here say padding and let's make this two e m and position:relative that means I'm going to be styling some things inside of here absolutely so let's save that now you can see it fits better inside of the screen there let's go and Targ our image and as you can see let's go here I gave everything a class in this situation so that I could specifically target the mean koala picture right here I gave it to class names so I have mean koala so I can target it specifically and then I have art image so I can target all of my art images so I'm going to target art image which is going to be both of those I'm going to float them to the left so that the text wraps around them and then I'm going to give them a margin of 10 pixels you can say everything's just snaps right together let's go with our h2 tags let's say that we want to add a little bit of a margin to those that and margin bottom let's go 10 pixels and let's also come in here target that HR tag and give it a little bit more of a margin on the bottom let's say 10 pixels actually let's make this one e/m so that looks reload now you can see they're divided up a little bit better actually for the HR tag I'm just going to target all the margins so it's reload there it looks a little bit nicer now I'm going to target my vertical navigation box over in the HTML here again vertical navigations down here it is an unordered list that is in an aside and this guy is going to go in my sidebar on the left side or on the right side of the screen so let's target that vertical nav first let's go and get list-style-type set that to none so that doesn't have any of those ugly bullets on there and let's change our padding to zero pixels on all those if we want to target the individual list items now and go vertical nav li and i'm going to want to display them block in this situation because i want them to be on separate lines and i also want to be able to style them by messing with the borders and so forth and bottom border bottom and i want to put one pixel dotted and let's make that brown reload and there you can see they are down there I want to put them over here on the right side of the screen however and as you can remember they are on or inside of an aside so let's say I want to make that 250 pixels wide you can go with 250 pixels I want to float it to the right side of the screen so that I have two bars and let's go and give it a background color of a light brown and something else that's kind of cool is very often it looks really nice whenever well let's just do this file save reload there you can see it's down there on the right side of the screen let's go in here to the main section and the reason why it's on the right side of the screen is because we have a main section we want to have that be float:left and let's give it a width of say 550 pixels and of course you're going to have to measure this out sale that works boom and there you can see is our side bar up there and here is the main section right there and the white went away but we're going to fix that in a second another thing one is zero and on here is how exactly can we get the side bar to stretch the whole way down to the bottom of the screen even though there's no content here well there's a little trick we can do with our side we can go padding-bottom and then pick an astronomical number that you know you won't go by so 5,000 pixels for example and then what we do is we go margin bottom instead of the padding bottom like that and set it to negative 5,000 pixels has to be the same exact amount and now you can see it stretches down there out even though there is no content down there so it's a neat little trick we're then going to clean up everything here with our footer as well and also we're going to want to hide any of the sidebar see it automatically goes down here and goes 5,000 pixels so if we want to hide that what we have to do is get an element that surrounds everything and in this situation wrapper surrounds everything and go overflow:hidden so that will give us a full length sidebar no matter how big the content area is here but it's also going to hide any extra space reload and there you can see the white came back and the sidebar is exactly the same height as your main content area and then finally we want to go in here to our footer section which is just a bar we want to make sure that nothing no elements go on the right or the left side of it we just go clear both and background color just so it stands out a little bit better let's just change that to brown just for simplicity reasons and we can define or height for this to 100 pixels and our width to 900 pixels which is exactly the same as the header and margin is going to be 0 and so that it does exactly the same things as our header and there's our footer so that is how we go and create a two-column website how hard is it to change this into a three-column website well it's actually going to be pretty simple I'm going to go into my HTML section and I'm going to come right here right after the header and if I want something to go on the left side of screen so I'm gonna have a left sidebar and a right sidebar gonna come in here I'm going to create a div and we call it left nav unordered list just like before I'm just going to use the same exact thing here just for the heck of it just to keep it simple and I'm going to save that I'm going to jump over into my CSS file and just keep on adding some styling to this so I just need to allow for space so that everything is going to fit in I'm going to target the left nav which is the HTML that I just threw inside of there I'm going to define its width as 200 pixels so it's going to fit there on our screen I'm gonna float it to the left side of the screen because it's gonna be my left sidebar let's go and give it the same background as well as list style and padding as this guy right here so background color and I want this and I want the padding so that it goes the whole way down the screen so let's just go in there paste that in and let's also say that I want to now let's go and also target the list-style-type let's try it change that to none so that we don't have any bullets and then let's go and give it a padding of 0 but we want to do that before we go and mess around with a padding bottom right there reload and there you can see it shows up but our other sidebar goes down the right side of screen because we didn't allow for enough space for that so we're going to target left nav unordered list and give it a padding of 0 pixels then target each of the individual list items left nav li again we're going to display those as blocks so that once again we'll be able to use borders and so forth on them we're going to need to do a border bottom exactly the same as we did before one pixel dotted and brown and then we'll add some custom padding to these so 0.5 em0 on the right side 0 right side padding 0.5 e/m that's the bottom padding 0.5 p.m. for the left patting we're then going to have to target the main section and shrink it down so we have room for our left and right to sidebar so let's just try something simple like a width of 400 pixels and then target the aside and give it a width of 200 pixels just like we did with the left sidebar and there you can see everything lines up really nice at this rate sidebar is going mess with that a little bit too so let's just copy this so that it looks the same as the other one come in here paste that in there that's not the one I want to target let's get rid of that try that one boom there you go that is how easy it is to do a two column as well as a three column layout in CSS and in the next tutorial I'm going to show you how to create responsive website designs so please leave requests and comments below otherwise till next time

Channel: Derek Banas

Views: 180,206

Keywords: CSS Tricks, Cascading Style Sheets (Programming Language), CSS Problems, css, Web Design (Interest)

Id: mqLI2oN6rXQ

Length: 37min 37sec (2257 seconds)

Published: Mon May 11 2015