Beginner's Guide to CSS Basics

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 many ways to do the same thing. In HTML, you have specific tags that you use to create a document. Well, 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-brained. However, when you're following along with this guide, you'll notice that we're going to be looking at the CSS syntax, not so much creative and artistic abilities or styling trends and stuff like that. All right, so hopefully that makes sense. Also, we're not going to be covering more advanced topics like Flexbox and animation. Flexbox is a 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. Alright 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 mockups 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 technologies such as sas 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 i just do i did want to let you know that that that is an actual thing all right and i do have videos on sas 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 Adam and 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 gonna go ahead and get started. Let's create a new folder I'm gonna put it on my desktop and I'm just gonna call this CSS crash course All right, now there's going to be 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 a 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. 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 the Desktop, CSS Crash Course. And I'm going to open that up. 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 of 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. All right. 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 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 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 the suggested method. This makes it so that the CSS that you're writing can only be used in that particular HTML file. 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.css extension and then you can simply link that file to whatever HTML file you want, whatever you want to use that CSS with. So we're going to be using the external method and that is for the most part suggested all the time. All right guys so let's go ahead and open up our index file in 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? No, I didn't save that. So if I reload, now you'll see we have CSS cheat sheet in the title. If I do a control U, you'll see the source code, which just matches what we have over here. Alright, 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 I'm just going to say, hello world. All right, so we have a simple H1. If I save it and reload, it's going to show up on the screen. Now, let's say I want to just change the color of this. 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 red, and save. Now, that does work, but this is a horrible, horrible way of implementing this. Because we're mixing the presentation which is just the h1 in 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 all right? 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 on to this and we can actually use the element itself A lot of times we'll be using IDs and classes to grab onto 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. You want to put these in the head. And then inside there, we can put our CSS. So for instance, we want to grab the H1. We can use that as the selector. And then some curly braces, and then we can say color red. Okay, if I say, 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. All right. And like I said, this does separate, 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 CS. I'm gonna 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 All right, and then what we'll do is we'll say h1 just like we did in the style tags in the HTML and we'll say color green all right 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 because it's located in the CSS folder right here. So you have to specify the entire location. Alright, so let's save that and reload and now you'll see that it's green. It's actually looking at this style CSS file. Alright, 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 the the basic format So we have the selector here in this case. We're saying a so an a an a tag is a link We learned 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. We'll get into that in a little bit. Then to start the declaration, we have an opening curly brace. To end it, we have a closing curly brace. Then inside there, we have a property and a value, 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, to separate these, we have 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 some styles here. Now, I'm going to go to the CSS file and get rid of the H1 styling here. and then I'm just going to say body and then open up some curly braces alright so we have our selector here which is body this is going to pertain to the body tag and everything in it I shouldn't say everything in it, it's not going to actually change 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. I'm going to go over this in a second. It's going to be number sign F4 three times. 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. This is a hexadecimal value for light gray. If we want to change the color of the text, we can use the color. Let's say we want color to be the hexadecimal value of 6 5's and that's going to be a dark grey. Now if I reload notice that the H1 actually changed to a lighter grey. So any text we put in by default 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 RGB or red green blue values. So with this example here, we're using color names. So color red, we can use blue, yellow, very common colors. And then HTML5 added some extra colors here. 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. Now hexadecimal values look like this. We have the number sign, and then you have a code which pertains to that specific color. 6 zeros is going to be black and 6 Fs is going to be white. You can also use shortcuts and use 3 characters as well for some of these. 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. So here we have blue at 255 which is going to make this color a certain shade of blue. Alright, 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 lorem and tab, and it'll give us a bunch of sample text. Alright, we'll reload that, just so we have 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. Alright, so let's save that and reload. And notice that the font has now changed. Now in CSS you have web save fonts and then you have other fonts which you can use. Now web save fonts means that You don't need to import any kind of special font. You can just use it just like we did here. 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 style sheet and then apply it. So let's take a look at some of the WebSafe 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, 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 Verdana. I like Tahoma. 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 that's pretty much it. So these are the WebSafe fonts. And when we talk about serif fonts... You can see that the serif fonts have the little hooks on the end here of the letters. And then sans serif is kind of a flat look. 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. Alright, so let's get back to our CSS. I'm just going to make this wrap so that you guys can see everything. I'll just do word wrap. And let's go ahead and add, let's 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. Alright, 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 just 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 can 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. Alright, 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. And let me just put a little comment here. I'm just going to say, same as above. Alright, 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 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 gonna do here is say 1.6 M or em and let's save that and reload and now notice that there's there's more space in between the lines all right that's what line height does now em or m is 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 EM. 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, you 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-1. Okay, so wrap the paragraph and the heading. Okay, we'll push that over a little bit. I don't like how... yeah, I'm just gonna 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 and 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 navbar you might give that an id of main navbar because you're not going to be using that main navbar 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 one 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. Alright, 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 the bottom line. Alright, so we have this div with the class of box one so let's go ahead and save this and then we'll go into our styling and let's see i'll just make this smaller so to target a class we use a dot so remember we called it box one so we're going to say dot box one 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 dash color and let's set it to like um almost black, a dark grey, which is going to be 3, 6 times. Now this is one of those colors where we can use a shortcut. We can actually use just 3 3's and it will give us the same color. So let's save that and reload. Notice that the background is now a dark grey. One thing I also wanted to do was on the body I want to zero out the margin. I'm going to go over margin later on so don't worry about that. I'm just going to set margin to 0. and that'll get rid of these spaces around it. Okay, except for the top because headings actually have margin by default. Alright, 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 F's. Okay, or six F's, 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 gonna put it right here and let's call it container if you've ever used bootstrap or other frameworks You've probably seen this quite a bit and we can set this to a width. Okay, so for right now I'm just gonna say 500 pixels Alright, 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 wrapped around everything. Okay, so we'll go down here and put the ending div tag. Let's tab it over. Alright, so if we save that and reload, you'll see that it's now 500 pixels wide. Now with containers, like I said, you 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 an auto margin on all sides. It's going to set it to the same on all sides. So let's save that and 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. 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%. OK, and then reload and then as I make it smaller, you'll see that it actually responds correctly to the size. So you for the most part, you want to use percents when you're dealing with some 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 as 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, its edge. So that padding, you can set the top, 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. There's the long way and there's 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 and this, and then the left and right would be 10. 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 right bottom left. Okay, that's what you need to remember. Top right bottom left. And you'll see top five, right ten, bottom five, left ten. Alright, now to take it a step even further. 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 are five left and right are 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 shorter 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 the same format with padding you can be padding top padding bottom and then same thing over here you can just use padding alright 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 it's 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 5 pixel border around the whole entire thing now just like with margin and padding There's there's shorthands. You don't have to do all of 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 5 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 so you guys have it. Let's say same as above. Alright, 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 target the width of the border... border bottom... we could say border bottom width and let's just set that to 10 pixels. So we can target it like that. We can also do styles. So if we wanted to say border... let's do border... Top style and we'll set that to dotted. So if I reload now you'll see the top border is dotted. And I believe there's 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, at least for me, I usually use solid. All right, 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. We'll 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 everything so every element every style and we'll set this to margin 0, padding 0, and that'll zero everything out. That's called a reset. 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 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. Alright, 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. 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. Now margin on the other hand is going to be the space outside of the border. 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. OK. 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. OK. 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. Alright, reload, and there we go. Alright, 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 1, 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 Tahoma. Reload, and now you see that this is now a Tahoma 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 we have font weight, font style. We have text decoration, which we could do an 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. Okay, 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 there's space between each letter and then we also have word spacing say word spacing and we'll say 1m reload and you'll see that now there's more space between each word so these are just some text formatting styles all right let's go ahead and put another box on the page just to add some more html so i'm going to copy box one And we'll change this to box 2. And that's fine. We'll leave this. same text I guess reload actually change the heading will say goodbye world alright now notice that we don't have any styling because we're now using a box to class not box one if we if we change this to box one of course it's gonna apply those styles but let's change it to box to and then in the CSS will just say box to 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 it to be 3 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, 0 left and right. So it adds some padding and also added margin on the top and bottom. So next thing I'm going to do is let's add a list, an unordered list. So let's go back to our HTML. We'll go under box 2. And let's put a div. We'll give this a class of, let's say, categories. And let's put an H2. We'll say categories. And let's put a UL with some LIs. Okay, each Li will have an A tag, which will just go nowhere. We'll say category 1. I'm just going to go like that. We'll see category 1, 2, 3, and 4. All right, 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.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 you'll find your your way of doing things you So let's just give it a border of one pixel light gray solid. And then we'll just give it some padding of 10 pixels all the way around. And it's going to just go around the whole thing. There's also a border radius. property that we can use and that's that can give it rounded corners so it's a 15 pixels and reload and now notice that this box has curved edges alright let's see what else text align so that's something you might use a lot so let's say categories categories and I think it was was it 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 test 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 LI tags. So we'll say categories UL. Now, ULs by default have some padding. You'll see they're pushed over. I think it's like 40 pixels. So let's actually zero that out by saying padding zero. Okay. If we reload, you'll see that. 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. Reload, and now it doesn't have any. Alright, 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 to just just target the links in the in the Categories, but I'm actually gonna go up top here and apply a global styles to the links So just a so this will apply to any link on the page So let's start by getting rid of the underline. So we'll say text decoration None. That's going to get rid of that annoying underline. You probably want to change the color because the default blue is really ugly. Let's change it to black. Now you can see the links are black. Now, as I said, they have different states. They have a hover state. We can say A colon hover. Let's say we want to change the color to red when they're hovered. Reload. Now when I hover over each of these, Each link it turns red. There's also an active state. Oops. And active, let's 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's meaning it's active. all right we also have a visited state so if we say a visited and let's say color uh 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 let's say category 5 and save reload well i guess that's oh you know what let's let's make it go somewhere else we'll 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 so i guess i mean if we created a test.html that that should turn yellow i i honestly haven't can't remember the last time i used visited but just so you guys know you can do that all right so let's go back down to our categories and let's um let's get rid of that style actually i don't want the visited to be yellow let's let's make it black Alright, so now let's say categories, li's. 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 1 pixel and let's say 333 for the color. We'll reload and now it looks something like that. Alright. Let's actually do not 8 pixels, we'll do 6. Alright. 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. 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 all right and what I'm gonna do is grab an image let's say check mark images and let's grab this check mark right here and I'm just gonna save it as check dot PNG and we're gonna save it in our desktop CSS Crash Course, CSS Cheat Sheet, and then 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 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, let's see, image size. Change it to 10 pixels. And then I'm just going to re-save 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 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. But let's say we just want to say padding left 20 pixels. And that will push it over. Alright 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 gonna 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 let me 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 I'm 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 and 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 say 20 pixels. That'll be around the entire form. Okay, and then let's separate 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. Okay, that'll separate it a little bit. Now for the label, labels are inline. That's why they're on the same level as the input. Okay, inputs and labels are inline. 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, you know what? We should be putting my form before all of these. Like that. Alright, we'll say my form label. And then I'm going to display that. Even though it's inline, we can set it to be a block. and remember block level elements they'll they'll put it on a new line and they go across the entire blind so if we save now you'll 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 100% 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 text 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 to, so I'm just going to put a comma here and we're just going to say.myform textarea reload 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 type equals submit. Okay, we could 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 we'll 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 doing this right here, what I'm going to do is just change this to.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 under the container. And then what I would do is apply that class to this input. Actually, I already did. I already did do it. So that should still work. 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. And actually since it's a link, we want the 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 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 hover effect 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 let's say div. And let's give this a class of block. And inside these blocks we'll have an h3. We'll 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. 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 right access a float left and we're gonna set a with now since there's three of them I'm gonna set the with to 33.3 percent alright and then let's just add like com actually listen do that for now let's see what that does all right 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 Let's see. 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 just barely fits everything in, and then it's adding 10 pixels padding. It's adding a pixel 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. Oops, not box shadow. So box. sizing and we set this to the value of border box so if we save that and reload now notice 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 you making it too big or too wide. All right, so just to let you know. Now when you get into Flexbox, Flexbox 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 Flexbox in 20 minutes video that I did. All right, 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 your next markup is going to be all messed up. It's going to be up here. So what we do is we create a div. Let's give it a class of CLR. You might also see clearfix 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 both. And that's going to clear any floats above it. Okay. And then what we'll do is create a div. This time I'm going to give it an... ID so I'll give it an ID of main block alright, 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 We'll 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, they're IDs, so we want to use a number sign. And let's say main block. Main block and we're going to float that to the left and then I'm going to set a width of 70% because I want this to be kind of responsive. Alright and then let's copy that. And then for this we'll say sidebar. That's what I called it, right? Sidebar. And we want that to float to the right. And we want that to be 30%. Alright, so let's go ahead and save that and reload. And there we go. Now for the sidebar, I'm also going to add... Actually, let's add a background color. Of dark gray, color white. color white and let's add padding 15 pixels and save Okay. Now again, it's not it's gonna go on down here. It 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 and we're going to also add some padding in the border box on our main block so now we'll reload and there we go so now it's it's floated correctly Alright, so we are getting there guys. Now I want to talk a little bit about positioning. Alright, so the position property has a few different values. So static is actually the default. If we don't assign a position, it's 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 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 much we scroll, where we are on the page, it will 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. main block and 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 dash box for positioning box. All right. 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 gonna see the two headings but we're gonna go to our CSS now just that a little smaller and let's see we're going to target the p dash 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 will 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. Alright. So this is positioned 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 what happens if we don't set it to relative first. So if we say dot pbox and let's target the h1. That should be a dot. Alright, 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 absolute I want position position absolute Alright, 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 we're saying top 40 pixels. So it's coming down 40 pixels from the top. Now since it doesn't have an apparent element that is positioned relative, it's just going to use the entire HTML document as its container. Now we want it to be pushed 40 pixels from the top of this element of Pbox. So in order for that to happen we need to actually set this to position relative. Alright, 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 100. Alright, 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. 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 dash box and we'll target we'll target the h2 set it to position absolute you And then let's say we want it from the bottom 40 pixels. And then let's say from the right. 100 pixels. OK, 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. You can imagine moving a little image, a little checker or something around the board. Now 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. All right, let's actually give it a class of button. Okay, remember we have that button class. And I'm also going to give it a class of, let's say, fix me. Okay, so it has two classes now, fix me and button. Now if I reload, it's going to show down 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 if we go down here. We say dot fix me and Then we're gonna set position to fixed and then let's set top to 400 pixels. Alright, 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's not going to move, okay, no matter where we are on the webpage. And that's really cool for like social media links, things like that, where you want the user to always see it. Sometimes you'll even see this with the navbar, so when you scroll down, the navbar still shows. Alright, 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 everything. 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. Let's 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 bgimage.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 pbox let's say background dash image and then that's going to we're 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 jpeg 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 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, 100 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 100 pixels and down 200 now notice that the it's actually repeating the images repeating okay this is the end and then it repeats both ways. So what we're going to do is set background-repeat to no repeat. And reload. And now you'll see that it does not repeat. Now for a background position, You can also use center center and reload and that will center it horizontally and vertically. We can say center top 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. All right, but that's all we're going to do with the background images. All right, 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 gonna do is in the container under the P box. Let's go ahead and put in a ul We're gonna have a bunch of allies. I'm just gonna say list item And we'll copy that we're just gonna have a bunch of these Okay, so we'll reload. So we have a bunch of list items. And we can use pseudo classes to target certain things. So let's say that, well let's give that a class actually. So ul class, we'll just call it my list. Alright, so we'll say.my list. And actually we're going to target an ally and then I'm going to use a pseudo class by using a colon and we're going to say first dash child. OK. And then we're going to set the background. We'll say background and we'll set that to red. Notice that we don't have to use background dash color. We can use background and then we can use either a color or an image here. Okay, and that's gonna get the first child it's gonna 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 of 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 could say my list li, and then we could use something called nth. nth child and then we're going to put in some parentheses here and let's say we want the fifth so we can put five and then we'll say color or let's say background yellow Alright, 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 and 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 this stuff is dynamically generated and you can't really target a specific list item. All right, guys, so we've looked at quite a bit, pretty much all of the fundamentals of CSS as far as 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 um 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 Atom and when you do that you create a new file. You can just type the name and save. You don't have to do Ctrl S. All right 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.css. We're now in the My Website folder. Cheat sheet is done. So we have these two files. Let's go ahead and add some basic markup to our website. I'm just going to say My Website. And then we want to link the style sheet. So let's link to css.style.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 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 kinda like our logo and I'm going to give this header an id of main header 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 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 LIs. Okay, our A tags. They're 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 things that you use Because I'm not going to have another main navbar or another main header or showcase. This is all unique stuff, so I'm giving it an ID. Okay, so 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. Let's tab that over. And then under the showcase, we're going to have the main area, which is also going to be a section. So let's 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 we'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, we'll just put some text. I'll just copy this. I'll make it a little shorter though. All right. Now the. main and the sidebar, I do want both of those pushed 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. Alright, and then finally we just want a footer. So we're going to use an HTML5 footer tag and let's give that an ID of main footer. Okay, we'll put a paragraph and let's say copyright ampersand 2017 my website Alright, so that should be all the markups. Now let's go to our file path here. It's in crash course slash actually we'll just open it from explorer Let's 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 Alright 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, let's say background, or background color, light gray. A lot of the styles will be the same as well. So we'll say color will be 5, 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, the line height and so on. And then I'm going to just margin out to 0. All right, and then the container. So container will be 80%. We 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. Alright, now remember we have the header which has an ID of main header. So for that, I'm going to set the background. Actually, 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. So that's what it looks like. looks like. Now we want to style the navbar. This is actually really easy. All we need to do is take the padding away from the ul, take the bullet points away. We need to display them inline so that they float across. I guess we will float them as well. I'm sorry, we're not going to make the links inline, we're going to make the list items inline. Let's grab the UL, so we'll say main, I'm sorry, navbar. Let's do the navbar itself first, which is going to have a background color of dark gray. We'll say color white. And let's say, actually that's fine, we'll just leave that. And then the navbar UL, and then we let's let's get rid of the padding let's get rid of these bullet points so list style none alright 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 alright 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 navbar a Let's set the color to white. Let's set the text decoration to none. Let's set the color to, oh, we already did the color. Let's set the font size. to 18 pixels, make them a little bigger, and then padding right, because we don't want them so close together, to 15 pixels. Reload, and there we go. There's our nav bar. So next thing is the showcase. So showcase, and we're going to set a background image for this. Oops. just type it background image URL okay that's gonna be it's gonna go dot dot slash images slash showcase dot jpg so let's get that image that was the light abstract coral where is it let's narrow this down to large this is that it think that's it right here and grab this image here and you can use whatever image you want but I'm gonna save this make sure it's in the my website images and we're gonna call this showcase all right so if we go back to our site um 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 gonna set that to center right and let's set the height. Now I'm gonna set it just as height for now but then I'm gonna show you something. Alright and then let's uh that's good let's save it. Alright. So for... actually let's add a couple other things here. We'll say margin-bottom, because we 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. Okay, now I want to grab onto 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.6M. And then just add some padding to the top 30 pixels. So that will 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 height here. So this is a case where you want to use min height. 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 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 to float those. So let's see. Let's say main, float 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, it's 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 dark gray and a color of white. And that should be good. Actually, let's do padding 10 pixels all the way around. Reload. There we go. And then for the footer, remember it has an ID of main footer. I'm going to set background of dark gray, color of white, text align to the center, and what else? Padding. Let's do 20 pixels of padding. And then let's move it down a little so margin top. We'll 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 at media and then the condition is if it's a max width of 600 pixels. So 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 100% for both of those. So let's say main, width 100%, and then we want to say float none. Okay, same thing with the sidebar. So basically they just go on top of each other. 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 you 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 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.

