1 00:00:08,834 --> 00:00:11,060 Hi, everybody, welcome back. 2 00:00:11,060 --> 00:00:16,250 One of the things I really wanna stress in this Introduction to CSS course Is that 3 00:00:16,250 --> 00:00:20,660 there's this need to stop and practice and review what we've learned so far. 4 00:00:20,660 --> 00:00:23,740 So I'm gonna make sure that I include little things that I'm gonna call 5 00:00:23,740 --> 00:00:24,430 Code Together. 6 00:00:24,430 --> 00:00:28,400 So, if you're watching this right now, and you don't have your laptop next to you or 7 00:00:28,400 --> 00:00:33,070 whatever you're using to code, I really hope you'll stop, go get that, and 8 00:00:33,070 --> 00:00:36,670 code along together with me because just listening with me doesn't really give you 9 00:00:36,670 --> 00:00:41,230 the true experience you need to type it in and make mistakes as we go along together. 10 00:00:41,230 --> 00:00:43,920 Okay, so let's go ahead and begin. 11 00:00:43,920 --> 00:00:47,250 What I'm going to do in this video is I'm gonna go back to an oldie but 12 00:00:47,250 --> 00:00:49,640 a goodie that we did in HTML five. 13 00:00:49,640 --> 00:00:51,850 And I want us to go in together and style it. 14 00:00:53,920 --> 00:00:56,080 Alright, let's start by making our CSS file. 15 00:00:56,080 --> 00:00:57,770 I'm gonna go ahead and create a new one now, 16 00:00:57,770 --> 00:01:03,330 go up here to file, new file, or you can do command N. 17 00:01:03,330 --> 00:01:07,100 And the first thing you want to do is you want to save this as a .CSS file, so 18 00:01:07,100 --> 00:01:11,190 then that way your editor knows to color things the way you want it to color. 19 00:01:11,190 --> 00:01:13,830 Now, whenever I'm designing pages, 20 00:01:13,830 --> 00:01:18,770 I keep all of my HTML files in one folder and my CSS files in another folder. 21 00:01:18,770 --> 00:01:20,730 And I really encourage you to do the same thing. 22 00:01:21,980 --> 00:01:25,360 So, I'm gonna go ahead and go into my CSS folder. 23 00:01:25,360 --> 00:01:31,330 And I'm gonna call this, let's call it together-1.css. 24 00:01:31,330 --> 00:01:34,200 It's really important that you remember to put that file extension, or 25 00:01:34,200 --> 00:01:35,170 things aren't going to work. 26 00:01:36,190 --> 00:01:39,060 All right, so here's my old, boring page. 27 00:01:39,060 --> 00:01:42,000 What people typically do is they style from the top of the page and 28 00:01:42,000 --> 00:01:43,220 work their way down. 29 00:01:43,220 --> 00:01:47,290 So, I want you to pick your own values, but let's together go ahead and 30 00:01:47,290 --> 00:01:48,070 style my header. 31 00:01:50,180 --> 00:01:51,176 Oops, wrong thing here. 32 00:01:53,628 --> 00:01:55,556 And we can give it a background. 33 00:01:55,556 --> 00:01:59,960 I'm gonna try B3B3B3. 34 00:01:59,960 --> 00:02:01,670 We can give it a larger font if you want. 35 00:02:01,670 --> 00:02:03,210 I'm gonna say font size. 36 00:02:03,210 --> 00:02:07,423 Let's make it 150%. 37 00:02:07,423 --> 00:02:10,430 Just a little bit something different. 38 00:02:10,430 --> 00:02:14,360 I'm gonna save this, and I always really encourage students to make small changes 39 00:02:14,360 --> 00:02:16,940 to their code and then check and see what happened. 40 00:02:16,940 --> 00:02:18,690 So let's see if we changed anything over here. 41 00:02:20,010 --> 00:02:23,130 And so now I'm going to reload it and see what happened, and 42 00:02:23,130 --> 00:02:25,400 if you notice, nothing happened. 43 00:02:25,400 --> 00:02:30,930 Well, the problem is I didn't link the style sheet correctly to the HTML file. 44 00:02:30,930 --> 00:02:35,670 Remember how I told you I always think put things in a folder called CSS? 45 00:02:35,670 --> 00:02:36,891 I need to include that. 46 00:02:38,726 --> 00:02:40,514 All right, come back. 47 00:02:40,514 --> 00:02:41,980 Reload. 48 00:02:41,980 --> 00:02:43,510 Oh, hey! I’ve got a little bit of something 49 00:02:43,510 --> 00:02:44,580 going on there. 50 00:02:44,580 --> 00:02:45,150 All right? 51 00:02:45,150 --> 00:02:48,420 So, now let’s go ahead and just add a few more things. 52 00:02:48,420 --> 00:02:51,010 I know it doesn’t look exactly like my example. 53 00:02:51,010 --> 00:02:55,580 But one of the things I wanna do next is, I wanna go ahead and style, let's see, 54 00:02:55,580 --> 00:02:56,400 my header. 55 00:02:56,400 --> 00:02:58,330 Let's give the entire header a background color. 56 00:02:58,330 --> 00:03:01,520 All right. 57 00:03:01,520 --> 00:03:02,850 You can pick anything you like. 58 00:03:04,100 --> 00:03:10,080 And I'm going to pick background: I think I have 66666, all right. 59 00:03:15,630 --> 00:03:18,770 And let's go ahead and I really want to align that text. 60 00:03:18,770 --> 00:03:21,590 So I'm gonna call it text-align: center. 61 00:03:21,590 --> 00:03:24,680 Save, refresh. 62 00:03:24,680 --> 00:03:25,520 Oh we're getting there! 63 00:03:25,520 --> 00:03:28,430 The page is starting to look slightly different all the time. 64 00:03:28,430 --> 00:03:32,320 Now the one thing that's confusing me is it doesn't appear to like my background. 65 00:03:32,320 --> 00:03:38,530 So if I go back, I'm gonna realize, oh, I forgot that # sign right in front. 66 00:03:38,530 --> 00:03:40,940 And make one, two, three, four, five, six. 67 00:03:40,940 --> 00:03:42,570 Save it here. 68 00:03:42,570 --> 00:03:43,420 Refresh. 69 00:03:43,420 --> 00:03:44,550 There we go. 70 00:03:44,550 --> 00:03:47,490 Now these colors are really ugly and really hard for you to see. 71 00:03:47,490 --> 00:03:48,600 And I realize that. 72 00:03:48,600 --> 00:03:52,129 So let's go ahead and play with things to make this a little bit easier to see. 73 00:03:53,920 --> 00:03:59,615 Let's go ahead and put in. 74 00:03:59,615 --> 00:04:02,000 Let's change the h1 so it's a different color and 75 00:04:05,970 --> 00:04:08,300 let's go ahead and change the navigation. 76 00:04:09,630 --> 00:04:14,580 So that we have, I'm going to change the font, let's try the font variant. 77 00:04:14,580 --> 00:04:16,000 I like the font variant. 78 00:04:16,000 --> 00:04:19,830 It lets you put things into uppercase, lowercase, different things like that. 79 00:04:19,830 --> 00:04:21,730 We also have font size. 80 00:04:21,730 --> 00:04:26,537 I'm still not happy with the size, so I'm going to make it 150%, 81 00:04:26,537 --> 00:04:30,010 and the last one I'm going to do is font family. 82 00:04:30,010 --> 00:04:34,560 Now if you recall, with font-family it's very customary to give it more than 83 00:04:34,560 --> 00:04:39,150 one value because not every browser supports every font-family. 84 00:04:39,150 --> 00:04:42,578 So in my case, I'm gonna go ahead and try putting in Arial, 85 00:04:42,578 --> 00:04:47,420 Times New Roman. 86 00:04:47,420 --> 00:04:49,860 If you have a font that's made up of multiple words, 87 00:04:49,860 --> 00:04:51,960 you need to put them inside the quotes. 88 00:04:51,960 --> 00:04:53,700 And then finally just Serif. 89 00:04:55,840 --> 00:04:57,520 Now this is how I code. 90 00:04:57,520 --> 00:04:58,980 I code making mistakes. 91 00:04:58,980 --> 00:05:00,150 I code with typos. 92 00:05:00,150 --> 00:05:04,660 To be honest, I rarely code in a button down shirt looking so uncomfortable. 93 00:05:04,660 --> 00:05:07,640 The way to code is comfortably with a coke and a Hershey bar so 94 00:05:07,640 --> 00:05:10,310 that when you're done you have these celebratory little bites of chocolate. 95 00:05:10,310 --> 00:05:14,500 But for now, I'm just gonna do the best I can to lead you along. 96 00:05:14,500 --> 00:05:16,350 I changed a lot of things. 97 00:05:16,350 --> 00:05:17,300 Let's see what happened. 98 00:05:18,340 --> 00:05:21,680 You can see I'm gonna make a little bit bigger, we're starting to get there. 99 00:05:21,680 --> 00:05:24,940 We've got the background colors, we have the things like that. 100 00:05:24,940 --> 00:05:28,040 So let's go ahead and just style a few more things together, 101 00:05:28,040 --> 00:05:30,710 and then we'll go on and learn a little bit more. 102 00:05:30,710 --> 00:05:33,170 I would like to see you pick your own things for h2. 103 00:05:33,170 --> 00:05:36,340 So h2 I'm gonna pick a different color, 104 00:05:36,340 --> 00:05:42,860 let's try same color 666666 and a different background. 105 00:05:42,860 --> 00:05:47,000 I'm going to use 00B7EA. 106 00:05:48,760 --> 00:05:50,730 So, does it matter? 107 00:05:50,730 --> 00:05:54,280 Does it matter whether I type it as EA uppercase, lowercase? 108 00:05:54,280 --> 00:05:55,560 It doesn't matter at all. 109 00:05:55,560 --> 00:05:58,190 The important thing is for you to usually be consistent so 110 00:05:58,190 --> 00:06:00,840 you don't mess yourself up as you're going back and forth. 111 00:06:00,840 --> 00:06:01,780 All right? 112 00:06:01,780 --> 00:06:02,580 We'll refresh again. 113 00:06:02,580 --> 00:06:04,470 All right. 114 00:06:04,470 --> 00:06:06,300 It's starting to look much different. 115 00:06:06,300 --> 00:06:07,840 This isn't a lot of style. 116 00:06:07,840 --> 00:06:10,250 It's only one, two, three, four, five. 117 00:06:10,250 --> 00:06:13,620 Five rules and we already have a much different look. 118 00:06:13,620 --> 00:06:17,460 I'm gonna go ahead and make the screen smaller because when I put 119 00:06:17,460 --> 00:06:21,130 in that font size 150%, it makes a big difference. 120 00:06:21,130 --> 00:06:22,000 All right. 121 00:06:22,000 --> 00:06:26,380 One kind of last cool thing I'd like you to try to do is go ahead and 122 00:06:26,380 --> 00:06:29,040 try to style the summary in the details. 123 00:06:29,040 --> 00:06:33,600 Because if I want to make just the, I grew up in Ashtabula Ohio part, 124 00:06:33,600 --> 00:06:37,080 how can you make that italics but not the rest? 125 00:06:37,080 --> 00:06:40,290 All right so if you remember what the HTML code looks like, 126 00:06:40,290 --> 00:06:46,560 let me show you a quick example, is that right down here I have my details tag and 127 00:06:46,560 --> 00:06:49,300 if you haven't seen it before, I put the word open in 128 00:06:49,300 --> 00:06:52,880 which means by default show it is open, so no one has to click on it. 129 00:06:52,880 --> 00:06:54,100 I've got my details. 130 00:06:54,100 --> 00:06:57,510 I've got my summary where the My Childhood part came up, and 131 00:06:57,510 --> 00:06:59,420 then I have all this part. 132 00:06:59,420 --> 00:07:04,028 So if you want to make that italics, and only that, how do you do it? 133 00:07:04,028 --> 00:07:05,573 All right. 134 00:07:07,361 --> 00:07:11,880 What we're gonna start with, is we are going to style the details tag. 135 00:07:13,940 --> 00:07:17,250 And I'm gonna scroll up here a little bit so you guys can see a little better, 136 00:07:17,250 --> 00:07:17,838 hopefully. 137 00:07:20,131 --> 00:07:24,872 And what I'm gonna say is I want to make everything italic, and 138 00:07:24,872 --> 00:07:29,449 the way you do that is you go and put in font-style: italic. 139 00:07:29,449 --> 00:07:31,360 Got it? 140 00:07:31,360 --> 00:07:34,150 Now this isn't gonna be exactly what we wanted because what I've done is I've 141 00:07:34,150 --> 00:07:35,950 italicized everything. 142 00:07:35,950 --> 00:07:38,110 So now you wanna go back and say, but you know what? 143 00:07:38,110 --> 00:07:39,540 I don't want the summary. 144 00:07:39,540 --> 00:07:40,940 I don't want the summary in italics. 145 00:07:42,770 --> 00:07:43,540 Oops, go back here. 146 00:07:45,880 --> 00:07:50,230 Summary and I can say font. 147 00:07:51,260 --> 00:07:55,540 Oops, font-style. 148 00:07:55,540 --> 00:07:58,310 Well how you make it so it's not italics, 149 00:07:58,310 --> 00:08:01,340 by default most things aren't, you can actually put in the word normal. 150 00:08:02,540 --> 00:08:03,040 All right. 151 00:08:04,940 --> 00:08:05,680 So that's it. 152 00:08:05,680 --> 00:08:08,720 Now we've got this part in italics and this part in bold. 153 00:08:08,720 --> 00:08:12,338 For the most part we're finished but I am going to add one little thing, 154 00:08:12,338 --> 00:08:15,476 because its really common for people to style their header and 155 00:08:15,476 --> 00:08:17,491 their footer in a very similar manner. 156 00:08:17,491 --> 00:08:20,220 So let's go and add style my footer. 157 00:08:23,120 --> 00:08:27,570 And what I want to do is I wanna give it the same background color 158 00:08:29,850 --> 00:08:31,180 that my header had. 159 00:08:31,180 --> 00:08:35,720 So background, one, two, three, four, five, six, boom. 160 00:08:35,720 --> 00:08:39,680 And there you go. 161 00:08:39,680 --> 00:08:44,640 So what we've done now is we've gone from a very simple, basic HTML file and 162 00:08:44,640 --> 00:08:48,020 we've started adding just a little bit of color, a little bit of font size, 163 00:08:48,020 --> 00:08:49,810 a little different things like that. 164 00:08:49,810 --> 00:08:52,360 Let me show you what the original file looked like again and 165 00:08:52,360 --> 00:08:54,220 we'll look at them next to each other. 166 00:08:54,220 --> 00:08:55,790 I'll comment out my style sheet. 167 00:08:55,790 --> 00:09:04,289 I'll open it up and you can see these are two very different looking pages. 168 00:09:06,320 --> 00:09:08,430 But they're exact same HTML. 169 00:09:08,430 --> 00:09:11,560 Okay great, these are the type of things you're gonna need to do for 170 00:09:11,560 --> 00:09:13,010 the homework in this section. 171 00:09:13,010 --> 00:09:15,150 So practice here, come back and watch me, 172 00:09:15,150 --> 00:09:17,180 if it helps you out a little bit getting over humps. 173 00:09:17,180 --> 00:09:20,710 But the important thing is, code, code, code, good luck.