CSS Crash Course For Absolute Beginners

[Music] hey what's going on guys welcome to my CSS crash course for absolute beginners this is a continuation of my HTML crash course in this video I'm going to try and cram as much information about CSS that I can starting from scratch and you don't need to have any experience at all whatsoever with CSS to follow along alright so a few things before we get started I want to stress that this guide is for beginners and people that don't really know anything about CSS it's a continuation of my HTML crash course on YouTube so unless you know HTML pretty well I would suggest going back and watching that video first and the link is in the description alright now it's important to know that when it comes to CSS it's much more free than HTML meaning that there's there's many ways to do the same thing in HTML you have specific tags that you use to create a document while CSS is used for design and layout so it's much more artistic many advanced web developers still struggle with CSS because it's much more right-brain however when you're following along with this guide you'll notice that we're just we're going to be looking at the CSS syntax not so much creative and artistic abilities or styling trends and stuff like that alright so hopefully that makes sense also we're not going to be covering more advanced topics like flexbox and animation flex boxes of css3 layout mode and it does things like align elements very easily but I think it's too advanced for this video plus I do have a video called flexbox in 20 minutes that teaches you all about it so if you want to learn more about flex i'd suggest watching that after this all right and I will be doing an advanced css3 video very soon and that will include things like animations and transitions you know all the pseudo elements things like that alright so we can't cover everything in this guide this is a crash course but I will be covering the most essential and useful parts of CSS alright so let's talk a little bit about what CSS actually is it stands for cascading style sheets and like HTML it's not a programming language it's actually a style sheet or a styling language it's used for website layout and design and it's used alongside of HTML now it can also be used with other mock-ups like XHTML XML SVG but it's most commonly used with HTML now by default CSS doesn't have any logic like a programming language does it's strictly presentational however there are technology such as sass and less that do allow you to extend the functionality of CSS and allows you to use things like variables and conditionals but that's way beyond this course oh just dude I did want to let you know that that that is an actual thing all right I do have videos on sass and less on my channel if you're interested so all you need to get started just like when in the HTML crash course we just need a text editor and a browser we'll be using Google Chrome as our browser and sublime text as the editor I went through the installation of sublime text back in the HTML crash course so I'm not going to do that again you can use sublime or you can use something else atom in visual studio code are fantastic editors but I do think they're overkill for this this particular video alright notepad plus plus and text mate are also some very simple and very light solutions alright guys so we're going to go ahead and get started let's create a new folder I'm going to put it on my desktop and we're just going to call this CSS crash course alright now there's going to be two two things that we're going to do first we're going to build like a cheat sheet like we did with the HTML crash course where it's not really put together site or anything like that it's just a way for us to learn it's a way for us to add classes and IDs and then go through all the specific styling rules and stuff of CSS and then after that we're going to actually lay out an actual I wouldn't really call it a website but I guess a website homepage where we use html5 semantic tags and I show you how to float things and and just create a basic basic web page all right so let's go ahead and create a new folder in here and I'm going to call this CSS cheat sheet all right and that's what we're going to be working with first but then I'm also going to create a folder called my website and that's what we'll be working with after so for now we're going to work in the cheat sheet so let's go in there let's create our index.html file alright and then what I'm going to do is I'm going to open this up in sublime text I'm actually going to open up sublime and then I'm going to go to file open folder and we're going to go to or is it the desktop CSS crash course I'm going to open that up and then you can see I have both folders over here okay so we're kind of treating these both as different projects so we're starting in the CSS cheat sheet so let's open up the index.html and with sublime we can say HTML tab and that's going to give us a basic structure and I went over all this in the HTML crash course so if you don't understand what this is please go back and watch that video so for the title let's just say CSS cheat sheet alright and before we write anything I just want to go over the different types or the different methods of using CSS so there's three main ways of adding CSS to an HTML file there's inline internal and external I'm going to show you the an example of all three but let's talk about the difference first so inline CSS means that you're adding a style attribute to the actual HTML tag just like you would any other attribute like title or href this is not what you want to do it's it's horrible practice and you'll never see a professional web developer do this one of the key rules to follow as a developer or a programmer with any language is to keep the presentation the functionality and the styling completely separate or as much as possible using inline CSS is mixing that presentation with styling and it's not efficient it's not scalable and it's just not practical inline CSS refers to using style tags within the head of your HTML page we did do a little bit of this in the HTML crash course at the end and this is a hell of a lot better than using inline CSS because it does separate the style from presentation but it's still not too suggested method this makes it so that the CSS that you're writing can only be used in that particular HTML file all right it also fattens up the HTML file and you want to keep it as slim as possible with just HTML the third option is the best and the most used and that's to use an external CSS style sheet you can create a separate file with a dot CSS extension and then you can simply link that file to whatever HTML file you want whatever you want to use that CSS with all right so we're going to be using the external method and that is for the most part suggested all the time alright guys so let's go ahead and open up our index file on our browser alright so we have our CSS cheat sheet I'm just going to open index.html which is going to be completely blank actually the title did I not save this now I didn't save that so if I reload now you'll see if CSS cheat sheet in the title if I do a ctrl you you'll see the source code which just matches what we have over here all right so let's go ahead and look at the different ways to implement CSS so I'm going to put an h1 in here and we're just going to say hello world all right so it was simple h1 if I save and reload it's going to show up on the screen now let's say I want to just change the color of this okay now the first way that I'm going to demonstrate is inline CSS so that is by using a style attribute and then doing the actual CSS which will say color read and save okay now that does work but this is a horrible horrible way of implementing this okay because we're mixing the presentation which is just the h1 and the text with the styling or with the CSS which is this color red and we don't want that we want to keep these separate alright so that's the first way and we don't want to use that way now to to not use inline styling we need to we need a way to grab onto this and we can actually use the element itself a lot of times we'll be using IDs and classes to grab on to an element but you can just use the actual HTML tag so let's take a look at the second way which is internal so for that we would put style tags up in the head area okay you want to put these in the head and then inside there we can put our CSS so for instance that we want to grab the h1 we can use that out of the selector and then some curly braces and then we can say color red okay if I sit actually let's make it blue just so you can see that it definitely is coming from here so if I reload now we get blue alright and like I said this does separate per you know presentation from style but you can only use these styles within this file okay you may want to use these in other HTML files as well so that brings us to the third method which is external so what I'm going to do is go into our CSS cheat sheet folder and create a new folder called CSS and then this is where we would put our style sheets okay so let's create a new file and we'll call this style dot CSS we gotta save it ctrl s style dot CSS okay now you don't have to call it style you can call it whatever you want just make sure it has a dot CSS extension alright and then what we'll do is we'll say h1 just like we did in style tags in the HTML and we'll say color green alright and then we'll save that now obviously that's not going to work right now because it doesn't know to even look at this style sheet so what we're going to do is get rid of the style tags here and we're going to use an HTML tag called link okay so we're going to say link in sublime text we can just type the word link and hit tab and that's going to give us the tag along with some attributes so it has this rel attribute which is telling it that this is a style sheet we also have a type which is saying that this is going to be CSS and then the href is going to link to the CSS file so in here we want to say CSS slash style dot CSS and the reason I put this CSS slash is what is because it's located in the CSS folder right here so you have to specify the entire location all right so let's save that reload and now you'll see that it's green it's actually looking at this style.css file all right so that's the recommended way to do it and if we wanted to use these styles in another HTML file all we have to do is put this in there so let's look at a quick diagram of a CSS selector and a declaration so this is a basic format so we have the selector here in this case we're saying a so an 8 and a tag is a link okay we learn that in the HTML crash course now you can use the actual element like this but what this is going to do is it's going to apply this style to all links everywhere if you wanted to target a certain link you could use a class or an ID okay we'll get into that a little bit and then to start the declaration we have an opening curly brace to end it we have a closing curly brace and then inside there we have a property and a value okay so like a key value pair the property is going to be in this case background color and we're going to go over a ton of different properties that are available in CSS now just to separate these we have our our colon here and then we have the value in this case we're saying the background color should be yellow and then you always want to end these with a semicolon all right so we're going to jump in and start to create such styles here now I'm going to go to the CSS file and get rid of the h1 styling here okay and then I'm just going to say body and then open up some curly braces all right so we have our selected here which is body this is going to pertain to the body tag and everything in it okay well I shouldn't say everything and it's not going to actually change like the background color of every element but the body itself which wraps around everything so let's add a background color and I'm going to change this to a value which is going to be a hexadecimal color and I'm going to go over this in a second but it's going to be number sign f4 three times so if we save this and we reload notice that the background first of all the green text went away because we got rid of that style but the background of the body is now light gray okay this is a hexadecimal value for light gray now if we want to change the color of the text we can use the color okay so let's say we want color to be the hexadecimal value of six 5s and that's going to be a dark gray now if I reload notice that the h1 actually changed to a lighter gray so any text we put in by default this can is now going to be this color so just a little bit about colors in CSS now we can use different values here so we can use color names we can use html5 color names hexadecimal values and our RGB our red green blue values so with this example here we're using color names so color red because blue yellow very you know common colors and then html5 added some extra colors here okay so for instance coral which is like a light orange and there's a lot of them there's misty Rose there's all types of weird colors that you can look up all right now hexadecimal values look like this we have the number sign and then you have a code which pertains to that specific color okay six zeros is going to be black and six FS is going to be white you can also use shortcuts and use three about three characters as well for some of these and I'll show you that in a little bit and then we can also use RGB values so we use RGB and then some parentheses and then the value of red green and blue okay so here we have blue at 255 which is going to make this color a certain shade of blue all right so back to our HTML and CSS now what I'm going to do is under the h1 I just want to put in a paragraph and in sublime we can type in the word larom and tab and it'll give us a bunch of sample text all right we'll reload that just so we have some something else to look at so for the body I'm also going to add I'm going to change the font so let's say font family and I'm going to say Arial and then if for some reason Arial can't load it's going to load what we put here let's say Helvetica and then we're going to do sans-serif all right so let's save that and reload and notice that the font has now changed now in CSS you have web safe fonts and then you have other fonts which you can use now web safe fonts means that you don't need to improve or any kind of special font you can just use it just like we did here all right if you want to use some kind of specialty font from let's say Google Fonts you'd have to bring that in like you would a stylesheet and then apply it all right so let's take a look at some of the web safe fonts so here's an example of the different font families that we can use and we don't have to import any kind of special font files or anything so this is what we use the arial helvetica sans-serif we also have Arial black Bookman old style cause Comic Sans courier which is kind of like a Microsoft Word type font let's see what else Georgia verdana is pretty nice I like for Dan I like to Homa Times New Roman which is the default if you don't apply a font that's what the default will be in most browsers and it's pretty much it so these are the web safe fonts and when we talk about serif fonts you can see that the serif fonts have the little little hooks on the end here of the letters and then sans serif is kind of a flat look all right so that's the basic difference between those I'm not an expert on fonts or anything like that but I just wanted to give you guys an idea of what's considered a web safe font all right so let's get back to our CSS I'm just going to make this wrap so that you guys can see everything we'll just do word wrap and let's go ahead and add a change the size of the font so for that we can simply just say font size and we'll set that to 16 pixels and if we save and reload it's going to look the same because that was actually the default but if I wanted to change this to let's say 12 pixels reload you'll see it gets much smaller all right now we can also change the font weight from here so if we say font weight we can set that to bold and reload and it'll make everything bold you can also use numbers like 400 you can change the the boldness with the number as well but we're going to we're going to keep this at normal okay by default now there's actually a shorter way to do this when you're dealing with these font dash styles here we can actually just use font and then we could say normal for the font weight and then we could do the font family which would be arial helvetica sans-serif and then we can just put the font actually let's put the size here so 16 pixels all right and then if I get rid of these three and reload we get the same thing okay so it's just a shorter way of doing it let me just put a little comment here and I'm just going to say same as above all right and you know I'm leaving all this stuff here so you guys have this as a reference normally you wouldn't have both of these but I want you guys to have this if you need it later on okay another common style you'll see within the body is the line height okay now notice that these to me these these lines look pretty close together so I'd want to kind of separate them just a little bit so what I'm going to do here is say one point six M or e m and let's save that reload and now notice that there's this more space in between the lines all right that's what line height does now EMR m is just a unit to use in in CSS it's usually used for more responsive type websites you could just make this pixels as well so if we wanted to say three pixels for the line height you'll see that there's only three pixels in between which makes it unreadable but you can do that but we're going to stick to M usually you'll see M for line Heights alright so what I'm going to do now is just add a little bit of HTML over here some more HTML so let's go actually know what we'll do is we'll wrap the h1 and the paragraph in a div and let's give that a class we'll give that a class of let's say box - one okay so wrap the paragraph and the heading okay we'll push that over a little bit I don't like house yeah I'm just going to make this a little bigger so let's talk a little bit about the difference between class and ID now as far as the browser goes and enforcing rules ID in class really there's no difference when it comes to HTML and CSS but what you want to do is you want to think of IDs as elements that are IDs that aren't going to be put anywhere else they're going to be unique so for instance if you have a main nav bar you might give that an idea of main nav bar because you're not going to be using that main nav for our ID on any other element but if you're using something like let's say class box one where we're going to give this a background color and a border and stuff you may use this box 1 somewhere else because you may want to apply that style so it's not unique so you would use a class if you if you had a class that made text red or something like that you would want to use a class because you may use that somewhere else so just remember that IDs should always be unique classes you can reuse classes all right and if you don't want to follow that standard I would suggest just always using classes you'll notice that with frameworks like bootstrap they don't use IDs for anything it's all classes you just don't want to repeat IDs that's that's the bottom line all right so we have this div with the class of box 1 so let's go ahead and save this and then we'll go into our styling and let's just make this smaller so to target a class we use a dot so remember we called it box 1 so we're going to say dot box 1 all right now what I'm going to do here is I'm just going to add a background color first of all so let's say background - color and let's set it to like like almost black a dark gray which is going to be three six times now this is one of those colors where we can use a shortcut okay we can actually use just three threes and it'll give us the same color all right so let's save that and reload and notice that the background is now a dark gray well one thing I also wanted to do was on the body I want to zero out the margin and I'm going to go over margin later on so don't worry about that but I'm just going to set margin to zero and that'll get rid of these spaces around it okay except for the top because headings actually have margin by default all right so we have this box one with a background color of dark gray almost black so we want to change the text color because it's almost unreadable so we're going to say color and let's set that to white now we could do the text white but I prefer to use hexadecimal so I'm going to say number sign and then three FS okay or six FS whatever you want reload and now the text is white now I would like to push everything in from the edges and you'll see this a lot usually with websites the content will be pushed in it's not going to go all the way up to the edge so what we can do is create a class I'm just going to put it right here and let's call it container if you've ever used bootstrap or other frameworks you just probably seen this quite a bit and we can set this to a width okay so for right now I'm just going to say 500 pixels all right and then let's go ahead and save that and then let's apply that container so let's wrap it around the box actually I'm going to have this Raptor out everything okay so we'll go down here and put the ending div tag let's tab it over all right so if we save that and reload you'll see that it's now 500 pixels wide now with containers like I said you want to usually want to push it to the middle so to do that we're going to just say margin and we're going to set it to auto and what this does is it sets margin it sets an auto margin on all sides okay it's going to set it to the same on all sides so let's save that reload and it gets pushed over it puts an even amount of margin on this side and this side and margin is basically spacing around an element now setting it to 500 pixels actually you probably wouldn't see 500 you might see like 960 is a popular width for a website okay something like that but this makes it so it's not responsive if I make it smaller you can see that it's not responsive it's not adapting correctly so what we would do is set it to a percentage instead of pixels so I'm going to set it to 80% okay and then reload and then as I make it smaller you'll see that it actually responds correctly to size so you for the most part you want to use percents when you're dealing with something with containers or something like that all right so now let's talk about margin and padding so a lot of people get confused at first with margin and padding because both of them pertain to space around an element so I'm going to try to explain that the best I can so there's something called the box model in CSS and think of this content block ads whatever your element is whether it's a div or an a tag link or a paragraph a heading anything at all and padding is going to be the space in between that element and its border okay it's edge so that padding you can set the top to the right the bottom or the left padding to whatever you want okay and it'll add that space now the border has to do with the border property and you're not always going to be using this but you can set the border width you can set that to the width and you can do top right bottom left and then margin is going to be the spacing outside of that border okay so just remember padding is the space inside margin is the space outside now when we're applying styles to or when we're applying padding and margin there's different ways to do it okay there's there's the long way and is the short way now in this example we're using margin for this paragraph so we're saying we want the margin top to be 5 pixels the margin bottom 5 the margin right to be 10 and the margin left to be 10 so if we look at our box model here it is the top and bottom margin that we want to be 5 so it would be this in this and then the left and right would be 10 okay now over here we have this same thing in a shorter syntax so instead of doing margin top margin bottom and so on we can just say margin and then we can do top top right bottom left okay that's that's what you need to remember top right bottom left and you'll see top five whoops top five right ten bottom five left ten all right now to take it step even from do you know to make it even shorter if the top and bottom are the same and the right and left are the same okay such as in this case top and bottom or five left and right ten we can do this and we can say five for the top and bottom ten for the left and right okay so that's a short of syntax and then of course if they're all equal you can just do margin five pixels and that'll add five pixels around the entire thing and you can use this same format with padding you can do padding top padding bottom and then same thing over here you can just use padding all right so what I'm going to do now is I'm going to add a border to this just so we can see the difference between padding and margin more clearly so for box one here let's go ahead and let's say border right okay and we're going to set that to five pixels red okay so with size color and then type or style which I'll say solid so let's go ahead and save that and reload and you'll see that on the right we have a five pixel red solid border all right now if we wanted to add borders on other sides let's say we wanted to do left okay so if I save that it's going to add it on the right and left and of course we could do top and bottom all right and that's just going to give it a five pixel border around the whole entire thing now just like with margin and padding there's their short hands you don't have to do all this if you want them all to be the same okay so what we could do is we could just say border and then we could say five pixels red solid okay and then if we got rid of all of this and saved it reload we get the same thing so this is what you would want to do instead of this but I'm going to keep it there again just you guys have it and say same as above all right now you can also target specific border properties like the size the color and the style so let's say for instance we wanted to change the width we could say border - width and set it to 3 pixels and if we reload that's going to set all sides to 3 pixels if we wanted to let's say just target the width of the bottom bottom bottom border bottom we could say border bottom width and let's just set that to 10 pixels okay so we can target it like that we can also do styles so if we want to say like border let's do border top style and we'll set that to dotted so if I reload now you see the top border is dotted and I believe there's there solid dotted dashed double I think there may be a couple others so if you want to look that up you can but for the most part we at least for me I usually use solid alright now I want to keep this very simple and I just want to have this so I'm going to put that right there and that should overwrite everything okay but again I am going to leave all this just so you guys have it so now let's look at padding okay so in here let's say padding I will say padding top and we'll set that to 20 pixels reload and you'll see that it adds it to the top now there was initially some padding here because an h1 by default has padding now if you wanted to you could you could zero out the margin and padding for everything on the page and let me show you how to do that so if we go up to the very top here and we put an asterisk this is basically saying so every element every style and we will set this to margin:0 padding:0 and that'll that'll zero everything out that's called a reset okay so if we reload now the h1 and the paragraph you'll see they don't have any margin or padding by default so you may want to add a reset if you want to just zero everything out and go from there without any confusion of having you know initial padding and margin on certain elements so it's completely up to you if you want to do that but I'm actually just going to comment this out so it doesn't take effect all right so we have some padding on the top but what I want to do is add padding all around so what I could do is we could do it the long way so we could say bottom right left okay we could do that but you don't want to do that especially if it's going to be 20 pixels or no matter what size on any side you just want to use padding okay so we'll say padding 20 pixels and let me just put a comment here and I'm just going to say same as above all right now margin on the other hand is going to be the space outside of the border all right so let's say we want to add margin top and we'll say 20 pixels what that should do is move the entire thing down because it's going to add space above it okay and again we can do this with margin or we could just say margin 20 pixels and that's going to put it all the way around okay you'll see that it actually got skinnier because it added 20 pixels here but let's say we just wanted the margin on the top and bottom we could do 20 pixels and then zero for the right and left all right reload and there we go all right so now I want to move on to some text formatting styles so what I'm going to do is I'm going to target the box one h1 okay so this is saying that I want to style any h1 that is within this class okay it's not going to style any h1 that's not in this class so let's start with let's just change the font family okay so we don't have to have one font family for the whole site let's say we want to use two Homa reload and I see that this is now a Houma font let's say we want to change the font weight to 800 and let's say we want it to be italic we could say font style set that to italic and if we reload there we go so if font weight font style we have text decoration which we could do a underline if we wanted to okay that gives it an underline if we wanted to change it to all uppercase we could use the text transform and say uppercase ok reload now it's all uppercase let's see what else letter spacing so if we want to put space between the letter this would usually be with the M unit so let's say 0.2 m and now reload and now you see this space between each letter and then we also have word spacing say word spacing and we'll say 1 M reload and you see that now there's more space between each word so these are just some text formatting styles alright let's go ahead and put another box on the page just to add some more HTML so I'm going to copy box 1 and we'll change this to box - and that's fine we'll leave the same text I guess where you load actually change the heading we'll say goodbye world alright now notice that we don't have any styling because we're now using a box to class not box 1 if we if we change this to box 1 of course it's going to apply those styles but let's change it to box two and then in the CSS will just say box two and let's see I don't want to add a bunch of crazy styles let's just give it a border and let's say we want three three pixels and we'll do dotted and let's do like a light gray reload okay so now I have a border let's add padding 20 pixels and let's say margin let's do 20 pixels top and bottom zero left and right okay so to add some padding and also added margin on the top and bottom so next thing I'm going to do is let's add let's out of some a list I tie unordered list alright so let's go back to our HTML I'll go under box two and let's put a div we'll give this will give it a class of let's say categories and let's put an h2 will say categories and let's put a UL with some allies okay each li will have an a tag which will just go nowhere I'll say category one I'm just going to like that we'll see category one two three and four alright so now we have a simple list this is what it will look like by default with no CSS so now let's go over to our style dot CSS file and let's apply some styles to categories remember categories is actually the div that surrounds this it's not the actual list itself okay and that's what I mean with CSS you can do you can do the same thing a million different ways we could have put the class on the actual UL but you know you'll find your your way of doing things so it's just give it a border of one pixel one pixel like gray solid and then we'll just give it a give some padding of 10 pixels all the way around okay it's going to just go around the whole thing there's also a border-radius property that we could use and that's that can give it rounded corners so let's say 15 pixels and reload and now notice that this box has curved edges all right oh let's see what else text a line so that's something you might use a lot so let's say categories are categories and I think it was within an h1 we gave it an h2 so let's say we want the h2 to be aligned to the center so we'll say text-align:center reload and now you'll see it's in the middle all right let's apply some styles to the UL and the end the Li tags so we'll say categories UL now ul is by default have some padding you see they pushed over I think it's like 40 pixels so let's actually zero that out by saying padding:0 okay if we reload and you'll see that it gets rid of that you can also change the bullet points if you want by using list style so if we say list style square and reload now there's still squares you can also completely get rid of them by saying list-style:none okay reload and now it doesn't have any all right now before we get to the styling the Li tags let's talk a little bit about links because links actually have different states now I could say categories a - just just target the links in that in the categories but I'm actually going to go up top here and apply a global styles to the link so just a so this will apply to any link on the page so let's start by getting rid of the underlined so we'll say text-decoration:none okay that's going to get rid of that annoying underlined and you probably want to change the color because the default blue is really ugly so let's change it to black okay so now you can see the links are black now as I said they have different states so they have a hover State so we can say a : hover and let's say we want to change the color to red when they're hovered so reload now when I hover over each link it turns red there's also an active State and active make it green active is just when you click on it it just flashes real quick you see how it turns green for a second when I click on it that that's meaning it's active all right we also have a visited state so if we say a visited and let's say color yellow okay now if I reload they're all going to turn yellow because we did visit all of these but if we were to add another one say category five and save reload I guess that's oh you know what let's let's make a go somewhere else will say test HTML okay so now it's black because it goes by the actual location but if I click on that obviously that goes nowhere because it's a blank page but if we go back and reload well I guess it doesn't work because it's not an actual page hmm so I guess I mean if we created a test dot HTML that that should turn yellow I honestly haven't can't remember the last time I use visited but just so you guys know you can do that alright so let's go back down to our categories and let's let's get rid of that style actually I don't want the visited to be yellow so let's make it black all right so now let's say categories allies and for the Li let's add a little bit of padding to the bottom so we'll say 8 pixels and let's actually add a border to the bottom we'll say dotted one pixel and we say three three three four the color will reload and now it looks something like that alright let's actually do not heat pixels we'll do six all right now for the bullet points you can do this list style you can do it on either the UL or the Li and then we also have this list style image okay and you can actually set this to an image like you would set a background image which I'll get into later so let's say URL and we'll say slash images slash check dot PNG alright and what I'm going to do is grab an image let's say checkmark images and let's grab this check mark right here and we're just going to save it as check PNG and we're going to save it in our desktop CSS crash course CSS cheat sheet and I'm going to create a folder called images okay and then in there we'll save it and then let's go to our site and reload and notice that it uses the actual size of the image so I'm going to make that smaller okay and you can do that however you want I'm just going to open it with Photoshop let's see is this the right folder desktop alright so I'm just going to open this real quick and you like I said you can resize it however you want I'm just giving you an example of what I do to resize images so I'm just going to go to the image size change it to 10 pixels and then I'm just going to resave it as a PNG file save so now so now it should be 10 pixels so let's reload and now you can see we have the little checks next to our categories alright and you may want to push this over a little bit if you're going to use bullet points because we set the padding to zero let's say we just want to say padding-left 20 pixels and that'll push it over all right guys so we're starting to run out of time I still want to get to the layout page so this may be a little longer than an hour but let's move on to forms okay because forms are very ugly by default and we want to stay within the container which ends right here I'm actually going to put a comment here oops just letting us know that this is where the container ends because we want to stay within it all right so let's go ahead and put in a form and I'm actually going to just paste all the fields in I just make this bigger so basically what I did just tab this back basically what I did is I created a couple fields and I wrapped them in a div with the class of form group okay if you've used bootstrap before this is actually the class they use and then we have the label and we have the input so we have a name email and then a text area which is a message and then a simple submit button all right so let's save that see what it looks like by default okay so it looks pretty damn ugly now you know I don't want you guys to have to look at the very bottom of the screen so let me just really quickly I'm going to put a div in here and just give it an inline style of margin top 500 pixels just to push everything down or push everything up all right so let's go ahead and start to make this form look a little better so we're going to go to our style CSS actually let's give the form a class so we'll say class my form alright and then in here we're going to target my form and first of all I'm just going to add some padding we'll see 20 pixels that'll be around the entire form okay and then let's let's separate the the form group a little bit each field so remember we gave it a class of form group so we're just going to add some padding bottom of 15 pixels and I'll separate it a little bit now for the label labels are in line that's why they're on the same level same level of the input gay inputs and labels are in line I want this to be on a separate line without having to put an actual line break in so what I'm going to do is I'm going to set the label actually know what we should be putting my form before all of these like that I will say my form label and then I'm going to display that even though it's in line we can set it to be a block okay and remember block level elements they'll they'll put it on a new line and they go across the entire blinds so if we save now you see that labels are on their own line now let's make these text inputs look a little better so we'll say my form input and let's add some padding to make them look a little thicker so we'll say 8 pixels and then let's also set the width to be a hundred percent of its container so reload now a couple things here notice that since we said just input that's going to pertain to any input even the button which is also an input if we had let's say a radio button it would pertain to that as well and it didn't target this because this is actually a text area it's not an input tag now what we could do is we can target certain types of inputs so these are both texts right so what we can do is put a set of brackets here and we can say type equals text and then what that's going to do when I reload it should disregard the button because that's not the type of text okay see what I'm saying and then the text area we also want to add those styles too so I'm just going to put a comma here and we're just going to say dot my form text area where you load and then it applies it to that as well now let's add a little bit of styling to the button here so what I could do is I could say my form input and then we could say lips like it's a type equals submit okay we can do that and let's give it a background color of dark gray we'll make the color white let's say padding on the top and bottom will do 15 now we'll do 10 pixels and left and right 15 and then let's say border none' okay let's reload and now we get this button now this is fine but what I what I want to do is I want to have a class called button that we can apply to any button and get this style so instead of doing this right here what I'm going to do is just change this to dot button and since this is just global not part of just the form I'm going to just put it up here instead so let's go like under the container and then what I would do is apply that class to this input okay well actually I already did I already did do it so that should still work all right now if I wanted to put a button somewhere else like let's say in box 2 or not even just a button it could be a link so we'll just put a link we'll say read more if we just leave it like that of course it's going to just look like that but if we put class button now we get that okay and actually sent it to link we want that color to be white so let's go back to button let's see color you know what it's getting this is mixing it up the visited color so let's just let's actually get rid of that right there there we go all right cool so we can apply that class anywhere and if we wanted to put a hover State for the button we could do that as well so if we say button hover and let's say background red color white and now we have that color that hover effect all right hopefully that isn't too confusing so that's our form very simple now what I want to do is talk about alignment and floating okay so let's go back to our HTML we'll go under the form and what I'm going to do here is I'm going to put in three blocks okay so it's a give and let's give this a class of block and inside these blocks will have an h3 will just say heading and then we'll have a paragraph with some dummy text I'm just going to make it a little shorter let's go like right there look and we're going to have three of these so let's copy this whole div with the class of block paste it in two more times and reload so normal flow we're just going to have them on top of each other but let's say we wanted to float them to go to the side all right we want them to go horizontally so let's go to our CSS remember they all have a class of block so we're going to say we want these to float to the raw exits they float left and we're going to set a width now since there's three of them I'm going to set the width to 33.3% all right and then let's just add like actually let's just do that for now let's see what that does alright so reload and now we have our three blocks now if I wanted to let's say put a border we'll say one pixel solid C and let's put in padding 10 pixels and let's reload now that's going to mess everything up because what it's doing is it's taking this width which which just barely fits everything in and then it's adding 10 pixels padding it's adding a pixel of border which makes it too big to put all on the same line so the easy fix for this is to add a property called box sizing whoops not box shadow box sizing and we set this to the value of border box so if we save that and reload now notice we they're all back on the same line because what this does is it makes it so that it takes in padding and border and it takes this stuff in and applies it into the width itself so that it's not adding it to it making it too big or too wide alright so just to let you know now when you get into flex box flex box takes care of this stuff really nicely and you can do a lot more but like I said that's too advanced for this video for this tutorial you might want to check out the flex box in 20 minutes video that I did alright so what about floating elements that aren't all the same width like this let's go ahead and do like like a main area and a sidebar so we'll go below those three blocks now when you float stuff you're going to want to clear it because that your next your next mark up is going to be all messed up it's going to be like up here so what we do is we create a div let's give it a class of CLR you might also see clear fix sometimes I like to use CLR and then I'm going to put this at the top because this is kind of a global class so we'll go like right here and say dot CLR and we just want to add clear folks and that's going to clear any floats above it okay and then what we'll do is create a give this time I'm going to give it an ID so I'll give it an idea of main block all right and then let's also do a div with an ID of sidebar okay so in the main block let's just grab this h3 in this paragraph and then sidebar we'll just just have the paragraph so by default obviously these are going to be on top of each other but let's say we want the heading to be kind of the main area and take up like this much space and then the sidebar over here so what we would do is go to our CSS and remember their ID so we want to use a number sign and let's say main block okay main block and we're going to float that to the left and then I'm going to set a width of 70% okay because I want this to be kind of responsive all right and then let's copy that and then for this will say sidebar that's what I called it right sidebar and we want that to flow to the right and we want that to be 30% all right so let's go ahead and save that reload and there we go now for the sidebar I'm also going to add actually add a background color of dark gray color white oops color white and let's add padding 15 pixels and save okay now again it's not it's going to go on down here doesn't look right so what we need to do is just add in our border I'm sorry our box-sizing of border box okay and we're going to also add some padding in the border box on our main block okay so now we'll reload and there we go so now it's it's loaded correctly all right so we are getting there guys now I want to talk a little bit about positioning all right so the position property has a few different values so static is actually the default if we don't assign a position its static this just renders the elements in order of the document flow relative means that the element is positioned relative to its normal position so it falls naturally but we can add that we can add properties like top left right bottom and so on and we can push it to where we want now absolute will allow us to target whatever position we want inside of a relative element and I'll show you what I mean in a second fixed is a fixed position to the browser window so no matter how is how much we scroll where we are on the page it'll always be in the same position initial sets the property to its default value and then inherit will inherit whatever the property of its parent element so let's take a look at some of these in action all right guys so back to our HTML remember we did float the main block in sidebar so I'm going to go under those two divs and just clear it out so we'll say div and we're going to give it a class of CLR okay and then what I'm going to do is I'm going to create a div and let's give this a class of P - box for positioning box alright and then I'm going to put an h1 in here we'll just say hello and then let's also put an h2 and we'll say goodbye and I'm just using these so I can give you some examples on positioning so let's go ahead and save that now if we reload we're just going to see the two headings but we're going to go to our CSS now just that a little smaller and let's see we're going to target the P - box element that we just created and I'm going to set a specific width and height to this so let's say 800 pixels for the width height we'll say 500 pixels and then let's just add a border around it so we can definitely see it so one pixel solid one pixel solid black all right so if we look at that that's what it's going to look like now let's add a little margin to the top to push it down a little bit all right so this is position static by default now I want these to be positioned absolute so I can move them around wherever I want within its element now to do that actually let me show you let me show you what happens if we don't set it to relative first so if we say dot P box and let's target the h1 that should be a dot all right and then let's say top and we'll set it to 40 pixels so let's see what happens when I reload to this h1 nothing let's see that's because I didn't set it to absolutely I want position position absolute all right and then reload and now it disappears now it doesn't actually disappear what happens is if we go up here here it is so what's going on is it's we're saying top 40 pixels so it's coming down 40 pixels from the top now since it doesn't have a apparent element that is positioned relative it's just going to use the entire HTML document okay as its container now we want it to be pushed 40 pixels from the top of this element of P box so in order for that to happen we need to actually set this to position relative all right so now if we save and reload now it's pushed 40 pixels from the top and just to show you I'll change it to a hundred all right and then we can basically put this element wherever we want if we want it to go let's say from the left 200 pixels reload and then you can see it's down 100 and to the left or to the right from the left 200 okay let's say we wanted to move goodbye like somewhere down here we'll say P - box and will target target the H - set it to position:absolute and then let's say we want it from the bottom 40 pixels and then let's say from the right 100 pixels okay reload and there we go so you can see we can put this stuff wherever we want this is really helpful when you're building games that have to do with CSS all right you can imagine moving like a little image a little checker or something around the board all right now let's let's look at fixed positioning real quick so what I'll do is I'm going to actually go outside of the container and I'm going to create an a tag alright let's actually give it a class of button okay I remember we have that button class and I'm also going to give it a class of I would say fix me okay so it has two classes now fix me and button now if I reload it's going to show down in here whoops we have no text inside the link we'll just say hello all right so we have this button hello now - if we set it to fixed what it'll do is it'll be kind of stuck on the page somewhere and how wherever we scroll it'll still stay there so let me show you we go down here we say dot fixed me and then we're going to set position to fixed and then let's set top - 400 pixels all right so now if we save and reload you'll see that that button is now going to stay there 400 pixels from the top of the browser and it sits it's not going to move okay no matter where we are on the web page and that's really cool for like like social media links things like that where you want you know you want the user to always see it sometimes you'll even see this with the nav bar so when you scroll down the nav bar still shows all right so we're past an hour now and we still have to do the layout so I apologize that this is taking so long but I do want to cover our so what I want to do now is show you how to use an image as an element background so we're going to use this right here this P box so let's see I'm just going to grab an image real quick say light abstract image actually that's not what I want let's grab this right here alright so I'm going to grab this image and I'm going to just save it as BG image dot jpg and we'll save it to our cheat sheet images folder all right and then let's go back and close those let's go back to our CSS and under P box let's say background - image and then that's going to say URL and then in here we need a path a path to the image so it's going to be dot dot slash because right now we're in the CSS folder but we want to go outside of it so that brings us out and then we want to go into the images folder and then we want to call BG image dot jpg all right so let's save that and reload and now you'll see we have the image as the background now there's there's different there's different background styles we can use so for instance the position so let's go down here and say background position and we're going to set that to let's say a hundred pixels 200 pixels and reload what that's going to do is it's going to push it down 100 pixels and push it or push it over a hundred pixels and down 200 now notice that it's actually repeating the image is repeating okay this is the end and then it repeats both ways so what we're going to do is set background - your repeat to no-repeat all right and reload and now you'll see that it does not repeat now for a background position you can also use I cannot type position today you can also use Center let's say Center Center and reload and that will Center it on the you know horizontally and vertically we could say Center top reload and that will Center at top so you can use pixels or you can use Center you can also use percentages I believe alright but that's what work that's all we're going to do with the background images alright so the last thing I want to do inside the cheat sheet is I want to I want to show you a little bit about pseudo classes so what I'm going to do is in the container under the P Box let's go ahead and put in a UL we're going to have a bunch of allies I'm just going to stay list item and we'll copy that I'm just going to have a bunch of these ok so will reloads with a bunch of list items and we can use pseudo classes to target certain things so let's say that let's give that a class actually so UL class we'll just call it my list alright so we'll say dot my list and actually we're going to target an Li and then I'm going to use a pseudo class by using a colon and we're going to say first - child ok and then we're going to set the background will say background and we'll set that to red notice that we don't have to use background - color we can use background and then we can use either a color or an image here okay and that's going to get the first child it's going to get the first Li we also have last child okay so last child and we'll change that to let's say blue I'm not going to go over all the pseudo elements but just some of the important ones now let's say you wanted to target like the fifth one of this so what you could do and this is all css3 we can say my list Li and then we can use something called nth and child and then it's we're going to put in some parentheses here and let's say we want the fifth so we could put five and then we'll stay color or let's say background yellow all right so we'll reload and now the fifth one is yellow so you can target whatever one you want using these pseudo elements now you can also use even an odd with nth child so let's copy that and let's say we want all of the even to be gray and reload and now all the even list items will have a gray background so very very helpful especially if the stuff is dynamically generated and you can't really target a specific list item alright guys so we've looked at quite a bit pretty much all the the fundamentals of CSS as far as the the properties and all that I mean there are more but it's impossible to go over all of them in this amount of time I'm way over what I wanted to do but I do want to do what I promised and kind of create a website layout for you guys so hopefully this isn't too long if you've watched it up to this point then I'm sure you won't mind watching another you know 10-15 minutes so I'm going to do this kind of quick because we did go over you know most of the stuff that we're going to be doing here so in my website I'm going to create a new file called index.html why do I keep doing that I do that because I usually use Adam and when you do that you create a new file you can just type the name and say if you don't have to do ctrl s alright and then let's create a folder called CSS and we'll create another folder called images all right now in CSS we'll create a file and let's save it as style dot CSS okay we're now in the my website folder cheat sheet is done okay so we have these two files let's go ahead and add some basic markup to our website let's just say my web site all right and then we want to link the style sheet so it's linked to CSS slash style dot CSS and then we're going to write our markup and that's usually what I like to do is do the markup first and then the styling so we're going to be using html5 html5 semantic elements so let's start with a header and our header is just going to basically have an h1 and we'll just call it my website that's kind of like our logo and I'm going to give this header an ID of main header all right now we're going to have a container class that's going to push everything to the middle and so on but I don't want to wrap it around the whole site because I don't want everything to be pushed over for instance the header I want the background color to go across the whole thing but I want the content the actual h1 to be you know to have the container around it so we're going to be using the container inside of this and inside a lot of our elements alright so there's our header next thing we'll do is the navbar and again we're going to have the container inside of it so what I'm going to do is just copy this we'll change this to nav change the ID to navbar make sure you change that as well and then we're going to have our UL let's do our L eyes okay our a tags I'm not going to actually go anywhere but this is our fake navigation so we'll say home about services and contact all right and then under that we're going to have like a showcase area so for that I'm going to use a section tag and I'm going to give this an ID of showcase notice these are these are the things that you use IDs for because I'm not going to have another main nav bar or another main header or showcase the is all unique stuff so I'm giving it an ID okay so that that gives you an example of the difference all right and then container however we're using in all different places so that is a class okay let's put an h1 in our showcase just put some dummy text I want it really short though so I'll just do that all right so that's our showcase two tab that over and then under the showcase we're going to have like the main area which is also going to be a section so let's say section say section ID main and we'll just put an h1 in here we'll say welcome and then we'll have a paragraph with some dummy text now the main area will be on the left and then you'll have a sidebar which is going to be an aside all right and the aside I'm going to give that an ID as well of sidebar all right and then let's see what I want to put here let's just let's we'll just put some text just copy this I'll make it a little shorter though all right now the main and the sideb I do want both of those push to the middle so I'm going to wrap a container around both of those and once this comes together you'll see exactly why I'm doing this oops all right and then finally we just want a footer so we're going to use an html5 split our tag and let's give that an ID of main footer okay we'll put a paragraph and would say copyright ampersand 2017 my website alright so that should be all the mock-ups so now let's go to our file path here it's in crash course slash actually we'll just open it from from explorer see my website index.html so that's what it looks like without CSS why isn't that oh my god that should be copy 2017 all right so this is what it looks like without CSS now we're going to start to add our Styles again I'm going to be doing this kind of quick because a lot of this stuff we already went over so let's say body it's a background or background color like grey a lot of the styles would be the same as well so say color will be five font family font family arial helvetica sans-serif okay we'll set the font size to 16 let's set the line height and these are just common settings that I use a lot for line height and so on and then I'm going to just margin out to zero alright and then the container so container will be 80% and want the margin auto and we're going to set overflow to hidden so that there's no scroll bars even if something goes outside of its container all right now remember we have the header which has an ID of main header so for that I'm going to set the background X let's do background color and I'm going to set that to the color coral and then set the actual text color to white all right so let's look at that that's what it looks like now we want to style the navbar and this is um this is actually really easy all we need to do is take the padding away from the UL take the the bullet points away we need to float the links or not float but display them in line okay so that you know they float across well I guess we will fold them as well I'm sorry we're not going to make the links in line we're going to make the list items in line so let's grab the UL so we'll say main I'm sorry navbar let's do the navbar itself first excuse me which is going to have a background color of dark gray we'll say color white and let's say okay that's fine we'll just leave that and then the navbar ul let's let's get rid of the padding let's get rid of these bullet points so let's style none all right so if we go ahead and we look at it that's what it'll look like now the Li tags we want those to be in line instead of block so let's say navbar navbar Li and we're going to set display:inline all right now if we look at that you'll see now that they go to the side and then the last part of the navbar to style is the links so now bar a let's set the color to white let's set the text decoration to none let's set the color to well we already did the color let's set the font size to 18 pixels make them a little bigger and then padding right so we don't want them so close together to 15 pixels reload and there we go there's our navbar so next thing is the showcase so showcase and we're going at we're going to set a background image for this oops I'll just type it background image URL okay that's going to be we go dot dot slash images slash showcase dot jpg so let's get that image that was the light abstract coral where is it narrow this down to large this is that it I don't think that's it right here I'm going to grab this image here and you can use whatever image you want but I'm going to save this make sure it's in the my website images and we're going to call this showcase alright so if we go back to our site actually we need to add some other stuff here so we have the background image let's set the position so background position I'm going to set that to center right and let's set the height now I'm going to set it just as height for now but then I'm going to show you something alright and then let's uh that's good let's save it all right so for actually let's add a couple other things here will stay margin-bottom because you want to push everything down let's say 30 pixels everything under the showcase and then let's also text the line to the center ok now I want to grab on to the h1 that's in the showcase so for the h1 I'm going to change the color to white I'm going to change the font size to 50 I want to make it bigger I'm going to change the line height I'm going to change that to 1.6 m and then just add some padding to the top 30 pixels so that'll move the h1 down so let's go ahead and reload all right now as I go smaller here notice that the text goes outside of the of the height here so this is a case where you want to use min height okay because you want the height to gradually grow if the text grows so in the showcase instead of just height we're going to say min - height so if we're at this level there we go 300 but if we make it smaller you'll see that it'll let the height will grow with the text which is what we want that makes it responsive in fact this website will be responsive all right so that's the showcase now for the main and the sidebar so we have the main part here right and then this is the sidebar we want them want to float those so let's say main flow to the left set the width to 70% padding set to 0 30 pixels and then let's set the box sizing to border box so it includes that padding and stuff all right and then for the sidebar I'm going to be kind of similar so I'm going to just copy that I'll say sidebar it's going to float to the right we're going to give it a width of 30 let's give it a background background of oops dark gray and a color of white and that should be good actually to do padding 10 pixels all the way around reload there we go and then for the footer remember it has an idea of main footer I'm going to set background of dark gray color of white oops text a line to the center and what else padding through 20 pixels of padding and then let's move it down a little so margin top say 40 pixels save that reload and there's our footer now the last step is to make it completely responsive right now if we go down small like this I don't want these to be floated so what we need to do is add a media query we can add a media query by saying add media and then the condition is if it's a max width of 600 pixels so anything we any styles we put in here are only going to be in effect if it's under 600 pixels like this over here and what we want to do is we want to remove the floats from the main and the sidebar we also want to change the width to a hundred percent okay for both of those so let's say named with a hundred percent and then we want to say float none okay same thing with the sidebar so basically they just go on top of each other all right so let's save reload and there we go so we now have a responsive website using CSS alright so that was a long video guys hopefully learned a lot I feel like it was it was pretty good it was conveyed pretty well you know let me know if you think different or let me know if you liked it please subscribe if you liked it and that's it thanks for watching guys I do have a patreon account that's linked in the description if you guys want to support me even further even for a dollar per month I do have a couple perks and I'm come in the process of figuring out some more to give to my patrons so check that out it's in the description and thanks for watching guys see you next time

Channel: Traversy Media

Views: 3,188,448

Rating: 4.959403 out of 5

Keywords: css, css crash course, html css, css3, css tutorial, css for beginners, css beginners

Id: yfoY53QXEnI

Length: 85min 11sec (5111 seconds)

Published: Wed Jul 19 2017