Well, 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-brained. However, when you're following along with this guide, you'll notice that we're going to be looking at the CSS syntax, not so much creative and artistic abilities or styling trends and stuff like that. All right, so hopefully that makes sense. Also, we're not going to be covering more advanced topics like Flexbox and animation.

Flexbox is a 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. Alright 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 mockups 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 technologies such as sas 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 i just do i did want to let you know that that that is an actual thing all right and i do have videos on sas 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 Adam and 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 gonna go ahead and get started. Let's create a new folder I'm gonna put it on my desktop and I'm just gonna call this CSS crash course All right, now there's going to be 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 a 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. 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 the Desktop, CSS Crash Course.

And I'm going to open that up. 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 of 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. All right. 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 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 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 the suggested method. This makes it so that the CSS that you're writing can only be used in that particular HTML file.

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.css extension and then you can simply link that file to whatever HTML file you want, whatever you want to use that CSS with. So we're going to be using the external method and that is for the most part suggested all the time. All right guys so let's go ahead and open up our index file in 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?

No, I didn't save that. So if I reload, now you'll see we have CSS cheat sheet in the title. If I do a control U, you'll see the source code, which just matches what we have over here. Alright, 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 I'm just going to say, hello world.

All right, so we have a simple H1. If I save it and reload, it's going to show up on the screen. Now, let's say I want to just change the color of this. 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 red, and save. Now, that does work, but this is a horrible, horrible way of implementing this. Because we're mixing the presentation which is just the h1 in 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 all right? 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 on to this and we can actually use the element itself A lot of times we'll be using IDs and classes to grab onto 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. You want to put these in the head. And then inside there, we can put our CSS. So for instance, we want to grab the H1. We can use that as the selector.

