WEBVTT 00:07.280 --> 00:08.480 Hey, what's going on guys? 00:08.520 --> 00:11.480 Welcome to my CSS crash course for absolute beginners. 00:11.820 --> 00:14.800 This is a continuation of my HTML crash course. 00:15.040 --> 00:19.020 In this video I'm going to try and cram as much information about CSS that I can 00:19.020 --> 00:20.220 starting from scratch. 00:20.440 --> 00:24.420 And you don't need to have any experience at all whatsoever with CSS to follow 00:24.420 --> 00:24.820 along. 00:25.720 --> 00:27.920 Alright, so a few things before we get started. 00:28.020 --> 00:31.100 I want to stress that this guide is for beginners and people that don't really 00:31.100 --> 00:32.360 know anything about CSS. 00:33.080 --> 00:37.780 It's a continuation of my HTML crash course on YouTube, so unless you know HTML 00:37.780 --> 00:41.440 pretty well, I would suggest going back and watching that video first. 00:41.620 --> 00:42.900 And the link is in the description. 00:44.000 --> 00:47.620 Alright, now it's important to know that when it comes to CSS, it's much more free 00:47.620 --> 00:51.400 than HTML, meaning that there's many ways to do the same thing. 00:51.820 --> 00:56.120 In HTML you have specific tags that you use to create a document, while CSS is 00:56.120 --> 00:58.880 used for design and layout, so it's much more artistic. 00:59.440 --> 01:03.040 Many advanced web developers still struggle with CSS because it's much more 01:03.040 --> 01:03.660 right brain. 01:04.180 --> 01:08.520 However, when you're following along with this guide, you'll notice that we're just 01:08.520 --> 01:12.720 we're going to be looking at the CSS syntax, not so much creative and artistic 01:12.720 --> 01:15.500 abilities or styling trends and stuff like that. 01:15.900 --> 01:17.520 Alright, so hopefully that makes sense. 01:18.600 --> 01:23.360 Also, we're not going to be covering more advanced topics like flex box and 01:23.360 --> 01:23.940 animation. 01:24.880 --> 01:29.740 Flex box is a CSS 3 layout mode and it does things like align elements very 01:29.740 --> 01:32.220 easily, but I think it's too advanced for this video. 01:32.400 --> 01:37.040 Plus, I do have a video called Flex Box in 20 Minutes that teaches you all about it, 01:37.160 --> 01:40.760 so if you want to learn more about flex, I'd suggest watching that after this. 01:41.280 --> 01:45.880 Alright, and I will be doing an advanced CSS 3 video very soon, and that'll include 01:45.880 --> 01:50.400 things like animations and transitions, you know, all the pseudo elements, 01:50.560 --> 01:51.320 things like that. 01:53.080 --> 01:56.600 Alright, so we can't cover everything in this guide. 01:56.720 --> 02:01.160 This is a crash course, but I will be covering the most essential and useful 02:01.160 --> 02:02.120 parts of CSS. 02:03.700 --> 02:07.120 Alright, so let's talk a little bit about what CSS actually is. 02:07.160 --> 02:12.340 It stands for Cascading Style Sheets, and like HTML, it's not a programming 02:12.340 --> 02:12.780 language. 02:12.960 --> 02:15.720 It's actually a style sheet or a styling language. 02:15.920 --> 02:20.660 It's used for website layout and design, and it's used alongside of HTML. 02:21.100 --> 02:26.140 Now, it can also be used with other mock-ups like XHTML, XML, SVG, 02:26.360 --> 02:28.480 but it's most commonly used with HTML. 02:29.700 --> 02:34.480 Now, by default, CSS doesn't have any logic like a programming language does. 02:34.580 --> 02:35.800 It's strictly presentational. 02:36.140 --> 02:40.740 However, there are technologies such as Sass and Less that do allow you to extend 02:40.740 --> 02:44.800 the functionality of CSS and allows you to use things like variables and 02:44.800 --> 02:47.520 conditionals, but that's way beyond this course. 02:47.680 --> 02:51.720 I just did want to let you know that that that is an actual thing. 02:52.180 --> 02:55.800 Alright, and I do have videos on Sass and Less on my channel if you're interested. 02:57.080 --> 03:01.160 So, all you need to get started, just like when in the HTML crash course, 03:01.160 --> 03:03.100 we just need a text editor and a browser. 03:03.560 --> 03:07.360 We'll be using Google Chrome as our browser and Sublime Text as the editor. 03:07.880 --> 03:11.980 I went through the installation of Sublime Text back in the HTML crash course, 03:12.080 --> 03:13.200 so I'm not going to do that again. 03:13.200 --> 03:15.980 You can use Sublime or you can use something else. 03:16.500 --> 03:21.120 Atom and Visual Studio Code are fantastic editors, but I do think they're overkill 03:21.120 --> 03:22.860 for this particular video. 03:23.480 --> 03:28.920 Alright, Notepad++ and TextMate are also some very simple and very light solutions. 03:30.340 --> 03:33.100 Alright guys, so we're going to go ahead and get started. 03:33.220 --> 03:34.520 Let's create a new folder. 03:34.660 --> 03:40.660 I'm going to put it on my desktop and I'm just going to call this CSS Crash Course. 03:41.120 --> 03:44.000 Alright, now there's going to be two things that we're going to do. 03:44.120 --> 03:47.440 First, we're going to build like a cheat sheet, like we did with the HTML crash 03:47.440 --> 03:51.080 course, where it's not really a put-together site or anything like that. 03:51.220 --> 03:52.860 It's just a way for us to learn. 03:53.000 --> 03:57.960 It's a way for us to add classes and IDs and then go through all the specific 03:57.960 --> 04:00.120 styling rules and stuff of CSS. 04:00.800 --> 04:05.000 And then after that, we're going to actually lay out an actual... I wouldn't 04:05.000 --> 04:09.620 really call it a website, but I guess a website homepage where we use HTML5 04:09.620 --> 04:13.860 semantic tags and I show you how to float things and just create a basic, 04:13.980 --> 04:14.800 basic web page. 04:15.300 --> 04:19.140 Alright, so let's go ahead and create a new folder in here and I'm going to call 04:19.140 --> 04:22.480 this CSS Cheat Sheet. 04:23.900 --> 04:26.120 Alright, and that's what we're going to be working with first. 04:26.500 --> 04:30.980 But then I'm also going to create a folder called My Website and that's what we'll be 04:30.980 --> 04:31.920 working with after. 04:31.920 --> 04:34.500 So for now we're going to work in the cheat sheet. 04:34.700 --> 04:38.640 So let's go in there, let's create our index.html file. 04:42.860 --> 04:46.540 Alright, and then what I'm going to do is I'm going to open this up in Sublime Text. 04:46.860 --> 04:52.080 I'm actually going to open up Sublime and then I'm going to go to File, Open Folder, 04:52.800 --> 04:58.720 and we're going to go to... where is it... the Desktop... CSS Crash Course. 04:58.840 --> 05:02.040 And I'm going to open that up and then you can see I have both folders over here. 05:02.040 --> 05:05.580 Okay, so we're kind of treating these both as different projects. 05:05.700 --> 05:07.680 So we're starting in the CSS Cheat Sheet. 05:08.180 --> 05:13.140 So let's open up the index.html and with Sublime we can say HTML Tab and that's 05:13.140 --> 05:14.580 going to give us a basic structure. 05:14.860 --> 05:18.580 And I went over all of this in the HTML Crash Course, so if you don't understand 05:18.580 --> 05:20.740 what this is, please go back and watch that video. 05:21.480 --> 05:25.960 So for the title let's just say CSS Cheat Sheet. 05:27.200 --> 05:31.220 Alright, and before we write anything I just want to go over the different types 05:31.220 --> 05:33.240 or the different methods of using CSS. 05:33.720 --> 05:37.540 So there's three main ways of adding CSS to an HTML file. 05:37.760 --> 05:39.700 There's inline, internal, and external. 05:40.120 --> 05:43.480 I'm going to show you an example of all three, but let's talk about the difference 05:43.480 --> 05:43.880 first. 05:44.340 --> 05:49.900 So inline CSS means that you're adding a style attribute to the actual HTML tag, 05:50.020 --> 05:53.440 just like you would any other attribute like title or href. 05:53.840 --> 05:55.260 This is not what you want to do. 05:55.420 --> 05:59.760 It's horrible practice and you'll never see a professional web developer do this. 06:00.280 --> 06:04.460 One of the key rules to follow as a developer or programmer with any language 06:04.460 --> 06:08.480 is to keep the presentation, the functionality, and the styling completely 06:08.480 --> 06:10.160 separate, or as much as possible. 06:10.680 --> 06:15.300 Using inline CSS is mixing that presentation with styling, and it's not 06:15.300 --> 06:18.220 efficient, it's not scalable, and it's just not practical. 06:19.200 --> 06:24.020 Inline CSS refers to using style tags within the head of your HTML page. 06:24.100 --> 06:28.660 We did do a little bit of this in the HTML Crash Course at the end, and this is a 06:28.660 --> 06:32.800 hell of a lot better than using inline CSS because it does separate the style from 06:32.800 --> 06:35.880 presentation, but it's still not the suggested method. 06:36.600 --> 06:40.320 This makes it so that the CSS that you're writing can only be used in that 06:40.320 --> 06:41.860 particular HTML file. 06:42.220 --> 06:46.480 It also fattens up the HTML file and you want to keep it as slim as possible with 06:46.480 --> 06:47.340 just HTML. 06:48.120 --> 06:52.180 The third option is the best and the most used, and that's to use an external CSS 06:52.180 --> 06:52.960 style sheet. 06:53.180 --> 06:58.080 You can create a separate file with a .css extension, and then you can simply link 06:58.080 --> 07:03.040 that file to whatever HTML file you want, whatever you want to use that CSS with. 07:03.680 --> 07:09.060 Alright, so we're going to be using the external method, and that is for the most 07:09.060 --> 07:11.460 part suggested all the time. 07:12.440 --> 07:17.520 Alright guys, so let's go ahead and open up our index file in our browser. 07:17.880 --> 07:19.960 Alright, so we have our CSS cheat sheet. 07:20.060 --> 07:23.560 I'm just going to open index.html, which is going to be completely blank. 07:24.660 --> 07:26.760 Actually, the title... did I not save this? 07:27.060 --> 07:28.040 No, I didn't save that. 07:28.480 --> 07:31.320 So if I reload, now you see you have CSS cheat sheet and the title. 07:31.680 --> 07:35.800 If I do a ctrl-U, you'll see the source code, which just matches what we have over 07:35.800 --> 07:36.120 here. 07:36.880 --> 07:41.820 Alright, so let's go ahead and look at the different ways to implement CSS. 07:42.120 --> 07:47.480 So I'm going to put an h1 in here, and I'm just going to say, hello world. 07:48.020 --> 07:49.420 Alright, so we have a simple h1. 07:49.500 --> 07:51.600 If I save it and reload, it's going to show up on the screen. 07:52.340 --> 07:54.860 Now let's say I want to just change the color of this. 07:55.340 --> 07:59.500 Okay, now the first way that I'm going to demonstrate is inline CSS. 07:59.900 --> 08:05.020 So that is by using a style attribute, and then doing the actual CSS, 08:05.320 --> 08:08.420 which will say color red, and save. 08:08.820 --> 08:13.520 Okay, now that does work, but this is a horrible, horrible way of implementing 08:13.520 --> 08:14.000 this. 08:14.280 --> 08:19.420 Okay, because we're mixing the presentation, which is just the h1 and the 08:19.420 --> 08:24.540 text, with the styling, or with the CSS, which is this color red, and we don't want 08:24.540 --> 08:24.700 that. 08:24.760 --> 08:25.920 We want to keep these separate. 08:26.600 --> 08:29.160 Alright, so that's the first way, and we don't want to use that way. 08:29.720 --> 08:36.020 Now to not use inline styling, we need a way to grab onto this, 08:36.060 --> 08:38.160 and we can actually use the element itself. 08:38.860 --> 08:43.020 A lot of times we'll be using IDs and classes to grab onto an element, 08:43.160 --> 08:45.900 but you can just use the actual HTML tag. 08:46.420 --> 08:49.300 So let's take a look at the second way, which is internal. 08:50.040 --> 08:54.560 So for that, we would put style tags up in the head area. 08:54.740 --> 08:58.380 Okay, you want to put these in the head, and then inside there we can put our CSS. 08:58.900 --> 09:03.240 So for instance, if we want to grab the h1, we can use that as the selector, 09:03.500 --> 09:07.680 and then some curly braces, and then we can say color red. 09:08.320 --> 09:12.040 Okay, if I say... actually let's make it blue, just so you can see that it 09:12.040 --> 09:14.320 definitely is coming from here. 09:14.520 --> 09:16.140 So if I reload, now we get blue. 09:16.840 --> 09:22.440 Alright, and like I said, this does separate presentation from style, 09:22.640 --> 09:25.920 but you can only use these styles within this file. 09:26.340 --> 09:29.860 Okay, you may want to use these in other HTML files as well. 09:30.060 --> 09:32.860 So that brings us to the third method, which is external. 09:33.180 --> 09:38.380 So what I'm going to do is go into our CSS cheat sheet folder, and create a new 09:38.380 --> 09:42.920 folder called CSS, and then this is where we would put our style sheets. 09:43.300 --> 09:46.800 Okay, so let's create a new file, and we'll call this style.css. 09:47.380 --> 09:51.800 I'm going to save it, ctrl-s, style.css. 09:52.480 --> 09:55.560 Okay, now you don't have to call it style, you can call it whatever you want, 09:55.640 --> 09:57.860 just make sure it has a .css extension. 09:58.780 --> 10:03.400 Alright, and then what we'll do is we'll say h1, just like we did in the style tags 10:03.400 --> 10:07.020 in the HTML, and we'll say color green. 10:07.760 --> 10:09.400 Alright, and then we'll save that. 10:09.980 --> 10:13.960 Now obviously that's not going to work right now, because it doesn't know to even 10:13.960 --> 10:15.240 look at this style sheet. 10:15.420 --> 10:18.920 So what we're going to do is get rid of the style tags here, and we're going to 10:18.920 --> 10:20.760 use an HTML tag called link. 10:21.140 --> 10:22.960 Okay, so we're going to say link. 10:23.760 --> 10:27.760 In sublime text, we can just type the word link and hit tab, and that's going to give 10:27.760 --> 10:29.620 us the tag along with some attributes. 10:30.100 --> 10:34.340 So it has this rel attribute, which is telling it that this is a style sheet. 10:34.760 --> 10:38.180 We also have a type, which is saying that this is going to be CSS. 10:38.700 --> 10:42.100 And then the href is going to link to the CSS file. 10:42.280 --> 10:47.020 So in here we want to say CSS slash style dot CSS. 10:47.620 --> 10:54.480 And the reason I put this CSS slash is because it's located in the CSS folder 10:54.480 --> 10:57.180 right here, so you have to specify the entire location. 10:58.360 --> 11:01.560 Alright, so let's save that and reload, and now you'll see that it's green. 11:01.780 --> 11:05.700 It's actually looking at this style dot CSS file. 11:06.360 --> 11:08.620 Alright, so that's the recommended way to do it. 11:08.680 --> 11:12.300 And if we wanted to use these styles in another HTML file, all we have to do is 11:12.300 --> 11:13.140 put this in there. 11:14.280 --> 11:18.440 So let's look at a quick diagram of a CSS selector and a declaration. 11:19.200 --> 11:22.020 So this is the basic format. 11:22.260 --> 11:23.620 So we have the selector here. 11:23.680 --> 11:25.080 In this case, we're saying A. 11:25.220 --> 11:27.120 So an A tag is a link. 11:27.340 --> 11:29.440 Okay, we learned that in the HTML crash course. 11:29.960 --> 11:34.160 Now you can use the actual element like this, but what this is going to do is it's 11:34.160 --> 11:36.880 going to apply this style to all links everywhere. 11:37.240 --> 11:40.960 If you wanted to target a certain link, you could use a class or an ID. 11:41.600 --> 11:43.120 Okay, and we'll get into that in a little bit. 11:43.560 --> 11:46.680 And then to start the declaration, we have an opening curly brace. 11:46.740 --> 11:48.740 To end it, we have a closing curly brace. 11:49.160 --> 11:51.620 And then inside there, we have a property and a value. 11:51.900 --> 11:53.880 Okay, so like a key value pair. 11:54.000 --> 11:57.400 The property is going to be, in this case, background color. 11:57.780 --> 12:00.960 And we're going to go over a ton of different properties that are available in 12:00.960 --> 12:01.300 CSS. 12:02.140 --> 12:07.320 Now to separate these, we have our colon here, and then we have the value. 12:07.420 --> 12:09.940 In this case, we're saying the background color should be yellow. 12:10.340 --> 12:13.000 And then you always want to end these with a semicolon. 12:14.140 --> 12:17.300 Alright, so we're going to jump in and start to create some styles here. 12:17.420 --> 12:21.360 Now I'm going to go to the CSS file and get rid of the h1 styling here. 12:21.940 --> 12:25.880 Okay, and then I'm just going to say body and then open up some curly braces. 12:26.540 --> 12:28.580 Alright, so we have our selected here, which is body. 12:28.720 --> 12:32.180 This is going to pertain to the body tag and everything in it. 12:32.700 --> 12:34.840 Okay, well I shouldn't say everything in it. 12:34.900 --> 12:38.960 It's not going to actually change like the background color of every element, 12:38.980 --> 12:41.460 but the body itself, which wraps around everything. 12:41.840 --> 12:44.900 So let's add a background color. 12:45.560 --> 12:50.600 And I'm going to change this to a value, which is going to be a hexadecimal color. 12:50.660 --> 12:51.960 And I'm going to go over this in a second. 12:52.260 --> 12:55.020 But it's going to be number sign F4 three times. 12:55.620 --> 12:59.480 So if we save this and we reload, notice that the background, first of all 12:59.480 --> 13:03.180 the green text went away because we got rid of that style, but the background of 13:03.180 --> 13:04.820 the body is now light gray. 13:05.100 --> 13:07.500 Okay, this is a hexadecimal value for light gray. 13:08.100 --> 13:11.420 Now if we want to change the color of the text, we can use the color. 13:12.100 --> 13:18.480 Okay, so let's say we want color to be the hexadecimal value of six fives, 13:18.520 --> 13:20.080 and that's going to be a dark gray. 13:20.480 --> 13:24.940 Now if I reload, notice that the h1 actually changed to a lighter gray. 13:25.320 --> 13:28.620 So any text we put in by default is now going to be this color. 13:29.660 --> 13:32.140 So just a little bit about colors in CSS. 13:32.440 --> 13:34.480 Now we can use different values here. 13:34.920 --> 13:39.720 So we can use color names, we can use HTML5 color names, hexadecimal values, 13:39.940 --> 13:42.600 and RGB, or red green blue values. 13:43.040 --> 13:45.660 So with this example here, we're using color names. 13:45.820 --> 13:50.420 So color red, we can use blue, yellow, very, you know, common colors. 13:50.620 --> 13:53.780 And then HTML5 added some extra colors here. 13:54.480 --> 13:58.240 Okay, so for instance, coral, which is like a light orange, and there's a lot of 13:58.240 --> 13:58.380 them. 13:58.480 --> 14:01.640 There's misty rose, there's all types of weird colors that you can look up. 14:02.240 --> 14:04.520 All right, now hexadecimal values look like this. 14:04.580 --> 14:08.440 We have the number sign, and then you have a code which pertains to that specific 14:08.440 --> 14:08.900 color. 14:09.400 --> 14:14.600 Okay, six zeros is going to be black, and six F's is going to be white. 14:15.120 --> 14:21.160 You can also use shortcuts and use three characters as well for some of these, 14:21.260 --> 14:22.580 and I'll show you that in a little bit. 14:23.180 --> 14:24.960 And then we can also use RGB values. 14:25.120 --> 14:29.520 So we use RGB, and then some parentheses, and then the value of red, green, 14:29.600 --> 14:30.140 and blue. 14:30.360 --> 14:34.420 Okay, so here we have blue at 255, which is going to make this color a 14:34.420 --> 14:35.400 certain shade of blue. 14:37.040 --> 14:39.900 All right, so back to our HTML and CSS. 14:40.280 --> 14:43.420 Now what I'm going to do is, under the H1, I just want to put in a paragraph. 14:44.200 --> 14:47.920 And in Sublime, we can type in the word lorem and tab, and it'll give us a bunch 14:47.920 --> 14:48.880 of sample text. 14:49.380 --> 14:52.640 All right, we'll reload that, just so we have something else to look at. 14:53.220 --> 14:57.040 So for the body, I'm also going to add... I'm going to change the font. 14:57.420 --> 15:01.960 So let's say font family, and I'm going to say Arial. 15:02.720 --> 15:07.340 And then if for some reason Arial can't load, it's going to load what we put here. 15:07.400 --> 15:08.400 Let's say Helvetica. 15:09.860 --> 15:13.940 And then we're going to do Sans Serif. 15:14.900 --> 15:16.900 All right, so let's save that and reload. 15:17.080 --> 15:19.080 And notice that the font has now changed. 15:20.580 --> 15:26.320 Now in CSS, you have WebSafe fonts, and then you have other fonts, 15:26.400 --> 15:27.000 which you can use. 15:27.160 --> 15:31.700 Now WebSafe fonts means that you don't need to import any kind of special font. 15:31.780 --> 15:33.780 You can just use it, just like we did here. 15:34.260 --> 15:37.720 All right, if you want to use some kind of specialty font from, let's say, 15:37.760 --> 15:41.580 Google Fonts, you'd have to bring that in like you would a style sheet and then 15:41.580 --> 15:42.200 apply it. 15:43.300 --> 15:46.320 All right, so let's take a look at some of the WebSafe fonts. 15:47.180 --> 15:50.740 So here's an example of the different font families that we can use, and we don't 15:50.740 --> 15:53.860 have to import any kind of special font files or anything. 15:54.300 --> 15:58.000 So this is what we use, the Arial Helvetica Sans Serif. 15:58.440 --> 16:05.400 We also have Arial Black, Bookman Old Style, Comic Sans, Courier, which is kind 16:05.400 --> 16:07.520 of like a Microsoft Word type font. 16:08.160 --> 16:12.560 Let's see what else... Georgia, Verdana is pretty nice. 16:12.740 --> 16:13.440 I like Verdana. 16:13.580 --> 16:17.040 I like Tahoma, Times New Roman, which is the default. 16:17.220 --> 16:20.580 If you don't apply a font, that's what the default will be in most browsers. 16:22.220 --> 16:23.260 And that's pretty much it. 16:23.320 --> 16:24.840 So these are the WebSafe fonts. 16:25.360 --> 16:30.760 And when we talk about Serif fonts, you can see that the Serif fonts have the 16:30.760 --> 16:35.700 little hooks on the end here of the letters, and then Sans Serif is kind of a 16:35.700 --> 16:36.400 flat look. 16:37.000 --> 16:39.700 All right, so that's the basic difference between those. 16:40.840 --> 16:45.280 I'm not an expert on fonts or anything like that, but I just wanted to give you 16:45.280 --> 16:47.880 guys an idea of what's considered a WebSafe font. 16:48.580 --> 16:50.680 All right, so let's get back to our CSS. 16:51.060 --> 16:54.340 I'm just gonna make this wrap, so that you guys can see everything. 16:54.520 --> 16:55.620 I'll just do Word Wrap. 16:56.780 --> 16:59.960 And let's go ahead and add... let's change the size of the font. 17:00.080 --> 17:05.380 So for that, we can simply just say font size, and we'll set that to 16 pixels. 17:05.600 --> 17:08.920 And if we save and reload, it's gonna look the same, because that was actually the 17:08.920 --> 17:09.380 default. 17:09.760 --> 17:14.020 But if I wanted to change this to, let's say, 12 pixels, reload, you'll see 17:14.020 --> 17:15.060 it gets much smaller. 17:16.980 --> 17:20.760 All right, now we can also change the font weight from here. 17:20.900 --> 17:25.840 So if we say font weight, we can set that to bold, and reload, and it'll make 17:25.840 --> 17:26.500 everything bold. 17:26.600 --> 17:28.680 You can also use numbers, like 400. 17:29.800 --> 17:32.840 You can change the the boldness with the number as well. 17:33.580 --> 17:37.340 But we're gonna keep this at normal, okay, by default. 17:39.300 --> 17:43.680 Now there's actually a shorter way to do this when you're dealing with these font 17:43.680 --> 17:44.920 dash styles here. 17:45.180 --> 17:50.780 We can actually just use font, and then we could say normal for the font 17:50.780 --> 17:56.920 weight, and then we could do the font family, which would be Arial, Helvetica, 17:58.660 --> 18:02.600 Sans Serif, and then we can just put the the font. 18:03.040 --> 18:07.380 Actually, let's put the size here, so 16 pixels. 18:08.420 --> 18:12.900 All right, and then if I get rid of these three, and reload, we get the same thing. 18:13.020 --> 18:15.080 Okay, so it's just a shorter way of doing it. 18:15.740 --> 18:19.560 And let me just put a little comment here, and I'm just gonna say, same as above. 18:21.960 --> 18:26.340 All right, and you know, I'm leaving all this stuff here so you guys have this as a 18:26.340 --> 18:26.660 reference. 18:26.660 --> 18:30.780 Normally you wouldn't have both of these, but I want you guys to have this if you 18:30.780 --> 18:31.680 need it later on. 18:32.660 --> 18:37.660 Okay, another common style you'll see within the body is the line height. 18:39.040 --> 18:44.160 Okay, now notice that these, to me, these lines look pretty close together, 18:44.160 --> 18:46.900 so I'd want to kind of separate them just a little bit. 18:47.200 --> 18:53.460 So what I'm gonna do here is say 1.6 M, or EM, and let's save that and reload. 18:53.540 --> 18:56.740 And now notice that there's there's more space in between the lines. 18:58.100 --> 18:59.700 All right, that's what line height does. 19:00.800 --> 19:05.280 Now EM, or M, is is just a unit to use in in CSS. 19:05.500 --> 19:08.060 It's usually used for more responsive type websites. 19:08.680 --> 19:13.800 You could just make this pixels as well, so if we wanted to say three pixels for 19:13.800 --> 19:17.900 the line height, you'll see that there's only three pixels in between, which makes 19:17.900 --> 19:18.620 it unreadable. 19:19.200 --> 19:22.500 But you can do that, but we're gonna stick to EM. 19:22.620 --> 19:24.580 Usually you'll see M for line heights. 19:26.080 --> 19:29.960 All right, so what I'm going to do now is is just add a little bit of HTML over 19:29.960 --> 19:31.080 here, some more HTML. 19:31.400 --> 19:36.300 So let's go... actually, you know what we'll do is we'll wrap the H1 and the 19:36.300 --> 19:40.260 paragraph in a div, and let's give that a class. 19:41.880 --> 19:45.540 We'll give that a class of, let's say, box-1. 19:46.460 --> 19:49.840 Okay, so wrap the paragraph and the heading. 19:50.500 --> 19:52.240 Okay, we'll push that over a little bit. 19:53.980 --> 19:57.120 I don't like how... yeah, I'm just gonna make this a little bigger. 19:59.180 --> 20:02.800 So let's talk a little bit about the difference between class and ID. 20:03.220 --> 20:07.140 Now as far as the browser goes and enforcing rules, ID and class, 20:07.220 --> 20:10.180 really there's no difference when it comes to HTML and CSS. 20:10.940 --> 20:18.280 But what you want to do is you want to think of IDs as elements that are IDs that 20:18.280 --> 20:20.220 aren't going to be put anywhere else. 20:20.360 --> 20:21.180 They're going to be unique. 20:21.700 --> 20:25.820 So for instance, if you have a main navbar, you might give that an ID of main 20:25.820 --> 20:29.600 navbar because you're not going to be using that main navbar ID on any other 20:29.600 --> 20:30.020 element. 20:30.560 --> 20:36.100 But if you're using something like, let's say, class box-1 where you we're 20:36.100 --> 20:40.500 going to give this a background color and a border and stuff, you may use this box-1 20:40.500 --> 20:43.700 somewhere else because you may want to apply that style. 20:44.240 --> 20:45.460 So it's not unique. 20:45.760 --> 20:46.940 So you would use a class. 20:47.080 --> 20:52.740 If you had a class that made text red or something like that, you would want to use 20:52.740 --> 20:54.680 a class because you may use that somewhere else. 20:54.900 --> 20:57.360 So just remember that IDs should always be unique. 20:58.020 --> 21:00.320 Classes, you can reuse classes. 21:00.960 --> 21:05.280 Alright, and if you don't want to follow that standard, I would suggest just always 21:05.280 --> 21:06.200 using classes. 21:06.940 --> 21:10.460 You'll notice that with frameworks like Bootstrap, they don't use IDs for 21:10.460 --> 21:10.720 anything. 21:10.800 --> 21:11.600 It's all classes. 21:11.760 --> 21:13.580 You just don't want to repeat IDs. 21:13.820 --> 21:15.020 That's the bottom line. 21:15.920 --> 21:18.820 Alright, so we have this div with the class of box-1. 21:19.020 --> 21:20.380 So let's go ahead and save this. 21:20.520 --> 21:21.800 And then we'll go into our styling. 21:23.180 --> 21:25.060 And let's see, I'll just make this smaller. 21:25.900 --> 21:28.720 So to target a class, we use a dot. 21:28.880 --> 21:30.620 So remember we called it box-1. 21:30.760 --> 21:32.760 So we're going to say dot box-1. 21:34.020 --> 21:39.360 Alright, now what I'm going to do here is I'm going to add a background color first 21:39.360 --> 21:39.760 of all. 21:40.000 --> 21:42.280 So let's say background-color. 21:43.260 --> 21:48.700 And let's set it to like almost black, a dark gray, which is going to be 3, 21:48.880 --> 21:49.720 6 times. 21:50.000 --> 21:52.660 Now this is one of those colors where we can use a shortcut. 21:53.020 --> 21:56.540 Okay, we can actually use just three threes and it'll give us the same color. 21:57.320 --> 21:59.380 Alright, so let's save that and reload. 21:59.540 --> 22:03.480 And notice that the background is now a dark gray. 22:04.620 --> 22:08.980 Oh, one thing I also wanted to do was on the body, I want to zero out the margin. 22:09.140 --> 22:11.940 And I'm going to go over margin later on, so don't worry about that. 22:11.980 --> 22:13.700 But I'm just going to set margin to zero. 22:14.240 --> 22:16.740 And that'll get rid of these spaces around it. 22:16.820 --> 22:21.960 Okay, except for the top because headings actually have margin by default. 22:23.080 --> 22:27.140 Alright, so we have this box-1 with a background color of dark gray, 22:27.240 --> 22:27.920 almost black. 22:28.200 --> 22:31.320 So we want to change the text color because it's almost unreadable. 22:31.440 --> 22:34.100 So we're going to say color and let's set that to white. 22:34.240 --> 22:37.960 Now we could do the text white, but I prefer to use hexadecimal. 22:38.120 --> 22:40.740 So I'm going to say number sign and then three F's. 22:41.040 --> 22:43.540 Okay, or six F's, whatever you want. 22:44.400 --> 22:46.160 Reload and now the text is white. 22:47.260 --> 22:50.020 Now I would like to push everything in from the edges. 22:50.340 --> 22:53.840 And you'll see this a lot usually with websites, the content will be pushed in. 22:53.900 --> 22:55.760 It's not going to go all the way up to the edge. 22:56.280 --> 22:58.560 So what we can do is create a class. 22:59.600 --> 23:02.740 I'm just going to put it right here and let's call it container. 23:03.180 --> 23:06.720 If you've ever used Bootstrap or other frameworks, you've probably seen this 23:06.720 --> 23:07.260 quite a bit. 23:07.820 --> 23:09.420 And we can set this to a width. 23:09.760 --> 23:12.660 Okay, so for right now I'm just going to say 500 pixels. 23:13.520 --> 23:18.180 Alright, and then let's go ahead and save that and then let's apply that container. 23:19.400 --> 23:21.520 So let's wrap it around the box. 23:22.300 --> 23:24.380 Actually I'm going to have this wrapped around everything. 23:29.900 --> 23:33.800 Okay, so we'll go down here and put the ending div tag. 23:33.960 --> 23:34.860 Let's tab it over. 23:36.080 --> 23:41.420 Alright, so if we save that and reload, you'll see that it's now 500 pixels wide. 23:41.820 --> 23:44.940 Now with containers, like I said, you want to usually want to push it to the 23:44.940 --> 23:45.160 middle. 23:45.480 --> 23:50.740 So to do that we're going to just say margin and we're going to set it to auto. 23:51.260 --> 23:53.300 And what this does is it sets margin. 23:53.480 --> 23:55.520 It sets an auto margin on all sides. 23:55.620 --> 23:57.800 Okay, it's going to set it to the same on all sides. 23:57.820 --> 24:00.800 So let's save that and reload and it gets pushed over. 24:01.040 --> 24:05.280 It puts an even amount of margin on this side and this side. 24:05.440 --> 24:08.080 And margin is basically spacing around an element. 24:09.480 --> 24:14.340 Now setting it to 500 pixels, actually you probably wouldn't see 500. 24:14.620 --> 24:19.360 You might see like 960 as a popular width for a website. 24:19.960 --> 24:21.000 Okay, something like that. 24:21.320 --> 24:23.680 But this makes it so it's not responsive. 24:23.860 --> 24:27.760 If I make it smaller, you can see that it's not responsive. 24:27.960 --> 24:30.120 It's not adapting correctly. 24:30.580 --> 24:33.900 So what we would do is set it to a percentage instead of pixels. 24:34.140 --> 24:35.920 So I'm going to set it to 80%. 24:35.920 --> 24:37.800 Okay, and then reload. 24:37.980 --> 24:40.940 And then as I make it smaller, you'll see that it actually responds 24:40.940 --> 24:42.400 correctly to the size. 24:42.700 --> 24:46.720 So for the most part, you want to use percents when you're dealing with 24:46.720 --> 24:48.940 containers or something like that. 24:49.580 --> 24:52.160 Alright, so now let's talk about margin and padding. 24:52.760 --> 24:57.200 So a lot of people get confused at first with margin and padding because both of 24:57.200 --> 24:59.840 them pertain to space around an element. 25:00.480 --> 25:02.720 So I'm going to try to explain that the best I can. 25:03.080 --> 25:05.500 So there's something called the box model in CSS. 25:05.920 --> 25:09.680 And think of this content block as whatever your element is, whether it's a 25:09.680 --> 25:14.840 div, or an a tag link, or a paragraph, a heading, anything at all. 25:15.220 --> 25:21.560 And padding is going to be the space in between that element and its border. 25:21.740 --> 25:22.800 Okay, its edge. 25:23.140 --> 25:27.940 So that padding, you can set the top, the right, the bottom, or the left padding 25:27.940 --> 25:29.140 to whatever you want. 25:29.580 --> 25:30.920 Okay, and it'll add that space. 25:31.580 --> 25:35.980 Now the border has to do with the border property, and you're not always going to 25:35.980 --> 25:40.260 be using this, but you can set the border width, you can set that to the width, 25:40.400 --> 25:42.220 and you can do top right, bottom left. 25:42.580 --> 25:45.700 And then margin is going to be the spacing outside of that border. 25:46.260 --> 25:50.760 Okay, so just remember padding is the space inside, margin is the space outside. 25:52.240 --> 25:56.780 Now when we're applying styles to, or when we're applying padding and margin, 25:57.480 --> 25:59.120 there's different ways to do it. 25:59.300 --> 26:01.720 Okay, there's the long way, and there's the short way. 26:01.840 --> 26:05.040 Now in this example, we're using margin for this paragraph. 26:05.620 --> 26:10.280 So we're saying we want the margin top to be 5 pixels, the margin bottom 5, 26:10.400 --> 26:13.980 the margin right to be 10, and the margin left to be 10. 26:14.060 --> 26:18.620 So if we look at our box model here, it is the top and bottom margin that we 26:18.620 --> 26:19.520 want to be 5. 26:19.600 --> 26:23.240 So it would be this and this, and then the left and right would be 10. 26:23.940 --> 26:28.640 Okay, now over here we have this same thing in a shorter syntax. 26:29.120 --> 26:32.660 So instead of doing margin top, margin bottom, and so on, we can just say 26:32.660 --> 26:38.300 margin, and then we can do top, top right, bottom left. 26:38.500 --> 26:40.140 Okay, that's that's what you need to remember. 26:40.280 --> 26:41.720 Top right, bottom left. 26:42.280 --> 26:50.240 And you'll see top 5, whoops, top 5, right 10, bottom 5, left 10. 26:50.720 --> 26:54.920 Alright, now to take it a step even, you know, to make it even shorter, 26:55.280 --> 26:59.240 if the top and bottom are the same, and the right and left are the same, 26:59.680 --> 27:04.900 okay, such as in this case, top and bottom are 5, left and right are 10, we can do 27:04.900 --> 27:05.380 this. 27:05.540 --> 27:10.720 And we can say 5 for the top and bottom, 10 for the left and right. 27:11.340 --> 27:12.900 Okay, so that's a shorter syntax. 27:13.020 --> 27:16.360 And then of course, if they're all equal, you can just do margin 5 pixels, 27:16.640 --> 27:19.140 and that'll add 5 pixels around the entire thing. 27:19.600 --> 27:21.800 And you can use this same format with padding. 27:21.920 --> 27:25.280 You can do padding top, padding bottom, and then same thing over here, 27:25.320 --> 27:26.500 you can just use padding. 27:27.080 --> 27:31.340 Alright, so what I'm going to do now is I'm going to add a border to this, 27:31.360 --> 27:34.500 just so we can see the difference between padding and margin more clearly. 27:34.860 --> 27:41.940 So for a box 1 here, let's go ahead and let's say border right, okay, and we're 27:41.940 --> 27:47.020 going to set that to 5 pixels, red, okay, so it's size, color, 27:47.260 --> 27:50.560 and then type or style, which I'll say solid. 27:50.900 --> 27:56.020 So let's go ahead and save that and reload, and you'll see that on the right 27:56.020 --> 27:58.480 we have a 5 pixel red solid border. 27:59.400 --> 28:05.680 Alright, now if we wanted to add borders on other sides, let's say we wanted to do 28:05.680 --> 28:10.560 left, okay, so if I save that, it's going to add it on the right and 28:10.560 --> 28:16.920 left, and of course we could do top and bottom. 28:17.800 --> 28:21.520 Alright, and that's just going to give it a 5 pixel border around the whole entire 28:21.520 --> 28:21.960 thing. 28:22.700 --> 28:26.240 Now, just like with margin and padding, there's there's shorthands. 28:26.340 --> 28:31.200 You don't have to do all of this if you want them all to be the same, okay. 28:31.240 --> 28:37.480 So what we could do is we could just say border, and then we could say 5 pixels, 28:38.300 --> 28:40.540 red, solid. 28:41.640 --> 28:45.720 Okay, and then if we got rid of all of this and saved it, reload, we get the same 28:45.720 --> 28:46.040 thing. 28:46.140 --> 28:50.080 So this is what you would want to do instead of this, but I'm going to keep it 28:50.080 --> 28:51.980 there again just so you guys have it. 28:52.280 --> 28:54.220 Let's say same as above. 28:56.040 --> 29:00.520 Alright, now you can also target specific border properties like the size, 29:00.800 --> 29:03.920 the color, and the style. 29:04.340 --> 29:07.280 So let's say, for instance, we wanted to change the width. 29:07.400 --> 29:12.520 We could say border-width and set it to 3 pixels. 29:13.040 --> 29:16.620 And if we reload, that's going to set all sides to 3 pixels. 29:17.100 --> 29:22.440 If we wanted to, let's say, just target the width of the border bottom, 29:24.980 --> 29:33.000 we could say border-bottom-width, and let's just set that to 10 pixels. 29:34.320 --> 29:36.400 Okay, so we can target it like that. 29:37.060 --> 29:38.880 We can also do styles. 29:39.160 --> 29:49.200 So if we wanted to say like border, let's do border-top-style, and we'll set 29:49.200 --> 29:50.140 that to dotted. 29:51.180 --> 29:54.000 So if I reload, now you see the top border is dotted. 29:54.460 --> 30:01.380 And I believe there's solid, dotted, dashed, double... I think there may be a 30:01.380 --> 30:03.480 couple others, so if you want to look that up, you can. 30:03.620 --> 30:06.960 But for the most part, at least for me, I usually use solid. 30:08.160 --> 30:12.420 Alright, now I want to keep this very simple, and I just want to have this. 30:13.920 --> 30:17.000 So I'm going to put that right there, and that should overwrite everything. 30:17.460 --> 30:20.680 Okay, but again, I am going to leave all this just so you guys have it. 30:22.980 --> 30:24.520 So now let's look at padding. 30:25.040 --> 30:32.360 Okay, so in here, let's say padding, we'll say padding-top, and we'll set that 30:32.360 --> 30:33.800 to 20 pixels. 30:35.220 --> 30:37.060 Reload, and you'll see that it adds it to the top. 30:37.160 --> 30:41.420 Now, there was initially some padding here, because an H1 by default has 30:41.420 --> 30:41.840 padding. 30:42.380 --> 30:47.240 Now, if you wanted to, you could zero out the margin and padding for everything on 30:47.240 --> 30:48.940 the page, and let me show you how to do that. 30:49.360 --> 30:54.160 So if we go up to the very top here, and we put an asterisk, this is basically 30:54.160 --> 30:55.200 saying everything. 30:55.580 --> 31:01.260 So every element, every style, and we'll set this to margin-zero, 31:01.980 --> 31:05.440 padding-zero, and that'll zero everything out. 31:05.500 --> 31:06.440 That's called a reset. 31:06.880 --> 31:12.460 Okay, so if we reload now, the H1 and the paragraph, you'll see they don't have any 31:12.460 --> 31:13.920 margin or padding by default. 31:14.020 --> 31:18.120 So you may want to add a reset if you want to just zero everything out and go from 31:18.120 --> 31:22.480 there without any confusion of having, you know, initial padding and margin on 31:22.480 --> 31:23.360 certain elements. 31:23.780 --> 31:28.220 So it's completely up to you if you want to do that, but I'm actually just going to 31:28.220 --> 31:31.960 comment this out so it doesn't take effect. 31:33.380 --> 31:38.580 Alright, so we have some padding on the top, but what I want to do is add padding 31:38.580 --> 31:39.300 all around. 31:39.600 --> 31:46.300 So what I could do is we could do it the long way. 31:46.600 --> 31:54.080 So we could say bottom-right-left. 31:54.620 --> 31:58.100 Okay, we could do that, but you don't want to do that. 31:58.220 --> 32:02.160 Especially if it's going to be 20 pixels or no matter what size on any side, 32:02.360 --> 32:03.560 you just want to use padding. 32:04.000 --> 32:06.340 Okay, so we'll say padding 20 pixels. 32:07.400 --> 32:12.580 And let me just put a comment here, and I'm just going to say same as above. 32:17.150 --> 32:22.410 Alright, now margin on the other hand is going to be the space outside of the 32:22.410 --> 32:22.730 border. 32:23.210 --> 32:28.470 Alright, so let's say we want to add margin top and we'll say 20 pixels. 32:28.870 --> 32:32.530 What that should do is move the entire thing down because it's going to add space 32:32.530 --> 32:33.090 above it. 32:33.890 --> 32:41.910 Okay, and again we can do this with margin or we could just say margin 20 pixels and 32:41.910 --> 32:43.570 that's going to put it all the way around. 32:44.010 --> 32:47.490 Okay, you'll see that it actually got skinnier because it added 20 pixels here. 32:48.150 --> 32:50.950 But let's say we just wanted the margin on the top and bottom. 32:51.150 --> 32:54.730 We could do 20 pixels and then 0 for the right and left. 32:55.650 --> 32:57.750 Alright, reload, and there we go. 32:59.830 --> 33:03.810 Alright, so now I want to move on to some text formatting styles. 33:03.930 --> 33:08.010 So what I'm going to do is I'm going to target the box1 h1. 33:08.950 --> 33:13.410 Okay, so this is saying that I want to style any h1 that is within this class. 33:13.590 --> 33:16.610 Okay, it's not going to style any h1 that's not in this class. 33:17.550 --> 33:20.850 So let's start with... let's just change the font family. 33:21.210 --> 33:24.410 Okay, so we don't have to have one font family for the whole site. 33:24.450 --> 33:25.910 Let's say we want to use Tahoma. 33:27.190 --> 33:30.010 Reload, and I see that this is now a Tahoma font. 33:31.130 --> 33:35.690 Let's say we want to change the font weight to 800. 33:37.330 --> 33:39.730 And let's say we want it to be italic. 33:39.850 --> 33:44.210 We could say font style, set that to italic. 33:44.970 --> 33:46.750 And if we reload, there we go. 33:47.490 --> 33:55.370 So we have font weight, font style, we have text decoration, which we could do 33:55.370 --> 33:58.910 a underline if we wanted to. 33:59.210 --> 34:00.550 Okay, that gives it an underline. 34:01.110 --> 34:06.290 If we wanted to change it to all uppercase, we could use the text transform 34:06.290 --> 34:09.210 and say uppercase. 34:10.270 --> 34:11.090 Okay, reload. 34:11.250 --> 34:12.450 Now it's all uppercase. 34:13.250 --> 34:15.030 Let's see what else... letter spacing. 34:16.690 --> 34:21.350 So if we want to put space between the letter, this would usually be with the M 34:21.350 --> 34:21.690 unit. 34:21.850 --> 34:24.730 So let's say 0.2 M. 34:25.790 --> 34:29.370 And now reload, and now you see there's space between each letter. 34:29.650 --> 34:31.390 And then we also have word spacing. 34:33.350 --> 34:36.770 Say word spacing, and we'll say 1 M. 34:38.230 --> 34:41.470 Reload, and you'll see that now there's more space between each word. 34:41.530 --> 34:43.750 So these are just some text formatting styles. 34:45.310 --> 34:48.650 Alright, let's go ahead and put another box on the page just to add some more 34:48.650 --> 34:49.030 HTML. 34:49.270 --> 34:50.530 So I'm going to copy box 1, 34:54.020 --> 34:55.920 and we'll change this to box 2. 34:57.720 --> 34:59.620 And that's fine. 34:59.660 --> 35:01.040 We'll leave the same text, I guess. 35:01.880 --> 35:02.400 Reload. 35:02.620 --> 35:03.720 Actually, we'll change the heading. 35:03.940 --> 35:08.280 We'll say goodbye world. 35:09.700 --> 35:15.020 Alright, now notice that we don't have any styling because we're now using a box 2 35:15.020 --> 35:16.520 class, not box 1. 35:16.520 --> 35:21.040 If we change this to box 1, of course it's going to apply those styles. 35:21.840 --> 35:23.340 But let's change it to box 2. 35:24.320 --> 35:27.780 And then in the CSS, we'll just say box 2. 35:29.400 --> 35:32.700 And let's see, I don't want to add a bunch of crazy styles. 35:32.860 --> 35:34.460 Let's just give it a border. 35:35.580 --> 35:37.580 And let's say we want it to be 3 pixels. 35:38.080 --> 35:39.020 And we'll do dotted. 35:40.180 --> 35:41.980 And let's do like a light gray. 35:44.120 --> 35:44.600 Reload. 35:44.660 --> 35:45.700 Okay, so now we have a border. 35:45.880 --> 35:50.600 Let's add padding, 20 pixels. 35:51.000 --> 35:58.020 And let's say margin, let's do 20 pixels top and bottom, 0 left and right. 35:58.740 --> 36:02.060 Okay, so it adds some padding and also added margin on the top and bottom. 36:03.260 --> 36:08.500 So next thing I'm going to do is let's add some unordered list. 36:08.980 --> 36:10.780 Alright, so let's go back to our HTML. 36:11.240 --> 36:12.520 We'll go under box 2. 36:14.800 --> 36:16.460 And let's put a div. 36:16.580 --> 36:20.380 We'll give it a class of, let's say, categories. 36:22.420 --> 36:24.240 And let's put an h2. 36:25.140 --> 36:26.540 We'll say categories. 36:29.180 --> 36:32.580 And let's put a ul with some li's. 36:33.160 --> 36:36.740 Okay, each li will have an a tag, which will just go nowhere. 36:37.720 --> 36:39.540 We'll say category 1. 36:42.430 --> 36:45.330 I'm just gonna go like that. 36:45.390 --> 36:48.810 We'll say category 1, 2, 3, and 4. 36:50.210 --> 36:51.830 Alright, so now we have a simple list. 36:51.890 --> 36:55.290 This is what it will look like by default with no CSS. 36:56.090 --> 36:58.990 So now let's go over to our style.css file. 36:59.970 --> 37:03.670 And let's apply some styles to categories. 37:04.710 --> 37:07.910 Remember, categories is actually the div that surrounds this. 37:07.930 --> 37:09.750 It's not the actual list itself. 37:10.370 --> 37:11.490 Okay, and that's what I mean. 37:11.530 --> 37:15.270 With CSS, you can do the same thing a million different ways. 37:15.350 --> 37:17.490 We could have put the class on the actual ul. 37:18.290 --> 37:22.690 But you know, you'll find your way of doing things. 37:23.270 --> 37:31.370 So let's just give it a border of 1 pixel, 1 pixel, light gray, solid. 37:32.610 --> 37:37.670 And then we'll just give it a padding of 10 pixels all the way around. 37:38.790 --> 37:41.010 Okay, and it's gonna just go around the whole thing. 37:41.530 --> 37:46.490 There's also a border radius property that we could use. 37:46.590 --> 37:48.510 And that can give it rounded corners. 37:48.690 --> 37:51.610 So let's say 15 pixels and reload. 37:51.750 --> 37:54.390 And now notice that this box has curved edges. 37:56.050 --> 37:58.910 All right, let's see what else. 37:59.550 --> 38:00.390 Text align. 38:00.930 --> 38:02.890 So that's something you might use a lot. 38:03.050 --> 38:09.070 So let's say categories, categories, and I think it was was it an h1 we gave 38:09.070 --> 38:09.330 it? 38:10.190 --> 38:10.910 An h2. 38:11.070 --> 38:13.570 So let's say we want the h2 to be aligned to the center. 38:14.110 --> 38:18.170 So we'll say text align center. 38:19.330 --> 38:21.310 Reload and now you'll see it's in the middle. 38:22.450 --> 38:26.530 All right, let's apply some styles to the ul and the li tags. 38:27.350 --> 38:29.710 So we'll say categories ul. 38:30.930 --> 38:34.510 Now uls by default have some padding. 38:34.770 --> 38:36.950 You'll see that pushed over, I think it's like 40 pixels. 38:37.690 --> 38:42.710 So let's actually zero that out by saying padding zero. 38:43.450 --> 38:45.930 Okay, if we reload and you'll see that it gets rid of that. 38:46.790 --> 38:50.950 You can also change the bullet points if you want by using list style. 38:51.690 --> 38:57.950 So if we say list style square and reload, now there's still squares. 38:58.250 --> 39:02.550 You can also completely get rid of them by saying list style none. 39:03.530 --> 39:05.730 Okay, reload and now it doesn't have any. 39:07.150 --> 39:10.650 All right, now before we get to the styling the li tags, let's talk a little 39:10.650 --> 39:13.790 bit about links because links actually have different states. 39:14.430 --> 39:19.490 Now I could say categories a to just just target the links in the in the categories, 39:19.710 --> 39:23.830 but I'm actually going to go up top here and apply global styles to the links. 39:23.990 --> 39:24.690 So just a. 39:24.990 --> 39:27.630 So this will apply to any link on the page. 39:28.150 --> 39:30.730 So let's start by getting rid of the underline. 39:31.030 --> 39:34.230 So we'll say text decoration none. 39:34.530 --> 39:36.830 Okay, that's going to get rid of that annoying underline. 39:37.430 --> 39:40.890 And you probably want to change the color because the default blue is really ugly. 39:41.130 --> 39:42.610 So let's change it to black. 39:44.130 --> 39:46.250 Okay, so now you can see the links are black. 39:46.510 --> 39:48.530 Now as I said, they have different states. 39:48.670 --> 39:49.690 So they have a hover state. 39:49.790 --> 39:52.170 So we can say a colon hover. 39:53.170 --> 39:57.690 And let's say we want to change the color to red when they're hovered. 39:57.690 --> 39:58.510 So reload. 39:58.870 --> 40:01.290 Now when I hover over each link, it turns red. 40:02.370 --> 40:04.530 There's also an active state. 40:06.590 --> 40:06.850 Oops. 40:07.830 --> 40:10.110 And active, let's make it green. 40:10.750 --> 40:15.430 Active is just when you click on it, it just flashes real quick. 40:15.510 --> 40:18.010 You see how it turns green for a second when I click on it? 40:18.110 --> 40:19.810 That that's meaning it's active. 40:20.530 --> 40:23.670 All right, we also have a visited state. 40:23.790 --> 40:29.610 So if we say visited, and let's say color yellow. 40:30.610 --> 40:35.110 Okay, now if I reload, they're all going to turn yellow because we did visit all of 40:35.110 --> 40:35.370 these. 40:35.470 --> 40:42.410 But if we were to add another one, let's say category five and save, 40:42.510 --> 40:42.930 reload. 40:43.930 --> 40:47.510 Well, I guess that's... oh, you know what? 40:47.570 --> 40:49.090 Let's let's make it go somewhere else. 40:49.170 --> 40:51.130 We'll say test.html. 40:52.590 --> 40:56.710 Okay, so now it's black because it goes by the actual location. 40:57.010 --> 41:00.630 But if I click on that, obviously that goes nowhere because it's a blank page. 41:00.810 --> 41:06.250 But if we go back and reload, well, I guess it doesn't work because it's not 41:06.250 --> 41:07.310 an actual page. 41:08.850 --> 41:09.010 Hmm. 41:09.150 --> 41:13.510 So I guess, I mean, if we created a test .html, that that should turn yellow. 41:13.930 --> 41:18.930 I honestly haven't... I can't remember the last time I used visited, but just so you 41:18.930 --> 41:20.390 guys know, you can do that. 41:21.070 --> 41:26.790 All right, so let's go back down to our categories, and let's get rid of that 41:26.790 --> 41:27.630 style, actually. 41:27.690 --> 41:29.190 I don't want the visited to be yellow. 41:29.410 --> 41:30.550 Let's make it black. 41:34.090 --> 41:39.450 All right, so now let's say categories .lis. 41:41.530 --> 41:45.050 And for the li, let's add a little bit of padding to the bottom. 41:45.870 --> 41:47.850 So we'll say 8 pixels. 41:48.510 --> 41:50.950 And let's actually add a border to the bottom. 41:52.890 --> 41:59.410 We'll say dotted 1 pixel, and let's say 333 for the color. 42:00.090 --> 42:03.210 We'll reload, and now it looks something like that. 42:04.350 --> 42:08.230 All right, let's actually do not 8 pixels. 42:08.290 --> 42:09.310 We'll do 6. 42:10.890 --> 42:17.410 All right, now for the bullet points, you can do this list style. 42:17.530 --> 42:19.670 You can do it on either the ul or the li. 42:20.230 --> 42:23.670 And then we also have this list style image. 42:24.390 --> 42:28.310 Okay, and you can actually set this to an image like you would set a background 42:28.310 --> 42:29.750 image, which I'll get into later. 42:29.870 --> 42:36.510 So let's say URL, and we'll say images check.png. 42:36.930 --> 42:40.950 All right, and what I'm going to do is grab an image. 42:41.070 --> 42:48.490 Let's say checkmark images, and let's grab this checkmark right here. 42:49.150 --> 42:54.730 And I'm just going to save it as check .png, and we're going to save it in our 42:54.730 --> 42:55.430 desktop. 42:57.610 --> 43:02.050 CSS crash course, CSS cheat sheet, and I'm going to create a folder called 43:02.050 --> 43:02.590 images. 43:04.270 --> 43:08.050 Okay, and then in there we'll save it, and then let's go to our site and reload. 43:08.630 --> 43:13.590 And notice that it uses the actual size of the image, so I'm going to make that 43:13.590 --> 43:14.110 smaller. 43:14.650 --> 43:16.590 Okay, and you can do that however you want. 43:16.690 --> 43:18.550 I'm just going to open it with Photoshop. 43:19.470 --> 43:21.370 Let's see, is this the right folder? 43:23.250 --> 43:23.650 Desktop. 43:26.890 --> 43:30.010 All right, so I'm just going to open this real quick, and like I said, you can 43:30.010 --> 43:31.550 resize it however you want. 43:32.290 --> 43:35.550 I'm just giving you an example of what I do to resize images. 43:35.790 --> 43:41.530 So I'm just going to go to, let's see, image size, change it to 10 pixels, 43:42.350 --> 43:49.010 and then I'm just going to re-save it as a PNG file. 43:49.230 --> 43:49.610 Save. 43:50.290 --> 43:53.090 So now it should be 10 pixels. 43:53.250 --> 43:57.610 So let's reload, and now you can see we have little checks next to our categories. 43:58.850 --> 44:01.850 All right, and you may want to push this over a little bit if you're going to use 44:01.850 --> 44:04.430 bullet points, because we set the padding to zero. 44:04.930 --> 44:12.350 But let's say we just want to say padding left 20 pixels, and that'll push it over. 44:13.430 --> 44:15.690 All right guys, so we're starting to run out of time. 44:15.850 --> 44:19.510 I still want to get to the layout page, so this may be a little longer than an 44:19.510 --> 44:19.730 hour. 44:19.910 --> 44:24.130 But let's move on to forms, okay, because forms are very ugly by default. 44:25.150 --> 44:28.570 And we want to stay within the container, which ends right here. 44:28.610 --> 44:33.970 I'm actually going to put a comment here, oops, just letting us know that this is 44:33.970 --> 44:37.130 where the container ends, because we want to stay within it. 44:38.410 --> 44:45.690 All right, so let's go ahead and put in a form, and I'm actually going to just paste 44:45.690 --> 44:46.870 all the fields in. 44:47.010 --> 44:48.110 Let me just make this bigger. 44:48.730 --> 44:58.640 So basically what I did, just tab this back, basically what I did is I created a 44:58.640 --> 45:01.980 couple fields and I wrapped them in a div with the class of form group. 45:02.440 --> 45:05.780 Okay, if you've used bootstrap before, this is actually the class they use. 45:06.300 --> 45:08.600 And then we have the label, and we have the input. 45:08.800 --> 45:12.680 So we have a name, email, and then a text area, which is a message, and then a 45:12.680 --> 45:14.280 simple submit button. 45:14.960 --> 45:18.520 All right, so let's save that, see what it looks like by default. 45:18.920 --> 45:20.500 Okay, so it looks pretty damn ugly. 45:21.520 --> 45:24.400 Now, you know, I don't want you guys to have to look at the very bottom of the 45:24.400 --> 45:28.880 screen, so let me just really quickly, I'm going to put a div in here and just 45:28.880 --> 45:36.120 give it an inline style of margin top 500 pixels, just to push everything down, 45:36.260 --> 45:37.280 or push everything up. 45:38.180 --> 45:43.560 All right, so let's go ahead and start to make this form look a little better. 45:43.560 --> 45:45.140 So we're going to go to our style CSS. 45:47.120 --> 45:49.340 Actually, let's give the form a class. 45:50.500 --> 45:54.040 So we'll say class my form. 45:55.620 --> 45:59.800 All right, and then in here, we're going to target my form. 46:00.820 --> 46:04.300 And first of all, I'm just going to add some padding, we'll say 20 pixels, 46:04.440 --> 46:06.220 that'll be around the entire form. 46:07.820 --> 46:14.420 Okay, and then let's let's separate the the form group a little bit each field. 46:15.400 --> 46:17.600 So remember, we gave it a class of form group. 46:19.120 --> 46:24.340 So we're just going to add some padding bottom of 15 pixels. 46:25.060 --> 46:26.720 Okay, that'll separate it a little bit. 46:27.800 --> 46:32.700 Now for the label, labels are inline, that's why they're on the same level, 46:32.700 --> 46:34.040 same level as the input. 46:34.220 --> 46:35.840 Okay, inputs and labels are inline. 46:36.000 --> 46:39.920 I want this to be on a separate line without having to put an actual line break 46:39.920 --> 46:40.260 in. 46:40.580 --> 46:42.500 So what I'm going to do is I'm going to set the label. 46:43.840 --> 46:48.840 Actually, no, we should be putting my form before all of these like that. 46:49.200 --> 46:52.680 All right, we'll say my form label. 46:53.560 --> 46:57.720 And then I'm going to display that even though it's inline, we can set it to be a 46:57.720 --> 46:58.240 block. 46:58.580 --> 47:02.740 Okay, and remember block level elements, they'll, they'll put it on a new line, 47:02.760 --> 47:04.600 and they go across entire line. 47:04.800 --> 47:08.880 So if we save, now you'll see that labels are on their own line. 47:09.440 --> 47:12.060 Now let's make these text inputs look a little better. 47:12.760 --> 47:16.540 So we'll say my form input. 47:18.020 --> 47:21.740 And let's add some padding to make them look a little thicker. 47:22.280 --> 47:24.040 So we'll say eight pixels. 47:24.400 --> 47:28.360 And then let's also set the width to be 100% of its container. 47:29.460 --> 47:30.060 So reload. 47:30.780 --> 47:37.240 Now, a couple things here, notice that since we said just input, that's going to 47:37.240 --> 47:40.700 pertain to any input, even the button, which is also an input. 47:40.980 --> 47:44.720 If we had, let's say a radio button, it would pertain to that as well. 47:45.220 --> 47:49.500 And it didn't target this because this is actually a text area, it's not an input 47:49.500 --> 47:49.900 tag. 47:50.420 --> 47:54.620 Now what we could do is we can target certain types of inputs. 47:54.860 --> 47:56.520 So these are both text, right? 47:57.000 --> 48:02.600 So what we can do is put a set of brackets here and we can say type equals text. 48:03.100 --> 48:07.820 And then what that's going to do, when I reload, it should disregard the 48:07.820 --> 48:09.960 button because that's not the type of text. 48:10.640 --> 48:11.800 Okay, see what I'm saying? 48:12.440 --> 48:15.860 And then the text area, we also want to add those styles too. 48:15.960 --> 48:17.380 So I'm just going to put a comma here. 48:18.000 --> 48:25.140 And we're just going to say dot my form text area. 48:27.280 --> 48:29.600 Reload and then it applies it to that as well. 48:30.900 --> 48:33.600 Now let's add a little bit of styling to the button here. 48:34.980 --> 48:44.280 So what I could do is I could say my form input and then we could say, whoops, 48:44.640 --> 48:47.000 we could say type equals submit. 48:49.140 --> 48:50.660 Okay, we could do that. 48:51.120 --> 48:56.520 And let's give it a background color of dark gray. 48:56.560 --> 48:58.700 We'll make the color white. 49:00.160 --> 49:04.680 Let's say padding on the top and bottom we'll do 15. 49:05.240 --> 49:09.780 Now we'll do 10 pixels and left and right 15. 49:10.700 --> 49:13.100 And then let's say border none. 49:14.260 --> 49:15.480 Okay, let's reload. 49:15.920 --> 49:17.260 And now we get this button. 49:18.080 --> 49:23.700 Now this is fine, but what I what I want to do is I want to have a class called 49:23.700 --> 49:27.420 button that we can apply to any button and get this style. 49:27.860 --> 49:33.060 So instead of doing this right here, what I'm going to do is just change this 49:33.060 --> 49:33.900 to dot button. 49:34.680 --> 49:37.840 And since this is just global, not part of just the form, I'm going to 49:37.840 --> 49:39.340 just put it up here instead. 49:40.520 --> 49:43.020 So let's go like under the container. 49:45.000 --> 49:49.620 And then what I would do is apply that class to this input. 49:50.320 --> 49:51.640 Okay, we actually already did. 49:51.960 --> 49:52.960 I already did do it. 49:53.780 --> 49:55.320 So that should still work. 49:55.460 --> 49:55.800 All right. 49:55.820 --> 49:59.140 Now if I wanted to put a button somewhere else, like let's say in box two, 50:00.240 --> 50:02.680 or not even just a button, it could be a link. 50:04.240 --> 50:05.720 So we'll just put a link. 50:07.000 --> 50:08.540 We'll say read more. 50:09.580 --> 50:12.720 If we just leave it like that, of course, it's going to just look like 50:12.720 --> 50:13.000 that. 50:13.060 --> 50:19.980 But if we put class button, now we get that. 50:20.180 --> 50:20.320 Okay. 50:21.020 --> 50:26.040 And actually, since it's a link, we want the color to be white. 50:26.400 --> 50:30.980 So let's go back to button. 50:31.160 --> 50:31.960 Let's see color. 50:36.180 --> 50:37.440 You know what it's getting? 50:39.080 --> 50:41.400 This is mixing it up, the visited color. 50:42.680 --> 50:45.360 So let's just, let's actually get rid of that right there. 50:47.200 --> 50:47.980 There we go. 50:48.900 --> 50:49.720 All right, cool. 50:50.380 --> 50:52.340 So we can apply that class anywhere. 50:53.540 --> 50:56.680 And if we wanted to put a hover state for the button, we could do that as well. 50:56.940 --> 51:07.060 So if we say button hover, and let's say background red, color white. 51:09.180 --> 51:12.160 And now we have that hover effect. 51:13.920 --> 51:14.240 All right. 51:14.320 --> 51:15.960 Hopefully that isn't too confusing. 51:16.920 --> 51:18.260 So that's our form. 51:18.420 --> 51:19.160 Very simple. 51:20.300 --> 51:23.580 Now what I want to do is talk about alignment and floating. 51:24.160 --> 51:24.540 Okay. 51:24.540 --> 51:26.160 So let's go back to our HTML. 51:26.860 --> 51:28.140 We'll go under the form. 51:29.820 --> 51:33.720 And what I'm going to do here is I'm going to put in three blocks. 51:34.300 --> 51:34.460 Okay. 51:34.660 --> 51:35.820 So let's say div. 51:36.960 --> 51:39.640 And let's give this a class of block. 51:40.660 --> 51:43.220 And inside these blocks, we'll have an h3. 51:43.380 --> 51:44.600 We'll just say heading. 51:46.120 --> 51:49.200 And then we'll have a paragraph with dummy text. 51:49.420 --> 51:50.920 I'm just going to make it a little shorter. 51:53.760 --> 51:54.840 Let's go like right there. 51:55.400 --> 51:57.980 And we're going to have three of these. 51:58.160 --> 52:02.280 So let's copy this whole div with the class of block, paste it in two more 52:02.280 --> 52:04.200 times, and reload. 52:04.420 --> 52:07.940 So normal flow, we're just going to have them on top of each other. 52:07.960 --> 52:11.080 But let's say we wanted to float them to go to the side. 52:11.640 --> 52:12.080 All right. 52:12.100 --> 52:13.820 We want them to go horizontally. 52:14.180 --> 52:16.040 So let's go to our CSS. 52:16.740 --> 52:18.760 Remember, they all have a class of block. 52:19.660 --> 52:24.660 So we're going to say we want these to float to the right. 52:24.720 --> 52:26.020 Actually, let's say float left. 52:28.660 --> 52:31.520 And we're going to set a width. 52:32.720 --> 52:37.480 Now, since there's three of them, I'm going to set the width to 33.3%. 52:37.480 --> 52:38.980 All right. 52:39.080 --> 52:40.240 And then let's just add like... 52:42.020 --> 52:44.240 let's just do that for now. 52:44.400 --> 52:45.300 Let's see what that does. 52:46.740 --> 52:46.960 All right. 52:47.080 --> 52:47.640 So reload. 52:47.900 --> 52:50.160 And now we have our three blocks. 52:50.740 --> 52:53.540 Now, if I wanted to, let's say, put a border. 52:54.800 --> 52:59.120 We'll say one pixel solid C. 52:59.440 --> 53:02.800 And let's put in padding 10 pixels. 53:03.680 --> 53:04.800 And let's reload. 53:05.080 --> 53:06.500 Now, that's going to mess everything up. 53:06.500 --> 53:12.160 Because what it's doing is it's taking this width, which just barely fits 53:12.160 --> 53:15.600 everything in, and then it's adding 10 pixels padding. 53:15.800 --> 53:19.480 It's adding a pixel of border, which makes it too big to put all on the 53:19.480 --> 53:20.040 same line. 53:20.700 --> 53:26.000 So the easy fix for this is to add a property called box sizing. 53:26.400 --> 53:27.580 Oops, not box shadow. 53:27.800 --> 53:29.700 Box sizing. 53:30.080 --> 53:32.520 And we set this to the value of border box. 53:33.000 --> 53:37.760 So if we save that and reload, now notice they're all back on the same 53:37.760 --> 53:38.020 line. 53:38.120 --> 53:43.060 Because what this does is it makes it so that it takes in padding and border and it 53:43.060 --> 53:47.600 takes this stuff in and applies it into the width itself so that it's not adding 53:47.600 --> 53:50.340 it to it, making it too big or too wide. 53:50.860 --> 53:51.120 All right. 53:51.260 --> 53:52.880 So just to let you know. 53:52.980 --> 53:56.800 Now, when you get into Flexbox, Flexbox takes care of this stuff really 53:56.800 --> 53:58.480 nicely and you can do a lot more. 53:58.800 --> 54:02.020 But like I said, that's too advanced for this video, for this tutorial. 54:02.680 --> 54:06.360 You might want to check out the Flexbox in 20 minutes video that I did. 54:07.180 --> 54:07.800 All right. 54:07.860 --> 54:12.040 So what about floating elements that aren't all the same width like this? 54:12.060 --> 54:16.560 Let's go ahead and do like a main area and a sidebar. 54:17.040 --> 54:18.960 So we'll go below those three blocks. 54:19.060 --> 54:24.580 Now, when you float stuff, you're going to want to clear it because your next markup 54:24.580 --> 54:26.400 is going to be all messed up. 54:26.420 --> 54:27.820 It's going to be like up here. 54:28.180 --> 54:31.420 So what we do is we create a div. 54:31.480 --> 54:33.220 Let's give it a class of CLR. 54:33.840 --> 54:36.420 You might also see ClearFix sometimes. 54:36.780 --> 54:38.000 I like to use CLR. 54:38.440 --> 54:42.060 And then I'm going to put this at the top because this is kind of a global class. 54:43.140 --> 54:46.220 So we'll go like right here and say .CLR. 54:46.520 --> 54:49.080 And we just want to add clear both. 54:49.900 --> 54:52.080 And that's going to clear any floats above it. 54:52.440 --> 54:52.620 Okay. 54:54.200 --> 54:56.720 And then what we'll do is create a div. 54:58.540 --> 55:00.480 This time I'm going to give it an ID. 55:00.780 --> 55:03.860 So I'll give it an ID of main block. 55:08.750 --> 55:09.230 Alright. 55:09.390 --> 55:14.630 And then let's also do a div with an ID of sidebar. 55:18.250 --> 55:18.730 Okay. 55:18.910 --> 55:22.410 So in the main block, let's just grab this H3 and this paragraph. 55:24.070 --> 55:25.610 And then sidebar. 55:27.350 --> 55:30.250 We'll just have the paragraph. 55:30.950 --> 55:33.890 So by default, obviously these are going to be on top of each other. 55:34.050 --> 55:37.750 But let's say we want the heading to be kind of the main area and take up like 55:37.750 --> 55:38.710 this much space. 55:38.890 --> 55:40.390 And then the sidebar over here. 55:40.890 --> 55:43.710 So what we would do is go to our CSS. 55:46.190 --> 55:47.390 And remember their ID. 55:47.590 --> 55:48.910 So we want to use a number sign. 55:49.210 --> 55:51.470 And let's say main block. 55:53.410 --> 55:53.810 Okay. 55:53.830 --> 55:54.570 Main block. 55:54.690 --> 55:56.910 And we're going to float that to the left. 55:57.310 --> 56:00.410 And then I'm going to set a width of 70%. 56:00.410 --> 56:00.950 Okay. 56:00.970 --> 56:02.210 Because I want this to be responsive. 56:03.690 --> 56:04.030 Alright. 56:04.250 --> 56:06.070 And then let's copy that. 56:07.190 --> 56:09.370 And then for this we'll say sidebar. 56:10.570 --> 56:11.450 That's what I called it. 56:11.530 --> 56:11.630 Right? 56:11.810 --> 56:12.210 Sidebar. 56:12.350 --> 56:14.010 And we want that to float to the right. 56:14.330 --> 56:16.390 And we want that to be 30%. 56:17.390 --> 56:17.790 Alright. 56:17.910 --> 56:19.510 So let's go ahead and save that and reload. 56:20.010 --> 56:20.910 And there we go. 56:21.350 --> 56:25.390 Now for the sidebar, I'm also going to add... actually let's add a background 56:25.390 --> 56:29.910 color of dark gray. 56:30.110 --> 56:31.210 Color white. 56:32.550 --> 56:33.070 Oops. 56:33.790 --> 56:34.690 Color white. 56:34.830 --> 56:38.730 And let's add padding 15 pixels and save. 56:39.390 --> 56:39.910 Okay. 56:40.130 --> 56:41.410 Now again, it's not... 56:41.410 --> 56:43.190 it's going to go on down here. 56:43.290 --> 56:44.150 It doesn't look right. 56:44.370 --> 56:47.030 So what we need to do is just add in our border. 56:47.630 --> 56:48.350 I'm sorry. 56:48.430 --> 56:53.270 Our box sizing of border box. 56:54.190 --> 56:54.670 Okay. 56:54.770 --> 57:00.450 And we're going to also add some padding in the border box on our main block. 57:01.430 --> 57:01.910 Okay. 57:01.950 --> 57:02.930 So now we'll reload. 57:03.270 --> 57:03.910 And there we go. 57:03.990 --> 57:05.690 So now it's floated correctly. 57:07.610 --> 57:08.090 Alright. 57:08.190 --> 57:09.570 So we are getting there guys. 57:09.710 --> 57:11.710 Now I want to talk a little bit about positioning. 57:12.990 --> 57:13.130 Alright. 57:13.290 --> 57:16.010 So the position property has a few different values. 57:16.270 --> 57:18.210 So static is actually the default. 57:18.350 --> 57:20.130 If we don't assign a position, it's static. 57:20.230 --> 57:23.130 This just renders the elements in order of the document flow. 57:23.990 --> 57:27.550 Relative means that the element is positioned relative to its normal 57:27.550 --> 57:28.010 position. 57:28.330 --> 57:33.470 So it falls naturally, but we can add properties like top, left, right, 57:33.570 --> 57:35.310 bottom, and so on. 57:35.390 --> 57:36.930 And we can push it to where we want. 57:37.450 --> 57:42.430 Now absolute will allow us to target whatever position we want inside of a 57:42.430 --> 57:43.310 relative element. 57:43.550 --> 57:44.910 And I'll show you what I mean in a second. 57:45.770 --> 57:48.230 Fixed is a fixed position to the browser window. 57:48.370 --> 57:52.490 So no matter how much we scroll, where we are on the page, it'll always be 57:52.490 --> 57:53.310 in the same position. 57:54.230 --> 57:56.790 Initial sets the property to its default value. 57:57.290 --> 58:00.490 And then inherit will inherit whatever the property of its parent element. 58:00.710 --> 58:02.690 So let's take a look at some of these in action. 58:03.690 --> 58:04.350 Alright guys. 58:04.430 --> 58:05.390 So back to our HTML. 58:05.730 --> 58:08.650 Remember we did float the main block and sidebar. 58:08.650 --> 58:11.390 So I'm gonna go under those two divs and just clear it out. 58:11.530 --> 58:15.630 So we'll say div and we're gonna give it a class of CLR. 58:17.290 --> 58:17.610 Okay. 58:17.750 --> 58:23.510 And then what I'm gonna do is I'm gonna create a div and let's give this a class 58:23.510 --> 58:27.250 of P-box for positioning box. 58:27.750 --> 58:28.150 Alright. 58:28.210 --> 58:29.930 And then I'm gonna put an h1 in here. 58:29.950 --> 58:30.890 We'll just say hello. 58:31.430 --> 58:35.050 And then let's also put an h2 and we'll say goodbye. 58:35.230 --> 58:38.330 And I'm just using these so I can give you some examples on positioning. 58:39.250 --> 58:40.370 So let's go ahead and save that. 58:40.510 --> 58:42.650 Now if we reload we're just gonna see the two headings. 58:43.390 --> 58:45.110 But we're gonna go to our CSS now. 58:45.730 --> 58:47.530 Just make that a little smaller. 58:48.370 --> 58:49.410 And let's see. 58:49.570 --> 58:55.390 We're going to target the P-box element that we just created. 58:56.130 --> 58:59.850 And I'm gonna set a specific width and height to this. 58:59.930 --> 59:02.350 So let's say 800 pixels for the width. 59:02.870 --> 59:05.070 Height we'll say 500 pixels. 59:05.430 --> 59:09.010 And then let's just add a border around it so we can definitely see it. 59:09.170 --> 59:14.570 So one pixel solid, one pixel solid black. 59:15.510 --> 59:15.990 Alright. 59:16.090 --> 59:18.570 So if we look at that, that's what it's gonna look like. 59:20.130 --> 59:24.090 Now let's add a little margin to the top to push it down a little bit. 59:29.010 --> 59:29.490 Alright. 59:30.470 --> 59:33.990 So this is positioned static by default. 59:34.170 --> 59:39.950 Now I want these to be positioned absolute so I can move them around wherever I want 59:39.950 --> 59:41.050 within its element. 59:41.530 --> 59:46.570 Now to do that, actually let me show you what happens if we don't set it to 59:46.570 --> 59:47.230 relative first. 59:47.410 --> 59:52.430 So if we say dot P-box and let's target the H1. 59:52.910 --> 59:53.730 That should be a dot. 59:55.550 --> 59:56.030 Alright. 59:56.290 --> 01:00:00.490 And then let's say top and we'll set it to 40 pixels. 01:00:01.190 --> 01:00:03.790 So let's see what happens when I reload to this H1. 01:00:05.130 --> 01:00:05.590 Nothing. 01:00:08.650 --> 01:00:09.410 Let's see. 01:00:09.590 --> 01:00:12.170 That's because I didn't set it to absolute. 01:00:13.190 --> 01:00:18.610 I want position position absolute. 01:00:20.910 --> 01:00:21.430 Alright. 01:00:21.590 --> 01:00:22.510 And then reload. 01:00:22.790 --> 01:00:24.010 And now it disappears. 01:00:24.230 --> 01:00:25.470 Now it doesn't actually disappear. 01:00:25.710 --> 01:00:28.650 What happens is if we go up here, here it is. 01:00:29.250 --> 01:00:32.930 So what's going on is it's we're saying top 40 pixels. 01:00:33.230 --> 01:00:35.670 So it's coming down 40 pixels from the top. 01:00:36.110 --> 01:00:40.850 Now since it doesn't have an apparent element that is positioned relative, 01:00:40.850 --> 01:00:46.170 it's just going to use the entire HTML document, okay, as its container. 01:00:46.550 --> 01:00:51.310 Now we want it to be pushed 40 pixels from the top of this element of P-box. 01:00:51.570 --> 01:00:55.510 So in order for that to happen, we need to actually set this to position 01:00:55.510 --> 01:00:56.010 relative. 01:00:58.590 --> 01:00:59.150 Alright. 01:00:59.150 --> 01:01:03.530 So now if we save and reload, now it's pushed 40 pixels from the top. 01:01:03.850 --> 01:01:05.810 And just to show you, I'll change it to 100. 01:01:07.190 --> 01:01:07.510 Alright. 01:01:07.750 --> 01:01:10.510 And then we can basically put this element wherever we want. 01:01:10.610 --> 01:01:14.330 If we want it to go, let's say from the left, 200 pixels. 01:01:15.550 --> 01:01:15.990 Reload. 01:01:16.110 --> 01:01:21.810 And then you can see it's down 100 and to the left, or to the right from the left, 01:01:21.970 --> 01:01:22.450 200. 01:01:23.130 --> 01:01:23.570 Okay. 01:01:23.630 --> 01:01:26.730 Let's say we wanted to move like somewhere down here. 01:01:27.110 --> 01:01:34.070 We'll say P-box and we'll target the H2. 01:01:35.810 --> 01:01:37.830 Set it to position absolute. 01:01:39.870 --> 01:01:43.170 And then let's say we want it from the bottom, 40 pixels. 01:01:43.750 --> 01:01:48.630 And then let's say from the right, 100 pixels. 01:01:49.570 --> 01:01:49.950 Okay. 01:01:50.030 --> 01:01:50.570 Reload. 01:01:50.870 --> 01:01:51.510 And there we go. 01:01:51.610 --> 01:01:53.830 So you can see we can put this stuff wherever we want. 01:01:53.830 --> 01:01:57.230 And this is really helpful when you're building games that have to do with CSS. 01:01:58.250 --> 01:01:58.450 Alright. 01:01:58.530 --> 01:02:01.870 You can imagine moving like a little image, a little checker or something 01:02:01.870 --> 01:02:02.710 around the board. 01:02:03.990 --> 01:02:04.430 Alright. 01:02:04.510 --> 01:02:07.670 Now let's look at fixed positioning real quick. 01:02:08.030 --> 01:02:11.190 So what I'll do is I'm going to actually go outside of the container and I'm going 01:02:11.190 --> 01:02:13.930 to create an A tag. 01:02:15.650 --> 01:02:16.090 Alright. 01:02:16.170 --> 01:02:18.010 Let's actually give it a class of button. 01:02:18.010 --> 01:02:18.430 Okay. 01:02:19.390 --> 01:02:20.830 Remember we have that button class. 01:02:22.110 --> 01:02:27.010 And I'm also going to give it a class of, let's say fix me. 01:02:27.550 --> 01:02:27.990 Okay. 01:02:28.050 --> 01:02:30.370 So it has two classes now, fix me and button. 01:02:30.710 --> 01:02:32.970 Now if I reload, it's going to show down here. 01:02:33.790 --> 01:02:34.230 Whoops. 01:02:34.270 --> 01:02:35.890 We have no text inside the link. 01:02:37.010 --> 01:02:38.890 We'll just say hello. 01:02:40.450 --> 01:02:40.890 Alright. 01:02:41.010 --> 01:02:41.850 So we have this button. 01:02:42.010 --> 01:02:42.350 Hello. 01:02:43.310 --> 01:02:48.990 Now if we set it to fixed, what it'll do is it'll be kind of stuck on the page 01:02:48.990 --> 01:02:52.110 somewhere and how, wherever we scroll, it'll still stay there. 01:02:52.210 --> 01:02:53.010 So let me show you. 01:02:53.290 --> 01:03:01.290 If we go down here and we say dot fix me, and then we're going to set position to 01:03:01.290 --> 01:03:06.610 fixed and then let's set top to 400 pixels. 01:03:07.190 --> 01:03:07.630 Alright. 01:03:07.730 --> 01:03:11.830 So now if we save and reload, you'll see that that button is now going to stay 01:03:11.830 --> 01:03:14.250 there 400 pixels from the top of the browser. 01:03:14.530 --> 01:03:16.650 And it's, it's, it's not going to move. 01:03:16.770 --> 01:03:16.930 Okay. 01:03:16.990 --> 01:03:18.590 No matter where we are on the web page. 01:03:18.950 --> 01:03:23.210 And that's really cool for like, like social media links, things like that, 01:03:23.250 --> 01:03:25.930 where you want, you know, you want the user to always see it. 01:03:26.430 --> 01:03:28.490 Sometimes you'll even see this with the nav bar. 01:03:28.650 --> 01:03:30.930 So when you scroll down the nav bar still shows. 01:03:32.270 --> 01:03:32.630 Alright. 01:03:32.630 --> 01:03:35.730 So we're past an hour now and we still have to do the layout. 01:03:35.890 --> 01:03:39.710 So I apologize that this is taking so long, but I do want to cover everything. 01:03:39.910 --> 01:03:44.590 So what I want to do now is show you how to use an image as an element background. 01:03:44.890 --> 01:03:47.370 So we're going to use this right here, this P box. 01:03:48.330 --> 01:03:51.550 So let's see, I'm just going to grab an image real quick. 01:03:51.870 --> 01:03:55.510 Let's say light abstract image. 01:03:55.750 --> 01:03:56.910 Actually, it's not what I want. 01:04:02.300 --> 01:04:05.320 Let's grab this right here. 01:04:06.980 --> 01:04:07.340 Alright. 01:04:07.420 --> 01:04:16.100 So I'm going to grab this image and I'm just going to save it as BG image dot 01:04:16.100 --> 01:04:16.680 JPEG. 01:04:16.820 --> 01:04:19.700 And we'll save it to our cheat sheet images folder. 01:04:21.240 --> 01:04:21.840 Alright. 01:04:22.500 --> 01:04:25.040 And then let's go back and close those. 01:04:25.380 --> 01:04:31.460 Let's go back to our CSS and under P box, let's say background dash image. 01:04:32.480 --> 01:04:34.620 And then that's going to, we're going to say URL. 01:04:35.160 --> 01:04:38.460 And then in here we need a path to the image. 01:04:38.560 --> 01:04:42.300 So it's going to be dot dot slash because right now we're in the CSS folder, 01:04:42.400 --> 01:04:43.620 but we want to go outside of it. 01:04:43.700 --> 01:04:44.620 So that brings us out. 01:04:44.720 --> 01:04:49.800 And then we want to go into the images folder and then we want to call BG image 01:04:49.800 --> 01:04:51.540 dot JPEG. 01:04:53.280 --> 01:04:53.700 Alright. 01:04:53.900 --> 01:04:55.280 So let's save that and reload. 01:04:55.580 --> 01:04:57.920 And now you'll see we have the image as the background. 01:04:58.900 --> 01:05:04.440 Now there's different background styles we can use. 01:05:04.620 --> 01:05:05.820 So for instance, the position. 01:05:07.060 --> 01:05:14.000 So let's go down here and say background position, and we're going to set that to, 01:05:14.100 --> 01:05:19.800 let's say a hundred pixels, 200 pixels and reload. 01:05:20.080 --> 01:05:24.400 What that's going to do is it's going to push it down a hundred pixels and push it 01:05:24.400 --> 01:05:27.660 or push it over a hundred pixels and down 200. 01:05:28.140 --> 01:05:32.280 Now notice that the, the, it's actually repeating the images, repeating. 01:05:32.580 --> 01:05:32.820 Okay. 01:05:32.900 --> 01:05:33.580 This is the end. 01:05:33.680 --> 01:05:35.080 And then it repeats both ways. 01:05:35.400 --> 01:05:41.220 So what we're going to do is set background dash repeat to no repeat. 01:05:42.320 --> 01:05:42.800 Alright. 01:05:42.900 --> 01:05:43.460 And reload. 01:05:43.600 --> 01:05:45.280 And now you'll see that it does not repeat. 01:05:45.820 --> 01:05:47.660 Now for a background position, 01:05:51.140 --> 01:05:53.880 you can also use, I cannot type position today. 01:05:54.240 --> 01:05:56.520 You can also use center. 01:05:56.960 --> 01:06:00.660 Let's say center, center and reload. 01:06:00.880 --> 01:06:04.440 And that will center it on the, you know, horizontally and vertically. 01:06:05.260 --> 01:06:09.780 We could say center top, reload, and that'll center it top. 01:06:09.880 --> 01:06:12.260 So you can use pixels or you can use center. 01:06:12.320 --> 01:06:14.100 You can also use percentages, I believe. 01:06:15.740 --> 01:06:16.100 All right. 01:06:16.140 --> 01:06:19.240 But that's what we're, that's all we're going to do with the background images. 01:06:20.280 --> 01:06:20.860 All right. 01:06:20.900 --> 01:06:25.520 So the last thing I want to do inside the cheat sheet is I want to, uh, I want to 01:06:25.520 --> 01:06:27.400 show you a little bit about pseudo classes. 01:06:28.000 --> 01:06:32.200 So what I'm going to do is in the container under the P box, let's go ahead 01:06:32.200 --> 01:06:33.760 and put in a UL. 01:06:34.900 --> 01:06:36.360 We're going to have a bunch of allies. 01:06:36.520 --> 01:06:41.580 I'm just going to say list item and we'll copy that. 01:06:42.300 --> 01:06:43.980 We're just going to have a bunch of these. 01:06:46.620 --> 01:06:47.060 Okay. 01:06:47.240 --> 01:06:47.940 So we'll reload. 01:06:48.040 --> 01:06:52.300 So we have a bunch of list items and we can use pseudo classes to target certain 01:06:52.300 --> 01:06:52.660 things. 01:06:52.940 --> 01:06:58.060 So, um, let's say that, well, let's give that a class actually. 01:06:58.320 --> 01:07:02.420 So UL class, we'll just call it my list. 01:07:04.140 --> 01:07:04.620 All right. 01:07:04.700 --> 01:07:06.340 So we'll say dot my list. 01:07:09.660 --> 01:07:13.260 And, uh, actually we're going to target an ally and then I'm going to use a pseudo 01:07:13.260 --> 01:07:18.080 class by using a colon and we're going to say first dash child. 01:07:18.960 --> 01:07:19.440 Okay. 01:07:19.540 --> 01:07:21.680 And then we're going to set the background. 01:07:23.180 --> 01:07:25.880 We'll say background and we'll set that to red. 01:07:26.160 --> 01:07:29.180 Notice that we don't have to use background dash color. 01:07:29.680 --> 01:07:33.480 We can use background and then we can use either a color or an image here. 01:07:35.140 --> 01:07:35.600 Okay. 01:07:35.680 --> 01:07:37.340 And that's going to get the first child. 01:07:37.460 --> 01:07:38.500 It's going to get the first ally. 01:07:38.880 --> 01:07:40.740 We also have last child. 01:07:43.900 --> 01:07:44.360 Okay. 01:07:44.380 --> 01:07:45.880 So last child. 01:07:46.000 --> 01:07:47.980 And we'll change that to, let's say blue. 01:07:49.280 --> 01:07:53.600 I'm not going to go over all of the pseudo elements, but, um, just some of the 01:07:53.600 --> 01:07:54.320 important ones. 01:07:54.720 --> 01:07:58.420 Now let's say you wanted to target like the fifth one of this. 01:07:58.520 --> 01:08:03.280 So what you could do, and this is all CSS three, we could say my list ally, 01:08:03.640 --> 01:08:08.040 and then we could use something called nth child. 01:08:08.980 --> 01:08:15.060 And then it's, we're going to put in some parentheses here and let's say we want the 01:08:15.060 --> 01:08:15.380 fifth. 01:08:15.500 --> 01:08:19.660 So we could put five and then we'll say color, or let's say background, 01:08:20.600 --> 01:08:21.460 uh, yellow. 01:08:23.360 --> 01:08:24.020 All right. 01:08:24.080 --> 01:08:24.820 So we'll reload. 01:08:25.040 --> 01:08:26.520 And now the fifth one is yellow. 01:08:26.620 --> 01:08:30.280 So you can target whatever one you want using these pseudo elements. 01:08:30.880 --> 01:08:34.500 Now you can also use, um, even and odd with nth child. 01:08:34.760 --> 01:08:36.300 So let's copy that. 01:08:37.020 --> 01:08:45.420 And let's say we want all of the even to be gray and reload. 01:08:45.900 --> 01:08:48.900 And now all the even list items will have a gray background. 01:08:49.040 --> 01:08:52.820 So very, very helpful, especially if this stuff is dynamically generated and you 01:08:52.820 --> 01:08:54.940 can't really target a specific list item. 01:08:55.460 --> 01:08:56.200 All right guys. 01:08:56.240 --> 01:09:00.960 So we've looked at quite a bit, pretty much all of the fundamentals of CSS 01:09:00.960 --> 01:09:03.520 as far as the properties and all that. 01:09:03.600 --> 01:09:07.220 I mean, there are more, but it's impossible to go over all of them in this 01:09:07.220 --> 01:09:07.900 amount of time. 01:09:08.320 --> 01:09:12.760 Um, I'm way over what I wanted to do, but I do want to do what I promised and 01:09:12.760 --> 01:09:15.020 kind of create a website layout for you guys. 01:09:15.140 --> 01:09:17.320 So hopefully this isn't too long. 01:09:17.420 --> 01:09:20.820 If you've watched it up to this point, then I'm sure you won't mind watching 01:09:20.820 --> 01:09:23.440 another, um, you know, 10, 15 minutes. 01:09:24.280 --> 01:09:28.340 So, uh, I'm going to do this kind of quick because we did go over, you know, 01:09:28.360 --> 01:09:30.460 most of the stuff that we're going to be doing here. 01:09:30.680 --> 01:09:34.600 So in my website, I'm going to create a new file called index.html. 01:09:34.860 --> 01:09:36.000 Why do I keep doing that? 01:09:38.300 --> 01:09:40.740 I do that because I usually use Atom. 01:09:40.860 --> 01:09:42.620 And when you do that, you create a new file. 01:09:42.740 --> 01:09:44.740 You can just type the name and save. 01:09:44.820 --> 01:09:46.120 You don't have to do control S. 01:09:46.920 --> 01:09:47.220 All right. 01:09:47.240 --> 01:09:54.600 And then let's create a folder called CSS and we'll create another folder called 01:09:54.600 --> 01:09:55.000 images. 01:09:56.240 --> 01:09:56.900 All right. 01:09:57.620 --> 01:10:03.260 Now in CSS, we'll create a file and let's save it as style.css. 01:10:03.640 --> 01:10:03.740 Okay. 01:10:03.840 --> 01:10:05.560 We're now in the my website folder. 01:10:05.940 --> 01:10:06.740 Cheat sheet is done. 01:10:07.840 --> 01:10:08.240 Okay. 01:10:08.320 --> 01:10:09.420 So we have these two files. 01:10:09.640 --> 01:10:13.600 Let's go ahead and add some basic markup to our website. 01:10:13.800 --> 01:10:15.200 I'm just going to say my website. 01:10:16.440 --> 01:10:16.940 All right. 01:10:16.980 --> 01:10:18.680 And then we want to link the style sheet. 01:10:19.700 --> 01:10:23.780 So let's link to CSS slash style.css. 01:10:24.900 --> 01:10:26.540 And then we're going to write our markup. 01:10:26.600 --> 01:10:30.020 And that's usually what I like to do is do the markup first and then the styling. 01:10:31.380 --> 01:10:36.720 So we're going to be using HTML5 semantic elements. 01:10:37.120 --> 01:10:38.200 So let's start with a header. 01:10:39.140 --> 01:10:44.720 And our header is just going to basically have an h1 and we'll just call it my 01:10:44.720 --> 01:10:45.140 website. 01:10:45.700 --> 01:10:47.060 That's kind of like our logo. 01:10:48.140 --> 01:10:51.980 And I'm going to give this header an id of main header. 01:10:53.760 --> 01:10:54.320 All right. 01:10:54.880 --> 01:10:59.700 Now we're going to have a container class that's going to push everything to the 01:10:59.700 --> 01:11:03.500 middle and so on, but I don't want to wrap it around the whole site because I don't 01:11:03.500 --> 01:11:05.180 want everything to be pushed over. 01:11:05.260 --> 01:11:09.440 For instance, the header, I want the background color to go across the whole 01:11:09.440 --> 01:11:13.680 thing, but I want the content, the actual h1 to be, you know, 01:11:13.740 --> 01:11:15.140 to have the container around it. 01:11:15.200 --> 01:11:19.720 So we're going to be using the container inside of this and inside a lot of our 01:11:19.720 --> 01:11:20.220 elements. 01:11:25.150 --> 01:11:25.770 All right. 01:11:25.810 --> 01:11:26.690 So there's our header. 01:11:27.090 --> 01:11:28.810 Next thing we'll do is the navbar. 01:11:30.310 --> 01:11:32.930 And again, we're going to have the container inside of it. 01:11:33.010 --> 01:11:34.850 So what I'm going to do is just copy this. 01:11:35.370 --> 01:11:37.110 We'll change this to nav. 01:11:38.570 --> 01:11:41.530 Change the id to navbar. 01:11:42.690 --> 01:11:44.290 Make sure you change that as well. 01:11:44.650 --> 01:11:47.430 And then we're going to have our ul. 01:11:49.230 --> 01:11:51.050 Let's do our li's. 01:11:51.370 --> 01:11:51.730 Okay. 01:11:51.790 --> 01:11:57.730 Our a tags, they're not going to actually go anywhere, but this is our fake 01:11:57.730 --> 01:11:58.410 navigation. 01:11:59.930 --> 01:12:07.220 So we'll say home, about, services and contact. 01:12:09.220 --> 01:12:09.800 All right. 01:12:09.980 --> 01:12:12.860 And then under that, we're going to have like a showcase area. 01:12:13.500 --> 01:12:18.920 So for that, I'm going to use a section tag and I'm going to give this an id of 01:12:18.920 --> 01:12:19.360 showcase. 01:12:19.360 --> 01:12:25.220 Notice these are things that you use ids for because I'm not going to have another 01:12:25.220 --> 01:12:27.900 main navbar or another main header or showcase. 01:12:28.260 --> 01:12:29.620 This is all unique stuff. 01:12:29.740 --> 01:12:30.820 So I'm giving it an id. 01:12:31.460 --> 01:12:31.700 Okay. 01:12:31.760 --> 01:12:34.280 So that gives you an example of the difference. 01:12:35.620 --> 01:12:35.940 All right. 01:12:36.280 --> 01:12:39.260 And then container, however, we're using in all different places. 01:12:39.460 --> 01:12:40.540 So that is a class. 01:12:41.580 --> 01:12:41.800 Okay. 01:12:41.800 --> 01:12:43.580 Let's put an h1 in our showcase. 01:12:44.300 --> 01:12:45.840 Just put some dummy text. 01:12:46.000 --> 01:12:47.240 I want it really short though. 01:12:47.480 --> 01:12:49.380 So I'll just do that. 01:12:50.960 --> 01:12:51.460 All right. 01:12:51.520 --> 01:12:52.700 So that's our showcase. 01:12:52.980 --> 01:12:53.980 Let's tab that over. 01:12:55.000 --> 01:12:59.120 And then under the showcase, we're going to have like the main area, which is also 01:12:59.120 --> 01:13:00.000 going to be a section. 01:13:02.240 --> 01:13:03.980 So let's say section. 01:13:05.700 --> 01:13:08.900 Let's see, section id main. 01:13:10.960 --> 01:13:13.360 And we'll just put an h1 in here. 01:13:13.580 --> 01:13:14.680 We'll say welcome. 01:13:16.660 --> 01:13:20.180 And then we'll have a paragraph with some dummy text. 01:13:21.360 --> 01:13:26.000 Now the main area will be on the left and then we'll have a sidebar, which is going 01:13:26.000 --> 01:13:26.940 to be an aside. 01:13:30.240 --> 01:13:30.620 All right. 01:13:30.700 --> 01:13:34.780 And the aside, I'm going to give that an id as well of sidebar. 01:13:36.520 --> 01:13:37.020 All right. 01:13:37.080 --> 01:13:38.920 And then let's see, what do I want to put here? 01:13:41.240 --> 01:13:42.500 We'll just put some text. 01:13:42.980 --> 01:13:43.980 I'll just copy this. 01:13:44.800 --> 01:13:46.300 I'll make it a little shorter though. 01:13:48.560 --> 01:13:49.040 All right. 01:13:49.660 --> 01:13:54.340 Now the main and the sidebar, I do want both of those pushed to the middle. 01:13:54.520 --> 01:13:57.160 So I'm going to wrap a container around both of those. 01:14:00.120 --> 01:14:04.660 And once this comes together, you'll see exactly why I'm doing this. 01:14:07.920 --> 01:14:08.840 All right. 01:14:09.240 --> 01:14:10.880 And then finally, we just want a footer. 01:14:11.020 --> 01:14:16.700 So we're going to use an html5 footer tag and let's give that an id of main footer. 01:14:20.550 --> 01:14:21.130 Okay. 01:14:21.310 --> 01:14:28.270 We'll put a paragraph and let's say copyright ampersand 2017. 01:14:30.370 --> 01:14:31.430 My website. 01:14:32.590 --> 01:14:33.310 All right. 01:14:33.470 --> 01:14:35.110 So that should be all the markups. 01:14:35.250 --> 01:14:37.930 So now let's go to our file path here. 01:14:38.610 --> 01:14:43.990 It's in crash course slash... actually, we'll just open it from Explorer. 01:14:46.530 --> 01:14:49.870 Let's see... my website index html. 01:14:50.030 --> 01:14:51.730 So that's what it looks like without CSS. 01:14:52.330 --> 01:14:58.110 Why isn't that... oh my god, that should be copy 2017. 01:14:59.230 --> 01:14:59.830 All right. 01:15:01.350 --> 01:15:03.330 So this is what it looks like without CSS. 01:15:03.570 --> 01:15:05.250 Now we're going to start to add our styles. 01:15:07.070 --> 01:15:10.210 Again, I'm going to be doing this kind of quick because a lot of this stuff we 01:15:10.210 --> 01:15:10.910 already went over. 01:15:10.910 --> 01:15:12.290 So let's say body. 01:15:14.290 --> 01:15:18.390 Let's say background or background color. 01:15:19.850 --> 01:15:21.050 Light gray. 01:15:21.290 --> 01:15:23.210 A lot of the styles would be the same as well. 01:15:23.390 --> 01:15:29.070 So we'll say color will be five font family. 01:15:31.230 --> 01:15:33.310 Font family Arial. 01:15:36.910 --> 01:15:39.190 Helvetica Sans Serif. 01:15:40.990 --> 01:15:41.510 Okay. 01:15:41.590 --> 01:15:45.950 We'll set the font size to 16. 01:15:46.790 --> 01:15:48.370 Let's set the line height. 01:15:51.290 --> 01:15:53.830 And these are just common settings that I use a lot. 01:15:53.950 --> 01:15:55.130 The line height and so on. 01:15:55.430 --> 01:15:57.790 And then I'm going to just margin out to zero. 01:15:58.610 --> 01:15:58.970 All right. 01:15:59.030 --> 01:15:59.890 And then the container. 01:16:01.810 --> 01:16:04.130 So container will be 80 percent. 01:16:04.130 --> 01:16:07.990 We want the margin auto. 01:16:09.130 --> 01:16:14.330 And we're going to set overflow to hidden so that there's no scroll bars even if 01:16:14.330 --> 01:16:15.950 something goes outside of its container. 01:16:16.850 --> 01:16:17.150 All right. 01:16:17.190 --> 01:16:20.090 Now remember we have the header which has an ID of main header. 01:16:21.350 --> 01:16:23.450 So for that I'm going to set the background. 01:16:24.570 --> 01:16:26.510 Actually let's do background color. 01:16:27.010 --> 01:16:28.930 And I'm going to set that to the color coral. 01:16:29.570 --> 01:16:33.050 And then set the actual text color to white. 01:16:33.050 --> 01:16:34.110 All right. 01:16:34.230 --> 01:16:35.150 So let's look at that. 01:16:35.650 --> 01:16:36.930 So that's what it looks like. 01:16:37.230 --> 01:16:39.010 Now we want to style the nav bar. 01:16:39.350 --> 01:16:42.470 And this is actually really easy. 01:16:42.550 --> 01:16:47.490 All we need to do is take the padding away from the UL, take the bullet points away. 01:16:47.810 --> 01:16:52.210 We need to float the links or not float but display them inline. 01:16:52.630 --> 01:16:53.110 Okay. 01:16:53.250 --> 01:16:56.130 So that they float across. 01:16:56.690 --> 01:16:58.130 Well, I guess we will float them as well. 01:16:59.690 --> 01:17:00.410 I'm sorry. 01:17:00.470 --> 01:17:02.690 We're not going to make the links inline. 01:17:02.770 --> 01:17:04.390 We're going to make the list items inline. 01:17:05.530 --> 01:17:07.230 So let's grab the UL. 01:17:07.410 --> 01:17:08.290 So we'll say main. 01:17:09.750 --> 01:17:10.450 I'm sorry. 01:17:10.610 --> 01:17:11.130 Nav bar. 01:17:13.130 --> 01:17:15.330 Let's do the nav bar itself first. 01:17:15.570 --> 01:17:16.290 Excuse me. 01:17:16.950 --> 01:17:22.690 Which is going to have a background color of dark gray. 01:17:23.550 --> 01:17:24.930 We'll say color white. 01:17:26.790 --> 01:17:30.170 And let's say... actually that's fine. 01:17:30.230 --> 01:17:30.990 We'll just leave that. 01:17:33.070 --> 01:17:35.010 And then the nav bar UL. 01:17:37.750 --> 01:17:39.510 Let's get rid of the padding. 01:17:40.950 --> 01:17:43.730 Let's get rid of these bullet points. 01:17:43.910 --> 01:17:45.490 So list style none. 01:17:46.810 --> 01:17:47.350 All right. 01:17:47.390 --> 01:17:50.110 So if we go ahead and we look at it, that's what it'll look like. 01:17:50.570 --> 01:17:54.410 Now the LI tags, we want those to be inline instead of block. 01:17:54.650 --> 01:18:00.750 So let's say nav bar LI. 01:18:02.290 --> 01:18:05.630 And we're going to set display inline. 01:18:07.150 --> 01:18:07.770 All right. 01:18:07.810 --> 01:18:11.470 Now if we look at that, you'll see now that they go to the side. 01:18:11.850 --> 01:18:14.790 And then the last part of the nav bar to style is the links. 01:18:15.010 --> 01:18:16.750 So nav bar A. 01:18:18.390 --> 01:18:20.370 Let's set the color to white. 01:18:21.290 --> 01:18:25.050 Let's set the text decoration to none. 01:18:26.130 --> 01:18:29.350 Let's set the color to... oh we already did the color. 01:18:30.010 --> 01:18:35.250 Let's set the font size to 18 pixels. 01:18:35.410 --> 01:18:36.210 Make them a little bigger. 01:18:36.590 --> 01:18:42.330 And then padding right, because we don't want them so close together, to 15 pixels. 01:18:43.110 --> 01:18:44.590 Reload and there we go. 01:18:44.710 --> 01:18:45.590 There's our nav bar. 01:18:46.930 --> 01:18:48.830 So next thing is the showcase. 01:18:50.970 --> 01:18:56.810 So showcase... and we're going to set a background image for this. 01:18:59.210 --> 01:19:03.770 I'll just type it background image URL. 01:19:05.290 --> 01:19:11.070 Okay that's going to be... it's going to go dot dot slash images slash showcase dot 01:19:11.070 --> 01:19:11.670 jpeg. 01:19:11.770 --> 01:19:12.910 So let's get that image. 01:19:14.250 --> 01:19:17.580 That was the light abstract coral. 01:19:23.770 --> 01:19:24.850 Where is it? 01:19:25.690 --> 01:19:28.050 Let's narrow this down to large. 01:19:30.530 --> 01:19:31.430 This... is that it? 01:19:35.020 --> 01:19:36.420 I don't think that's it. 01:19:38.020 --> 01:19:38.720 Right here. 01:19:38.780 --> 01:19:40.060 I'm going to grab this image here. 01:19:41.360 --> 01:19:45.120 And you can use whatever image you want, but I'm going to save this. 01:19:45.220 --> 01:19:48.200 Make sure it's in the my website images. 01:19:49.620 --> 01:19:50.880 And we're going to call this showcase. 01:19:53.880 --> 01:19:55.800 All right so if we go back to our site. 01:19:57.920 --> 01:20:00.060 Actually we need to add some other stuff here. 01:20:00.660 --> 01:20:02.520 So we have the background image. 01:20:03.040 --> 01:20:04.140 Let's set the position. 01:20:04.700 --> 01:20:07.300 So background position. 01:20:07.600 --> 01:20:10.140 I'm going to set that to center right. 01:20:12.440 --> 01:20:13.860 And let's set the height. 01:20:14.700 --> 01:20:17.820 I'm going to set it just as height for now, but then I'm going to show you 01:20:17.820 --> 01:20:18.180 something. 01:20:19.420 --> 01:20:22.180 All right and then let's... that's good. 01:20:22.240 --> 01:20:22.920 Let's save it. 01:20:25.040 --> 01:20:30.360 All right so for... actually let's add a couple other things here. 01:20:32.180 --> 01:20:36.080 We'll say margin bottom because we want to push everything down. 01:20:36.820 --> 01:20:38.720 Let's say 30 pixels. 01:20:39.000 --> 01:20:40.160 Everything under the showcase. 01:20:40.700 --> 01:20:43.040 And then let's also text align to the center. 01:20:45.100 --> 01:20:48.440 Okay now I want to grab on to the h1 that's in the showcase. 01:20:50.520 --> 01:20:53.300 So for the h1 I'm going to change the color to white. 01:20:54.580 --> 01:20:58.500 I'm going to change the font size to 50. 01:20:58.720 --> 01:20:59.680 I want to make it bigger. 01:21:00.340 --> 01:21:02.300 I'm going to change the line height. 01:21:04.100 --> 01:21:06.940 I'm going to change that to 1.6 m. 01:21:07.680 --> 01:21:11.720 And then just add some padding to the top 30 pixels. 01:21:11.880 --> 01:21:13.240 So that'll move the h1 down. 01:21:13.340 --> 01:21:14.320 So let's go ahead and reload. 01:21:17.340 --> 01:21:25.180 All right now as I go smaller here notice that the text goes outside of the height 01:21:25.180 --> 01:21:25.560 here. 01:21:26.000 --> 01:21:28.940 So this is a case where you want to use min height. 01:21:29.440 --> 01:21:33.300 Okay because you want the height to gradually grow if the text grows. 01:21:33.860 --> 01:21:37.940 So in the showcase instead of just height we're going to min dash height. 01:21:38.860 --> 01:21:41.900 So if we're at this level there we go 300. 01:21:42.600 --> 01:21:47.340 But if we make it smaller you'll see that it'll let the height will grow with the 01:21:47.340 --> 01:21:48.400 text which is what we want. 01:21:48.420 --> 01:21:49.520 That makes it responsive. 01:21:50.180 --> 01:21:52.080 In fact this website will be responsive. 01:21:53.760 --> 01:21:55.140 All right so that's the showcase. 01:21:55.420 --> 01:21:57.140 Now for the main and the sidebar. 01:21:57.320 --> 01:22:01.100 So we have the main part here right and then this is the sidebar. 01:22:01.200 --> 01:22:03.000 We want them to float those. 01:22:03.440 --> 01:22:08.220 So let's say main float to the left. 01:22:09.040 --> 01:22:13.100 Set the width to 70 percent. 01:22:14.560 --> 01:22:16.660 Padding set to 0. 01:22:17.000 --> 01:22:18.040 30 pixels. 01:22:18.760 --> 01:22:22.060 And then let's set the box sizing to border box. 01:22:22.260 --> 01:22:24.240 So it includes that padding and stuff. 01:22:24.960 --> 01:22:28.880 All right and then for the sidebar it's going to be kind of similar. 01:22:29.040 --> 01:22:30.500 So I'm going to just copy that. 01:22:31.520 --> 01:22:33.280 I'll say sidebar. 01:22:34.540 --> 01:22:36.300 It's going to float to the right. 01:22:37.680 --> 01:22:40.320 We're going to give it a width of 30. 01:22:41.180 --> 01:22:42.560 Let's give it a background. 01:22:44.800 --> 01:22:51.960 Background of dark gray and a color of white. 01:22:54.900 --> 01:22:56.160 And that should be good. 01:22:56.240 --> 01:22:58.740 Actually let's do padding 10 pixels all the way around. 01:22:59.840 --> 01:23:00.480 Reload. 01:23:00.780 --> 01:23:01.540 There we go. 01:23:02.600 --> 01:23:05.760 And then for the footer, remember it has an id of main footer. 01:23:07.420 --> 01:23:11.180 I'm going to set background of dark gray. 01:23:12.400 --> 01:23:13.640 Color of white. 01:23:16.920 --> 01:23:20.640 Text align to the center. 01:23:22.820 --> 01:23:23.600 And what else? 01:23:24.300 --> 01:23:24.900 Padding. 01:23:26.300 --> 01:23:28.040 Let's do 20 pixels of padding. 01:23:28.040 --> 01:23:30.020 And then let's move it down a little. 01:23:30.320 --> 01:23:31.500 So margin top. 01:23:32.400 --> 01:23:34.100 We'll say 40 pixels. 01:23:34.940 --> 01:23:35.800 Save that. 01:23:35.980 --> 01:23:36.480 Reload. 01:23:36.920 --> 01:23:37.820 And there's our footer. 01:23:38.620 --> 01:23:41.380 Now the last step is to make it completely responsive. 01:23:41.580 --> 01:23:45.160 Right now if we go down small like this, I don't want these to be floated. 01:23:45.680 --> 01:23:47.700 So what we need to do is add a media query. 01:23:48.180 --> 01:23:50.360 We can add a media query by saying add media. 01:23:51.540 --> 01:23:57.680 And then the condition is if it's a max width of 600 pixels. 01:23:58.000 --> 01:24:02.420 So any styles we put in here are only going to be in effect if it's under 600 01:24:02.420 --> 01:24:04.020 pixels like this over here. 01:24:04.540 --> 01:24:09.400 And what we want to do is we want to remove the floats from the main and the 01:24:09.400 --> 01:24:09.920 sidebar. 01:24:10.020 --> 01:24:13.800 We also want to change the width to 100 percent for both of those. 01:24:13.940 --> 01:24:18.280 So let's say main width 100 percent. 01:24:18.480 --> 01:24:20.220 And then we want to say float none. 01:24:21.260 --> 01:24:23.940 Okay same thing with the sidebar. 01:24:24.200 --> 01:24:26.580 So basically they just go on top of each other. 01:24:29.080 --> 01:24:30.600 All right so let's save. 01:24:30.700 --> 01:24:31.160 Reload. 01:24:31.340 --> 01:24:32.040 And there we go. 01:24:32.160 --> 01:24:35.200 So we now have a responsive website using CSS. 01:24:36.560 --> 01:24:38.660 All right so that was a long video guys. 01:24:38.820 --> 01:24:39.960 Hopefully you learned a lot. 01:24:40.160 --> 01:24:42.260 I feel like it was pretty good. 01:24:42.340 --> 01:24:43.460 It was conveyed pretty well. 01:24:44.720 --> 01:24:47.800 Let me know if you think different or let me know if you liked it. 01:24:48.240 --> 01:24:49.840 Please subscribe if you liked it. 01:24:50.360 --> 01:24:50.940 And that's it. 01:24:51.020 --> 01:24:51.920 Thanks for watching guys. 01:24:52.000 --> 01:24:56.260 I do have a Patreon account that's linked in the description if you guys want to 01:24:56.260 --> 01:24:58.680 support me even further, even for a dollar per month. 01:24:59.140 --> 01:25:04.340 I do have a couple perks and I'm in the process of figuring out some more to give 01:25:04.340 --> 01:25:05.000 to my patrons. 01:25:05.700 --> 01:25:06.720 So check that out. 01:25:06.880 --> 01:25:07.580 It's in the description. 01:25:08.280 --> 01:25:09.540 And thanks for watching guys. 01:25:09.780 --> 01:25:10.380 See you next time.