1 00:00:08,922 --> 00:00:10,804 Hi, everybody, welcome back. 2 00:00:10,804 --> 00:00:14,493 Once again, I'm gonna ask you to stop learning and start coding and practicing. 3 00:00:14,493 --> 00:00:18,456 And we're gonna use the same example we used in our first coding break. 4 00:00:18,456 --> 00:00:22,124 So I wanted to show you what our old page was, right here. 5 00:00:22,124 --> 00:00:25,473 And see how we can change it into something that looks a little bit more 6 00:00:25,473 --> 00:00:26,858 like our new page over here, 7 00:00:26,858 --> 00:00:31,670 where we've been implementing some of our margins, paddings, and widths and heights. 8 00:00:31,670 --> 00:00:34,250 All right, so let's go ahead and get started. 9 00:00:34,250 --> 00:00:39,440 The first thing I wanna do is use the exact same style sheet I used for 10 00:00:39,440 --> 00:00:40,300 the first one. 11 00:00:40,300 --> 00:00:44,230 There's absolutely no need to recreate your style sheet when you can either just 12 00:00:44,230 --> 00:00:48,460 use this one and amend it, or if you'd like, use two style sheets. 13 00:00:48,460 --> 00:00:50,360 I'm gonna use just one. 14 00:00:50,360 --> 00:00:53,770 And the first thing I'm going to fix is the fact 15 00:00:53,770 --> 00:00:58,340 that I made what you might call a mistake in my earlier version. 16 00:00:58,340 --> 00:01:01,090 I have two rules styling h1. 17 00:01:01,090 --> 00:01:02,190 That's not a problem. 18 00:01:02,190 --> 00:01:04,390 The browser will apply all these styles. 19 00:01:04,390 --> 00:01:08,880 But what I really meant to do was I meant to style the body tag. 20 00:01:08,880 --> 00:01:10,401 So, let's take a look at what it looks like right now. 21 00:01:10,401 --> 00:01:12,665 And let's go back to our current version. 22 00:01:16,755 --> 00:01:17,760 And there we go. 23 00:01:17,760 --> 00:01:20,239 That already looks a little bit better than what we used to have. 24 00:01:21,940 --> 00:01:25,070 All right, so now that I'm on a good starting place for when I start, 25 00:01:25,070 --> 00:01:28,860 let's talk about the different things we can style in our page, all right? 26 00:01:28,860 --> 00:01:31,750 One of the first things I wanna do is I wanna add a little bit of 27 00:01:31,750 --> 00:01:33,000 margin to my page. 28 00:01:33,000 --> 00:01:37,955 If you look over here, there's not much space between the edge of the page and 29 00:01:37,955 --> 00:01:38,965 the actual browser. 30 00:01:38,965 --> 00:01:40,605 I wanna add just a little bit. 31 00:01:40,605 --> 00:01:42,705 You can add a little bit, you can add a lot. 32 00:01:42,705 --> 00:01:46,905 In fact while we code today, I'm gonna add a lot, just so you can see the effects. 33 00:01:46,905 --> 00:01:48,135 So how do you do that? 34 00:01:48,135 --> 00:01:51,272 How do you add that space between the element and its neighbors? 35 00:01:51,272 --> 00:01:53,663 You go in and we're going to add a margin. 36 00:01:53,663 --> 00:01:57,951 And, like I said, I think I’m gonna make it a little bit more pronounced than in 37 00:01:57,951 --> 00:01:59,623 the code I showed right there. 38 00:01:59,623 --> 00:02:02,085 I’m gonna go ahead and make it 4%. 39 00:02:02,085 --> 00:02:05,335 So when we do this, I’m gonna go back to the page. 40 00:02:05,335 --> 00:02:06,856 I’m gonna reload. 41 00:02:06,856 --> 00:02:11,350 And you can see everything is kind of moved in, all right? 42 00:02:11,350 --> 00:02:15,657 Margin just adds a little space and makes it more visually appealing to your users, 43 00:02:15,657 --> 00:02:16,540 all right? 44 00:02:16,540 --> 00:02:19,550 Let's think of some other things that we wanna do. 45 00:02:19,550 --> 00:02:24,780 Clearly I probably wanna add a little bit of space between 46 00:02:24,780 --> 00:02:27,410 my links and the bottom of the text. 47 00:02:27,410 --> 00:02:29,430 So this is a little bit different. 48 00:02:29,430 --> 00:02:31,660 I'm not saying to separate the elements, 49 00:02:31,660 --> 00:02:36,030 I'm saying I need more space between my border and the element itself. 50 00:02:36,030 --> 00:02:41,350 So in that case, what we wanna use isn't margin, we want to modify the padding. 51 00:02:41,350 --> 00:02:44,750 So let's go in and see where we think we would do that. 52 00:02:44,750 --> 00:02:48,940 All right, so I need to add padding inside the whole header. 53 00:02:48,940 --> 00:02:50,540 So let's go right here and 54 00:02:50,540 --> 00:02:55,370 I'm going to change it to, padding, again you can pick anything you want. 55 00:02:55,370 --> 00:02:57,670 You can use pixels, you can use percents. 56 00:02:57,670 --> 00:03:00,410 I'll go ahead in this case, I'm just gonna put in pixels. 57 00:03:00,410 --> 00:03:06,640 And I'm gonna say please add 15 pixels of space between the border and the bottom. 58 00:03:06,640 --> 00:03:08,530 So, refresh, oh, make sure I save. 59 00:03:10,410 --> 00:03:11,440 And refresh, and 60 00:03:11,440 --> 00:03:15,130 you can see I've added padding all the way around the entire thing. 61 00:03:15,130 --> 00:03:17,741 If I really only wanted padding to be on the bottom, 62 00:03:17,741 --> 00:03:21,860 I could have said padding bottom, or padding right, or padding left. 63 00:03:21,860 --> 00:03:24,580 All right, let's go ahead and style something else. 64 00:03:24,580 --> 00:03:29,850 One of the big things I changed is that instead of having 65 00:03:29,850 --> 00:03:33,860 one underneath each other, I've changed these so they're next to each other. 66 00:03:33,860 --> 00:03:37,992 So remember, by default, sections are block, they're display block, 67 00:03:37,992 --> 00:03:40,850 which means don't let anyone else come next to me. 68 00:03:40,850 --> 00:03:41,890 In order to change it so 69 00:03:41,890 --> 00:03:46,900 they're next to each other, we can either use inline or inline-block. 70 00:03:46,900 --> 00:03:50,270 Almost always when given this choice, you're going to use inline, 71 00:03:50,270 --> 00:03:54,040 because when you use inline, you can include a height and a width. 72 00:03:54,040 --> 00:03:57,110 All right, go back to my CSS file. 73 00:03:58,300 --> 00:03:59,680 I don't wanna change the header. 74 00:03:59,680 --> 00:04:01,389 I think I'm pretty good with h1. 75 00:04:01,389 --> 00:04:04,988 The nav, the h2, oh, you know what? 76 00:04:04,988 --> 00:04:08,051 I don't have anything that I can change here, so let's go ahead and 77 00:04:08,051 --> 00:04:08,818 put in a new tag. 78 00:04:08,818 --> 00:04:16,213 Section, all right, I want all three of these sections next to each other. 79 00:04:16,213 --> 00:04:21,880 So what I could do is I could pick maybe 400 pixels each. 80 00:04:21,880 --> 00:04:26,500 Well, that would mean that the browser has to be at least 1,200 pixels. 81 00:04:26,500 --> 00:04:29,030 I could pick 150 pixels each. 82 00:04:29,030 --> 00:04:32,650 Well, that means they're gonna be really skinny even if they don't need to be. 83 00:04:32,650 --> 00:04:36,553 So let's use percentages. 84 00:04:36,553 --> 00:04:41,110 I'm gonna use 30%, not 33%, because I wanna give a little bit of elbow room for 85 00:04:41,110 --> 00:04:43,211 paddings, margins, borders, etc. 86 00:04:43,211 --> 00:04:48,780 All right, let's go ahead and look at it right now, I wanna see what it looks like. 87 00:04:48,780 --> 00:04:54,950 You can see I've made it 30%, but they're still not next to each other. 88 00:04:54,950 --> 00:04:56,309 That's because they're still block. 89 00:04:56,309 --> 00:05:01,997 Let's change them to inline-block, Display. 90 00:05:05,495 --> 00:05:08,580 And let's hope for the best. 91 00:05:08,580 --> 00:05:09,250 There we go. 92 00:05:09,250 --> 00:05:11,600 I've got all three things next to each other. 93 00:05:11,600 --> 00:05:14,795 Still not looking exactly the way we want, but it's step by step. 94 00:05:14,795 --> 00:05:16,955 It's making this little bit of progress at a time. 95 00:05:16,955 --> 00:05:21,930 I'm gonna go ahead and fix this fact that they aren't all lined up at the top. 96 00:05:21,930 --> 00:05:30,150 And I'm gonna say float: left; refresh and we're getting closer, 97 00:05:30,150 --> 00:05:34,420 we're getting closer, but there's something still a little bit wrong here. 98 00:05:34,420 --> 00:05:35,960 First, they're squished. 99 00:05:35,960 --> 00:05:37,530 I don't like them all squished together. 100 00:05:37,530 --> 00:05:40,080 So how do you separate different elements from each other? 101 00:05:40,080 --> 00:05:42,982 How do you add a little bit of space between elements? 102 00:05:42,982 --> 00:05:46,793 All right, if we were in class, I'd have that one student that's like ooh, ooh, 103 00:05:46,793 --> 00:05:48,709 I know, yes, it's margin, all right? 104 00:05:51,630 --> 00:05:56,403 Margin, I'm only gonna put a margin on one side, let's say margin-right. 105 00:05:56,403 --> 00:05:59,480 And I will make it something small like 2%. 106 00:06:02,607 --> 00:06:04,200 All right, we're getting closer. 107 00:06:04,200 --> 00:06:05,750 We're getting closer. 108 00:06:05,750 --> 00:06:08,355 Still not quite what we wanted, but this is how it works. 109 00:06:08,355 --> 00:06:09,400 You add a little bit. 110 00:06:09,400 --> 00:06:10,689 You adjust. 111 00:06:10,689 --> 00:06:11,235 You add a little bit. 112 00:06:11,235 --> 00:06:15,637 So one of the big problems here is that when you float things to the left, or 113 00:06:15,637 --> 00:06:17,057 when you float things, 114 00:06:17,057 --> 00:06:21,752 once you're done floating when you don't want those next elements to float. 115 00:06:21,752 --> 00:06:25,960 You actually have to go in and say, oh, but I don't wanna float this part. 116 00:06:25,960 --> 00:06:28,600 So once we're done with these three sections, 117 00:06:28,600 --> 00:06:31,850 we don't want the footer to also be have them next to them. 118 00:06:31,850 --> 00:06:33,684 So let's go in and adjust the footer code. 119 00:06:33,684 --> 00:06:36,691 Down here. 120 00:06:36,691 --> 00:06:41,163 All right, if you remember if you don't want things to float next to you, 121 00:06:41,163 --> 00:06:43,255 we're going to use clear: both, 122 00:06:43,255 --> 00:06:46,879 which means don't let anything float on either side of me. 123 00:06:49,707 --> 00:06:51,580 Oh, much better, right? 124 00:06:51,580 --> 00:06:52,221 It looks much, much better. 125 00:06:52,221 --> 00:06:54,868 And other than the fact that I've got weird colors, 126 00:06:54,868 --> 00:06:56,559 we're very close to right here. 127 00:06:56,559 --> 00:06:59,943 I actually kinda like the gray on the header and the footer so 128 00:06:59,943 --> 00:07:01,450 I'm gonna leave it. 129 00:07:01,450 --> 00:07:04,820 But what I do wanna do, is I wanna make that picture smaller. 130 00:07:04,820 --> 00:07:08,034 This little icon right here, let's make it look a little more like this. 131 00:07:08,034 --> 00:07:11,273 And that's very simple for the approach we're gonna use right now. 132 00:07:11,273 --> 00:07:13,049 Let's go ahead. 133 00:07:13,049 --> 00:07:14,617 I'm going to add an image. 134 00:07:14,617 --> 00:07:18,390 And I'm gonna go ahead and just hard code it right now. 135 00:07:18,390 --> 00:07:20,211 So, I'm gonna make it 75 pixels. 136 00:07:20,211 --> 00:07:26,563 Oops, gonna have to say width:75px. 137 00:07:26,563 --> 00:07:28,571 Let's take a look at how we did. 138 00:07:28,571 --> 00:07:30,754 Yeah, that looks okay. 139 00:07:30,754 --> 00:07:34,478 If I didn't like it and I wanted to play with it, I wouldn't go in here and 140 00:07:34,478 --> 00:07:36,507 try 100 and then 80 and then 52. 141 00:07:36,507 --> 00:07:39,960 What I would do is I'd go in here and do Inspect Element again. 142 00:07:43,090 --> 00:07:46,860 And I would, oh, make this much bigger cuz otherwise everything looks really crazy. 143 00:07:49,670 --> 00:07:51,740 And I would go into the image and 144 00:07:51,740 --> 00:07:55,860 I'd say, okay what does it look like if instead I make it 150 pixels? 145 00:07:55,860 --> 00:07:56,392 Does that look better? 146 00:07:56,392 --> 00:07:59,085 Or oops, don't wanna do that. 147 00:07:59,085 --> 00:08:03,150 Or what if I make it 125 pixels? 148 00:08:03,150 --> 00:08:03,800 Do I like that? 149 00:08:04,870 --> 00:08:06,300 Pick a value you like, and 150 00:08:06,300 --> 00:08:10,240 once you find something that looks good to you, copy that value into the style sheet. 151 00:08:10,240 --> 00:08:14,337 Cuz if I refresh it right now, my inspect element values go away. 152 00:08:14,337 --> 00:08:20,140 All right, let's go in here, fix it, save it, and refresh. 153 00:08:20,140 --> 00:08:22,396 All right, so this is great, 154 00:08:22,396 --> 00:08:27,210 these are the types of things I want you doing in this class. 155 00:08:27,210 --> 00:08:31,120 I want you grabbing an HTML file and saying ooh, can I change this around? 156 00:08:31,120 --> 00:08:32,920 What can I do to make it different? 157 00:08:32,920 --> 00:08:36,460 Clearly, this page we've created right here isn't a finished product. 158 00:08:36,460 --> 00:08:39,390 It's not exactly how you'd want it to be out there on the web. 159 00:08:39,390 --> 00:08:41,430 So we're going to keep learning new things and 160 00:08:41,430 --> 00:08:44,050 we're going to keep styling things in different ways. 161 00:08:44,050 --> 00:08:46,470 And as you keep practicing, you're confidence and 162 00:08:46,470 --> 00:08:48,350 your ability is really going to grow. 163 00:08:48,350 --> 00:08:49,400 And that's what I want. 164 00:08:49,400 --> 00:08:51,140 I want your confidence to be very, 165 00:08:51,140 --> 00:08:54,480 very high by the end of week four that you can do this. 166 00:08:54,480 --> 00:08:55,200 So good luck.