And then some curly braces, and then we can say color red. Okay, if I say, 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. All right.

And like I said, this does separate, 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 CS. I'm gonna 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 All right, and then what we'll do is we'll say h1 just like we did in the style tags in the HTML and we'll say color green all right 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 because it's located in the CSS folder right here.

So you have to specify the entire location. Alright, so let's save that and reload and now you'll see that it's green. It's actually looking at this style CSS file. Alright, 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 the the basic format So we have the selector here in this case.

We're saying a so an a an a tag is a link We learned 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.

We'll get into that in a little bit. Then to start the declaration, we have an opening curly brace. To end it, we have a closing curly brace.

Then inside there, we have a property and a value, 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, to separate these, we have 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 some styles here.

Now, I'm going to go to the CSS file and get rid of the H1 styling here. and then I'm just going to say body and then open up some curly braces alright so we have our selector here which is body this is going to pertain to the body tag and everything in it I shouldn't say everything in it, it's not going to actually change 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. I'm going to go over this in a second.

It's going to be number sign F4 three times. 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. This is a hexadecimal value for light gray.

If we want to change the color of the text, we can use the color. Let's say we want color to be the hexadecimal value of 6 5's and that's going to be a dark grey. Now if I reload notice that the H1 actually changed to a lighter grey.

So any text we put in by default 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 RGB or red green blue values. So with this example here, we're using color names.

So color red, we can use blue, yellow, very common colors. And then HTML5 added some extra colors here. 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.

Now hexadecimal values look like this. We have the number sign, and then you have a code which pertains to that specific color. 6 zeros is going to be black and 6 Fs is going to be white.

You can also use shortcuts and use 3 characters as well for some of these. 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. So here we have blue at 255 which is going to make this color a certain shade of blue.

Alright, 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 lorem and tab, and it'll give us a bunch of sample text. Alright, we'll reload that, just so we have 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. Alright, so let's save that and reload. And notice that the font has now changed. Now in CSS you have web save fonts and then you have other fonts which you can use.

Now web save fonts means that You don't need to import any kind of special font. You can just use it just like we did here. 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 style sheet and then apply it.

So let's take a look at some of the WebSafe 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, 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 Verdana. I like Tahoma. 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 that's pretty much it. So these are the WebSafe fonts. And when we talk about serif fonts... You can see that the serif fonts have the little hooks on the end here of the letters. And then sans serif is kind of a flat look.

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. Alright, so let's get back to our CSS. I'm just going to make this wrap so that you guys can see everything.

I'll just do word wrap. And let's go ahead and add, let's 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.

Alright, 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 just 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 can 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. Alright, 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. And let me just put a little comment here.

I'm just going to say, same as above. Alright, 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 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 gonna do here is say 1.6 M or em and let's save that and reload and now notice that there's there's more space in between the lines all right that's what line height does now em or m is 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 EM. 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, you 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-1. Okay, so wrap the paragraph and the heading. Okay, we'll push that over a little bit.

I don't like how... yeah, I'm just gonna 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 and 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 navbar you might give that an id of main navbar because you're not going to be using that main navbar 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 one 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.

Alright, 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 the bottom line.

Alright, so we have this div with the class of box one so let's go ahead and save this and then we'll go into our styling and let's see i'll just make this smaller so to target a class we use a dot so remember we called it box one so we're going to say dot box one 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 dash color and let's set it to like um almost black, a dark grey, which is going to be 3, 6 times. Now this is one of those colors where we can use a shortcut. We can actually use just 3 3's and it will give us the same color. So let's save that and reload.

Notice that the background is now a dark grey. One thing I also wanted to do was on the body I want to zero out the margin. I'm going to go over margin later on so don't worry about that. I'm just going to set margin to 0. and that'll get rid of these spaces around it. Okay, except for the top because headings actually have margin by default.

Alright, 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 F's. Okay, or six F's, 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 gonna put it right here and let's call it container if you've ever used bootstrap or other frameworks You've probably seen this quite a bit and we can set this to a width. Okay, so for right now I'm just gonna say 500 pixels Alright, 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 wrapped around everything. Okay, so we'll go down here and put the ending div tag.

Let's tab it over. Alright, so if we save that and reload, you'll see that it's now 500 pixels wide. Now with containers, like I said, you 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 an auto margin on all sides. It's going to set it to the same on all sides.

So let's save that and 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. 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%.

OK, and then reload and then as I make it smaller, you'll see that it actually responds correctly to the size. So you for the most part, you want to use percents when you're dealing with some 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 as 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, its edge. So that padding, you can set the top, 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. There's the long way and there's 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 and this, and then the left and right would be 10. 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 right bottom left. Okay, that's what you need to remember.

Top right bottom left. And you'll see top five, right ten, bottom five, left ten. Alright, now to take it a step even further.

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 are five left and right are 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 shorter 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 the same format with padding you can be padding top padding bottom and then same thing over here you can just use padding alright 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 it's 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 5 pixel border around the whole entire thing now just like with margin and padding There's there's shorthands.

You don't have to do all of 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 5 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 so you guys have it. Let's say same as above.

Alright, 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 target the width of the border...

border bottom... we could say border bottom width and let's just set that to 10 pixels. So we can target it like that.

We can also do styles. So if we wanted to say border... let's do border...

Top style and we'll set that to dotted. So if I reload now you'll see the top border is dotted. And I believe there's 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, at least for me, I usually use solid. All right, 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. We'll 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 everything so every element every style and we'll set this to margin 0, padding 0, and that'll zero everything out.

That's called a reset. 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 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. Alright, 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. 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.

Now margin on the other hand is going to be the space outside of the border. 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. OK.

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. OK. 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. Alright, reload, and there we go. Alright, 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 1, 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 Tahoma. Reload, and now you see that this is now a Tahoma 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 we have font weight, font style. We have text decoration, which we could do an 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. Okay, 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 there's space between each letter and then we also have word spacing say word spacing and we'll say 1m reload and you'll see that now there's more space between each word so these are just some text formatting styles all right let's go ahead and put another box on the page just to add some more html so i'm going to copy box one And we'll change this to box 2. And that's fine. We'll leave this.

same text I guess reload actually change the heading will say goodbye world alright now notice that we don't have any styling because we're now using a box to class not box one if we if we change this to box one of course it's gonna apply those styles but let's change it to box to and then in the CSS will just say box to 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 it to be 3 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, 0 left and right. So it adds some padding and also added margin on the top and bottom.

So next thing I'm going to do is let's add a list, an unordered list. So let's go back to our HTML. We'll go under box 2. And let's put a div.

We'll give this a class of, let's say, categories. And let's put an H2. We'll say categories. And let's put a UL with some LIs.

Okay, each Li will have an A tag, which will just go nowhere. We'll say category 1. I'm just going to go like that. We'll see category 1, 2, 3, and 4. All right, 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.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 you'll find your your way of doing things you So let's just give it a border of one pixel light gray solid. And then we'll just give it some padding of 10 pixels all the way around. And it's going to just go around the whole thing.

There's also a border radius. property that we can use and that's that can give it rounded corners so it's a 15 pixels and reload and now notice that this box has curved edges alright let's see what else text align so that's something you might use a lot so let's say categories categories and I think it was was it 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 test 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 LI tags. So we'll say categories UL. Now, ULs by default have some padding. You'll see they're pushed over.

I think it's like 40 pixels. So let's actually zero that out by saying padding zero. Okay. If we reload, you'll see that.

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.

Reload, and now it doesn't have any. Alright, 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 to just just target the links in the in the Categories, but I'm actually gonna go up top here and apply a global styles to the links So just a so this will apply to any link on the page So let's start by getting rid of the underline. So we'll say text decoration None.

That's going to get rid of that annoying underline. You probably want to change the color because the default blue is really ugly. Let's change it to black.

Now you can see the links are black. Now, as I said, they have different states. They have a hover state. We can say A colon hover.

Let's say we want to change the color to red when they're hovered. Reload. Now when I hover over each of these, Each link it turns red. There's also an active state. Oops.

And active, let's 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's meaning it's active. all right we also have a visited state so if we say a visited and let's say color uh 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 let's say category 5 and save reload well i guess that's oh you know what let's let's make it go somewhere else we'll 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 so i guess i mean if we created a test.html that that should turn yellow i i honestly haven't can't remember the last time i used visited but just so you guys know you can do that all right so let's go back down to our categories and let's um let's get rid of that style actually i don't want the visited to be yellow let's let's make it black Alright, so now let's say categories, li's. 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 1 pixel and let's say 333 for the color. We'll reload and now it looks something like that. Alright. Let's actually do not 8 pixels, we'll do 6. Alright. 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. 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 all right and what I'm gonna do is grab an image let's say check mark images and let's grab this check mark right here and I'm just gonna save it as check dot PNG and we're gonna save it in our desktop CSS Crash Course, CSS Cheat Sheet, and then 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 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, let's see, image size. Change it to 10 pixels. And then I'm just going to re-save 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 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. But let's say we just want to say padding left 20 pixels. And that will push it over.

Alright 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 gonna 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 let me 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 I'm 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 and 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 say 20 pixels. That'll be around the entire form. Okay, and then let's separate 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. Okay, that'll separate it a little bit.

Now for the label, labels are inline. That's why they're on the same level as the input. Okay, inputs and labels are inline.

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, you know what? We should be putting my form before all of these.

Like that. Alright, we'll say my form label. And then I'm going to display that.

Even though it's inline, we can set it to be a block. and remember block level elements they'll they'll put it on a new line and they go across the entire blind so if we save now you'll 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 100% 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 text 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 to, so I'm just going to put a comma here and we're just going to say.myform textarea reload 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 type equals submit. Okay, we could 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 we'll 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 doing this right here, what I'm going to do is just change this to.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 under the container. And then what I would do is apply that class to this input.

Actually, I already did. I already did do it. So that should still work. 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. And actually since it's a link, we want the 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 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 hover effect 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 let's say div. And let's give this a class of block.

And inside these blocks we'll have an h3. We'll 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. 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 right access a float left and we're gonna set a with now since there's three of them I'm gonna set the with to 33.3 percent alright and then let's just add like com actually listen do that for now let's see what that does all right 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 Let's see. 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 just barely fits everything in, and then it's adding 10 pixels padding. It's adding a pixel 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. Oops, not box shadow.

So box. sizing and we set this to the value of border box so if we save that and reload now notice 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 you making it too big or too wide. All right, so just to let you know.

Now when you get into Flexbox, Flexbox 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 Flexbox in 20 minutes video that I did.

All right, 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 your next markup is going to be all messed up.

It's going to be up here. So what we do is we create a div. Let's give it a class of CLR.

You might also see clearfix 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 both.

And that's going to clear any floats above it. Okay. And then what we'll do is create a div. This time I'm going to give it an...

ID so I'll give it an ID of main block alright, 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 We'll 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, they're IDs, so we want to use a number sign. And let's say main block. Main block and we're going to float that to the left and then I'm going to set a width of 70% because I want this to be kind of responsive. Alright and then let's copy that. And then for this we'll say sidebar.

That's what I called it, right? Sidebar. And we want that to float to the right. And we want that to be 30%. Alright, so let's go ahead and save that and reload.

And there we go. Now for the sidebar, I'm also going to add... Actually, let's add a background color.

Of dark gray, color white. color white and let's add padding 15 pixels and save Okay. Now again, it's not it's gonna go on down here.

It 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 and we're going to also add some padding in the border box on our main block so now we'll reload and there we go so now it's it's floated correctly Alright, so we are getting there guys. Now I want to talk a little bit about positioning. Alright, so the position property has a few different values.

So static is actually the default. If we don't assign a position, it's 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 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 much we scroll, where we are on the page, it will 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.

main block and 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 dash box for positioning box. All right. 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 gonna see the two headings but we're gonna go to our CSS now just that a little smaller and let's see we're going to target the p dash 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 will 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.

Alright. So this is positioned 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 what happens if we don't set it to relative first. So if we say dot pbox and let's target the h1.

That should be a dot. Alright, 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 absolute I want position position absolute Alright, 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 we're saying top 40 pixels.

So it's coming down 40 pixels from the top. Now since it doesn't have an apparent element that is positioned relative, it's just going to use the entire HTML document as its container. Now we want it to be pushed 40 pixels from the top of this element of Pbox.

So in order for that to happen we need to actually set this to position relative. Alright, 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 100. Alright, 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. 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 dash box and we'll target we'll target the h2 set it to position absolute you And then let's say we want it from the bottom 40 pixels.

And then let's say from the right. 100 pixels. OK, 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. You can imagine moving a little image, a little checker or something around the board. Now 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. All right, let's actually give it a class of button. Okay, remember we have that button class. And I'm also going to give it a class of, let's say, fix me. Okay, so it has two classes now, fix me and button.

Now if I reload, it's going to show down 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 if we go down here. We say dot fix me and Then we're gonna set position to fixed and then let's set top to 400 pixels. Alright, 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's not going to move, okay, no matter where we are on the webpage.

And that's really cool for like social media links, things like that, where you want the user to always see it. Sometimes you'll even see this with the navbar, so when you scroll down, the navbar still shows. Alright, 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 everything.

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. Let's 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 bgimage.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 pbox let's say background dash image and then that's going to we're 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 jpeg 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 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, 100 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 100 pixels and down 200 now notice that the it's actually repeating the images repeating okay this is the end and then it repeats both ways. So what we're going to do is set background-repeat to no repeat.

And reload. And now you'll see that it does not repeat. Now for a background position, You can also use center center and reload and that will center it horizontally and vertically. We can say center top 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. All right, but that's all we're going to do with the background images. All right, 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 gonna do is in the container under the P box. Let's go ahead and put in a ul We're gonna have a bunch of allies. I'm just gonna say list item And we'll copy that we're just gonna have a bunch of these Okay, so we'll reload.

So we have a bunch of list items. And we can use pseudo classes to target certain things. So let's say that, well let's give that a class actually.

So ul class, we'll just call it my list. Alright, so we'll say.my list. And actually we're going to target an ally and then I'm going to use a pseudo class by using a colon and we're going to say first dash child. OK. And then we're going to set the background.

We'll say background and we'll set that to red. Notice that we don't have to use background dash color. We can use background and then we can use either a color or an image here.

Okay, and that's gonna get the first child it's gonna 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 of 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 could say my list li, and then we could use something called nth. nth child and then we're going to put in some parentheses here and let's say we want the fifth so we can put five and then we'll say color or let's say background yellow Alright, 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 and 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 this stuff is dynamically generated and you can't really target a specific list item. All right, guys, so we've looked at quite a bit, pretty much all of the fundamentals of CSS as far as 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 um 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 Atom and when you do that you create a new file. You can just type the name and save. You don't have to do Ctrl S. All right 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.css. We're now in the My Website folder.

Cheat sheet is done. So we have these two files. Let's go ahead and add some basic markup to our website. I'm just going to say My Website.

And then we want to link the style sheet. So let's link to css.style.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 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 kinda like our logo and I'm going to give this header an id of main header 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 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 LIs. Okay, our A tags. They're 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 things that you use Because I'm not going to have another main navbar or another main header or showcase. This is all unique stuff, so I'm giving it an ID. Okay, so 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. Let's tab that over.

And then under the showcase, we're going to have the main area, which is also going to be a section. So let's 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 we'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, we'll just put some text. I'll just copy this. I'll make it a little shorter though.

All right. Now the. main and the sidebar, I do want both of those pushed 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. Alright, and then finally we just want a footer. So we're going to use an HTML5 footer tag and let's give that an ID of main footer.

Okay, we'll put a paragraph and let's say copyright ampersand 2017 my website Alright, so that should be all the markups. Now let's go to our file path here. It's in crash course slash actually we'll just open it from explorer Let's 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 Alright 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, let's say background, or background color, light gray.

A lot of the styles will be the same as well. So we'll say color will be 5, 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, the line height and so on. And then I'm going to just margin out to 0. All right, and then the container. So container will be 80%. We 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. Alright, now remember we have the header which has an ID of main header. So for that, I'm going to set the background. Actually, 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. So that's what it looks like. looks like.

Now we want to style the navbar. This is actually really easy. All we need to do is take the padding away from the ul, take the bullet points away.

We need to display them inline so that they float across. I guess we will float them as well. I'm sorry, we're not going to make the links inline, we're going to make the list items inline. Let's grab the UL, so we'll say main, I'm sorry, navbar.

Let's do the navbar itself first, which is going to have a background color of dark gray. We'll say color white. And let's say, actually that's fine, we'll just leave that. And then the navbar UL, and then we let's let's get rid of the padding let's get rid of these bullet points so list style none alright 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 alright 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 navbar a Let's set the color to white.

Let's set the text decoration to none. Let's set the color to, oh, we already did the color. Let's set the font size. to 18 pixels, make them a little bigger, and then padding right, because we don't want them so close together, to 15 pixels. Reload, and there we go.

There's our nav bar. So next thing is the showcase. So showcase, and we're going to set a background image for this.

Oops. just type it background image URL okay that's gonna be it's gonna go dot dot slash images slash showcase dot jpg so let's get that image that was the light abstract coral where is it let's narrow this down to large this is that it think that's it right here and grab this image here and you can use whatever image you want but I'm gonna save this make sure it's in the my website images and we're gonna call this showcase all right so if we go back to our site um 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 gonna set that to center right and let's set the height.

Now I'm gonna set it just as height for now but then I'm gonna show you something. Alright and then let's uh that's good let's save it. Alright. So for... actually let's add a couple other things here.

We'll say margin-bottom, because we 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. Okay, now I want to grab onto 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.6M.

And then just add some padding to the top 30 pixels. So that will 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 height here. So this is a case where you want to use min height. 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 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 to float those. So let's see. Let's say main, float 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, it's 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 dark gray and a color of white. And that should be good. Actually, let's do padding 10 pixels all the way around. Reload.

There we go. And then for the footer, remember it has an ID of main footer. I'm going to set background of dark gray, color of white, text align to the center, and what else? Padding. Let's do 20 pixels of padding.

And then let's move it down a little so margin top. We'll 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 at media and then the condition is if it's a max width of 600 pixels. So 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 100% for both of those. So let's say main, width 100%, and then we want to say float none. Okay, same thing with the sidebar.

So basically they just go on top of each other. 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 you 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 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.

Transcript for:Beginner's Guide to CSS Basics

Transcript for:
Beginner's Guide to CSS Basics