1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [MUSIC PLAYING] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON BUCHHOLTZ-AU: So we're basically just going 5 00:00:12,224 --> 00:00:14,629 to give you a rundown of CSS, because we know 6 00:00:14,629 --> 00:00:16,420 that it wasn't covered in all the sections. 7 00:00:16,420 --> 00:00:20,090 And we really want to make sure that you guys have this tool at your disposal, 8 00:00:20,090 --> 00:00:24,790 because it has the ability to make your websites look much prettier. 9 00:00:24,790 --> 00:00:28,660 >> And if you're building a website, then you probably want to make it pretty. 10 00:00:28,660 --> 00:00:31,372 I mean, you don't have to, but I'd suggest it. [LAUGHS] 11 00:00:31,372 --> 00:00:35,430 If you want users to use it, you might want to make it a little [INAUDIBLE]. 12 00:00:35,430 --> 00:00:39,130 So we're going to try and give you just some basic tools and understanding, 13 00:00:39,130 --> 00:00:42,340 so that when you go out and you're researching things about CSS, 14 00:00:42,340 --> 00:00:45,902 it's not complete gibberish, like CSS sometimes to be. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Yeah. 16 00:00:47,240 --> 00:00:49,930 Allison said it pretty well. 17 00:00:49,930 --> 00:00:53,250 So I guess the first thing we should start with is what is CSS? 18 00:00:53,250 --> 00:00:55,750 So CSS is awesome. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON BUCHHOLTZ-AU: That's the name of our seminar. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Yeah. 22 00:00:58,434 --> 00:01:00,130 It's really important that you understand that by then. 23 00:01:00,130 --> 00:01:03,090 If you only take away one thing, it's that CSS if awesome. 24 00:01:03,090 --> 00:01:06,180 Two is CSS stands for Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 So at its core, CSS is a style sheet, meaning 26 00:01:10,380 --> 00:01:13,200 it allows you to style a web page. 27 00:01:13,200 --> 00:01:16,609 And then what that means, it's a way to add style to your websites. 28 00:01:16,609 --> 00:01:18,900 So by style, we mean everything that's not structural-- 29 00:01:18,900 --> 00:01:24,350 so things like colors, background images, borders, like, padding, 30 00:01:24,350 --> 00:01:25,040 margins. 31 00:01:25,040 --> 00:01:27,310 We'll talk about what all that means in a bit. 32 00:01:27,310 --> 00:01:30,110 >> So we've just gone ahead and opened both of those up in gedit. 33 00:01:30,110 --> 00:01:32,680 So this is index.HTML. 34 00:01:32,680 --> 00:01:34,800 And this is main.css. 35 00:01:34,800 --> 00:01:36,829 So main.css has nothing. 36 00:01:36,829 --> 00:01:38,412 ALLISON BUCHHOLTZ-AU: No style so far. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: None. 38 00:01:39,245 --> 00:01:42,577 And as you'll see, it's a really ugly site. 39 00:01:42,577 --> 00:01:44,160 ALLISON BUCHHOLTZ-AU: It's just plain. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Yeah. 41 00:01:45,820 --> 00:01:49,150 Yeah, it's not ugly, it's just minimalist. 42 00:01:49,150 --> 00:01:53,430 And then here we have index.html. 43 00:01:53,430 --> 00:01:55,729 And so for a quick recap of HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 you want to just talk about the page? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON BUCHHOLTZ-AU: Yeah. 46 00:01:58,395 --> 00:02:01,100 So obviously, we have our HTML tag, which just names HTML file. 47 00:02:01,100 --> 00:02:07,080 We have our header here, with CSS Awesomeness, which-- if you go back. 48 00:02:07,080 --> 00:02:07,720 Where is that? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Yeah, you can see. 51 00:02:10,301 --> 00:02:12,092 ALLISON BUCHHOLTZ-AU: And notice the header 52 00:02:12,092 --> 00:02:14,120 is this tab header right up here. 53 00:02:14,120 --> 00:02:17,130 And then "Hello, world!" is the text that we have just 54 00:02:17,130 --> 00:02:19,620 displaying on the web page, which is-- go back. 55 00:02:19,620 --> 00:02:21,290 Back. 56 00:02:21,290 --> 00:02:24,287 Which is just in our body here-- the plain text. 57 00:02:24,287 --> 00:02:26,120 Also, one thing to notice, if you look here, 58 00:02:26,120 --> 00:02:29,410 Tomas switched up these two from our slide. 59 00:02:29,410 --> 00:02:32,035 So as long as you have all three of these, you're fine. 60 00:02:32,035 --> 00:02:34,044 They can be in whatever order they want. 61 00:02:34,044 --> 00:02:39,368 What's most important is just that you have each of those three things. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Add a doc type? 64 00:02:41,111 --> 00:02:42,235 ALLISON BUCHHOLTZ-AU: Yeah. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Yeah. 66 00:02:43,068 --> 00:02:43,769 Cool. 67 00:02:43,769 --> 00:02:46,102 ALLISON BUCHHOLTZ-AU: Apparently, my mics don't like me. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, give us a sec just while Allison switches out her mic. 69 00:02:49,650 --> 00:02:50,500 So yeah. 70 00:02:50,500 --> 00:02:52,030 So we have our main page. 71 00:02:52,030 --> 00:02:53,890 It's kind of unstyled. 72 00:02:53,890 --> 00:02:54,780 We don't have much. 73 00:02:54,780 --> 00:02:57,110 We just have basically text. 74 00:02:57,110 --> 00:02:59,470 We have the style sheet. 75 00:02:59,470 --> 00:03:00,220 We have the title. 76 00:03:00,220 --> 00:03:04,020 So just bare-boned components make a website. 77 00:03:04,020 --> 00:03:08,880 >> So from there, let's talk about what CSS is 78 00:03:08,880 --> 00:03:11,270 and what it looks like and all of that. 79 00:03:11,270 --> 00:03:12,047 So for that-- 80 00:03:12,047 --> 00:03:13,755 ALLISON BUCHHOLTZ-AU: Back to the slides. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Back to the slides. 82 00:03:15,200 --> 00:03:17,240 And Allison can take over. 83 00:03:17,240 --> 00:03:18,720 >> ALLISON BUCHHOLTZ-AU: Woo. 84 00:03:18,720 --> 00:03:19,220 OK. 85 00:03:19,220 --> 00:03:22,360 So in your CSS file, you're going to have 86 00:03:22,360 --> 00:03:25,010 a lot of these things called selectors. 87 00:03:25,010 --> 00:03:27,420 That will just be the basis of your CSS file. 88 00:03:27,420 --> 00:03:29,480 It's just going to be lots and lots of these. 89 00:03:29,480 --> 00:03:30,780 So selector. 90 00:03:30,780 --> 00:03:32,649 This is just the general anatomy. 91 00:03:32,649 --> 00:03:35,190 We're going to go through examples, because if you guys never 92 00:03:35,190 --> 00:03:38,400 watched my section, I feel like things in the abstract 93 00:03:38,400 --> 00:03:39,400 don't really make sense. 94 00:03:39,400 --> 00:03:41,110 It always helps to see the examples. 95 00:03:41,110 --> 00:03:42,420 >> So we have some selector. 96 00:03:42,420 --> 00:03:49,120 That's going to be some identifier for what we want the style to apply to. 97 00:03:49,120 --> 00:03:52,220 And then we can have any set of rules and values. 98 00:03:52,220 --> 00:03:55,680 So selectors that you might see might be something like body, 99 00:03:55,680 --> 00:04:00,262 or paragraph with P, or header, or whatever, 100 00:04:00,262 --> 00:04:02,000 whatever you want your HTML tags to be. 101 00:04:02,000 --> 00:04:03,570 >> So in this case, we have body. 102 00:04:03,570 --> 00:04:06,985 And we have some rule, which this corresponds 103 00:04:06,985 --> 00:04:09,610 to what your style applies to. 104 00:04:09,610 --> 00:04:12,720 So in this case, we have background color and font weight. 105 00:04:12,720 --> 00:04:16,200 So this is going to change the background of anything 106 00:04:16,200 --> 00:04:19,640 within any body tag of our HTML file. 107 00:04:19,640 --> 00:04:22,810 And it's going to give it this light blue value. 108 00:04:22,810 --> 00:04:24,820 >> So it's going to make the background light blue. 109 00:04:24,820 --> 00:04:28,660 And then anything within body is going to have a font weight bold. 110 00:04:28,660 --> 00:04:31,142 So it's just going to bold all of our text. 111 00:04:31,142 --> 00:04:32,970 And this is just one selector. 112 00:04:32,970 --> 00:04:34,680 But you could have very many of these. 113 00:04:34,680 --> 00:04:38,730 And as we're going to show later, a little bit more into how 114 00:04:38,730 --> 00:04:40,709 that works and more examples there. 115 00:04:40,709 --> 00:04:41,750 Anything you want to add? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: No. 117 00:04:42,499 --> 00:04:43,500 Allison got it. 118 00:04:43,500 --> 00:04:46,144 We're just going to cut up an example here on our example site. 119 00:04:46,144 --> 00:04:47,310 So let's actually take this. 120 00:04:47,310 --> 00:04:48,620 It's perfect. 121 00:04:48,620 --> 00:04:54,460 So I'm just going to copy and paste that right into our main.css file. 122 00:04:54,460 --> 00:04:56,530 And I'm going to save it. 123 00:04:56,530 --> 00:04:59,190 And then we will run it. 124 00:04:59,190 --> 00:05:01,600 So side note, one of the most frustrating things 125 00:05:01,600 --> 00:05:04,490 is if you don't save a file, and then you, like, reload the page, 126 00:05:04,490 --> 00:05:07,450 and like, why isn't the change happening? 127 00:05:07,450 --> 00:05:07,950 It happens. 128 00:05:07,950 --> 00:05:14,230 So here we saw that we made our website a light blue background 129 00:05:14,230 --> 00:05:16,560 and some bolded text. 130 00:05:16,560 --> 00:05:20,730 >> I should also mention, if you guys have questions about anything 131 00:05:20,730 --> 00:05:23,622 we're doing, please feel free to stop us and ask us. 132 00:05:23,622 --> 00:05:25,330 We're totally willing to field questions. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON BUCHHOLTZ-AU: Obviously, with CSS, everything builds upon itself. 135 00:05:31,930 --> 00:05:34,107 So if one thing doesn't make sense now, we 136 00:05:34,107 --> 00:05:35,690 don't want that to bog you down later. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: So let's kind of dissect this. 139 00:05:41,930 --> 00:05:44,210 So do you want to start with the selector here? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON BUCHHOLTZ-AU: Yeah. 141 00:05:45,979 --> 00:05:48,270 As I was saying before, body is just our selector here. 142 00:05:48,270 --> 00:05:50,950 So if we go back over to our index-- ah. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: Which I just closed. 144 00:05:53,245 --> 00:05:54,530 Give me a second. 145 00:05:54,530 --> 00:05:58,286 So File, Open, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON BUCHHOLTZ-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 So if you notice here, we have these body tags, right? 148 00:06:02,710 --> 00:06:06,270 So the selector just corresponds to the tags that we're talking about. 149 00:06:06,270 --> 00:06:07,670 So body right here. 150 00:06:07,670 --> 00:06:10,315 So what we're saying is everything-- can we go back? 151 00:06:10,315 --> 00:06:12,065 I wish I could just like touch the screen. 152 00:06:12,065 --> 00:06:14,410 It'd be so much cooler. 153 00:06:14,410 --> 00:06:17,150 >> So anything within those body tags, which we saw 154 00:06:17,150 --> 00:06:19,637 was just, like, the text, and the body in general 155 00:06:19,637 --> 00:06:20,970 refers to, like, the background. 156 00:06:20,970 --> 00:06:22,720 If you ever want to change the background, 157 00:06:22,720 --> 00:06:25,090 that's going to be in a body tag. 158 00:06:25,090 --> 00:06:27,120 Just has these rules applied to them. 159 00:06:27,120 --> 00:06:32,040 >> So if we were to go to index.html and-- actually, 160 00:06:32,040 --> 00:06:33,840 can we have something outside of the body? 161 00:06:33,840 --> 00:06:37,340 If we had, like, a footer or something, it wouldn't apply to this. 162 00:06:37,340 --> 00:06:40,900 But anything within these body tags is going 163 00:06:40,900 --> 00:06:44,960 to be affected by this body selector that we've made. 164 00:06:44,960 --> 00:06:47,405 So if you were to type something else there-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Let's drive that home. 166 00:06:49,400 --> 00:06:55,330 So if we had a div-- so that's just another tag you can have. 167 00:06:55,330 --> 00:06:56,350 I'm going to close it. 168 00:06:56,350 --> 00:06:58,280 Or let's make this a paragraph. 169 00:06:58,280 --> 00:07:01,430 So p stands for paragraph. 170 00:07:01,430 --> 00:07:02,560 And within that paragraph. 171 00:07:02,560 --> 00:07:05,650 And then I say, "This is text." 172 00:07:05,650 --> 00:07:06,369 Cool. 173 00:07:06,369 --> 00:07:09,160 And then I made this rule apply to a paragraph instead of the body. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 You'll see how it applies only to the newly formed paragraph, right, 176 00:07:17,320 --> 00:07:18,892 not the whole thing. 177 00:07:18,892 --> 00:07:20,090 Does that make sense? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON BUCHHOLTZ-AU: So this is all body, 179 00:07:21,840 --> 00:07:24,450 but now our selector just corresponds to the paragraph. 180 00:07:24,450 --> 00:07:27,050 So we just have bold and blue for this specific paragraph, 181 00:07:27,050 --> 00:07:30,760 because this is the only thing that is enclosed within the p tag. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Does that make sense sort of how things encapsulate other things? 183 00:07:35,349 --> 00:07:38,140 ALLISON BUCHHOLTZ-AU: Also, just to say, like, one of the best ways 184 00:07:38,140 --> 00:07:40,889 to really get comfortable with CSS is to just do things like this, 185 00:07:40,889 --> 00:07:42,050 just try it out. 186 00:07:42,050 --> 00:07:46,700 It's very simple to type something out, hit Refresh, and see what happens. 187 00:07:46,700 --> 00:07:48,940 And as with most CS, experimentation can often 188 00:07:48,940 --> 00:07:51,790 lead to a much better intuitive understanding. 189 00:07:51,790 --> 00:07:54,432 Even more so than us just, like, talking to you. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Absolutely 100% agree on that point. 191 00:07:58,350 --> 00:08:02,430 So if we go back to this, let's start dissecting exactly what these two do. 192 00:08:02,430 --> 00:08:04,550 So we have two rules on this. 193 00:08:04,550 --> 00:08:07,420 So the first one is background color. 194 00:08:07,420 --> 00:08:10,590 And you see that we've set it equal to a value, light blue. 195 00:08:10,590 --> 00:08:15,009 >> So in CSS, CSS is sort of very loose about how 196 00:08:15,009 --> 00:08:16,300 you're allowed to define color. 197 00:08:16,300 --> 00:08:17,800 So you can define them by name. 198 00:08:17,800 --> 00:08:20,650 You can also do something like "red." 199 00:08:20,650 --> 00:08:25,270 And then if we go back to this, you'll see that the background is red. 200 00:08:25,270 --> 00:08:29,040 You can also get really-- I think you can get pretty creative with this, 201 00:08:29,040 --> 00:08:29,540 can't you? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON BUCHHOLTZ-AU: I think you can use hex. 203 00:08:31,170 --> 00:08:31,250 Can't you? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Yeah. 205 00:08:32,083 --> 00:08:32,969 So you can use hex. 206 00:08:32,969 --> 00:08:34,490 But I'm thinking name-wise. 207 00:08:34,490 --> 00:08:35,385 Aren't there? 208 00:08:35,385 --> 00:08:37,260 ALLISON BUCHHOLTZ-AU: You can do quite a few. 209 00:08:37,260 --> 00:08:43,350 Pretty much like most colors that you can name-- like, I think salmon is one. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: We're gonna try salmon. 211 00:08:45,322 --> 00:08:47,530 ALLISON BUCHHOLTZ-AU: I think chartreuse is in there. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Yeah. 213 00:08:48,050 --> 00:08:48,550 See? 214 00:08:48,550 --> 00:08:50,080 So you can get pretty creative. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON BUCHHOLTZ-AU: You could get pretty creative. 216 00:08:52,246 --> 00:08:55,750 Like, if you can think of the color name, it's probably in there. 217 00:08:55,750 --> 00:08:57,840 If you really want fine detail, you can go hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Yeah. 219 00:08:58,673 --> 00:08:59,390 So hexadecimal. 220 00:08:59,390 --> 00:09:05,280 If you guys remember this back from your old PSET, Image Recover, 221 00:09:05,280 --> 00:09:08,300 you guys had to deal with these hex values. 222 00:09:08,300 --> 00:09:15,280 And sort of to recap what that is, hex has three values stored in it. 223 00:09:15,280 --> 00:09:17,250 So it's in groups of two increments. 224 00:09:17,250 --> 00:09:19,300 The first two represent the red value. 225 00:09:19,300 --> 00:09:22,420 The second one represents the green value. 226 00:09:22,420 --> 00:09:25,020 And the last one is blue? 227 00:09:25,020 --> 00:09:30,050 >> So FF happens to represent a hexadecimal 255. 228 00:09:30,050 --> 00:09:35,480 So you have 255 red, 255 green, and 0 for blue. 229 00:09:35,480 --> 00:09:37,670 And values range between 0 and 255. 230 00:09:37,670 --> 00:09:38,350 >> AUDIENCE: Right. 231 00:09:38,350 --> 00:09:41,472 So essentially, we could search the internet for any color we want, 232 00:09:41,472 --> 00:09:43,912 and identify the actually-known color spectrum combo, 233 00:09:43,912 --> 00:09:45,130 and then we could put it in? 234 00:09:45,130 --> 00:09:46,380 ALLISON BUCHHOLTZ-AU: Exactly. 235 00:09:46,380 --> 00:09:52,900 So you have pretty much complete control over the colors you want within CSS. 236 00:09:52,900 --> 00:09:55,069 Are we going to talk about background images later? 237 00:09:55,069 --> 00:09:56,110 Or do we want to do that? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Yeah. 239 00:09:56,240 --> 00:09:57,010 Absolutely. 240 00:09:57,010 --> 00:10:00,830 So first, just to show that red and green is yellow. 241 00:10:00,830 --> 00:10:03,120 And if you need some help finding this, you 242 00:10:03,120 --> 00:10:05,575 can Google something like "color picker." 243 00:10:05,575 --> 00:10:07,200 ALLISON BUCHHOLTZ-AU: Oh, it's so good. 244 00:10:07,200 --> 00:10:09,090 I love Color Picker. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com is a good example. 246 00:10:11,360 --> 00:10:14,580 And here, you'll see that you have a full Photoshop-like color picker. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON BUCHHOLTZ-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Also, the cool things are you can generate color schemes 249 00:10:16,980 --> 00:10:18,896 so that you don't have, like, clashing colors. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: And then here's the hex value up here. 251 00:10:22,780 --> 00:10:27,800 So you can always find online basically places to get the hex value from. 252 00:10:27,800 --> 00:10:31,667 It's not sort of that just, like, we see the colors of the world in numbers. 253 00:10:31,667 --> 00:10:34,000 It's more that we go online and find what color we want, 254 00:10:34,000 --> 00:10:36,850 and then take the number down. 255 00:10:36,850 --> 00:10:39,590 Because it's just a really easy way to reference things in CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON BUCHHOLTZ-AU: And then there's also-- 257 00:10:40,350 --> 00:10:41,630 I forget the exact name of the site. 258 00:10:41,630 --> 00:10:43,838 But there's definitely, I think, something from Adobe 259 00:10:43,838 --> 00:10:48,350 that generates color schemes for you, which is really cool, because you 260 00:10:48,350 --> 00:10:50,580 definitely-- it's sometimes hard to figure out, 261 00:10:50,580 --> 00:10:53,729 oh, if I want to use this color, what might be another useful one 262 00:10:53,729 --> 00:10:56,395 to use elsewhere on my site to, like, make it nice and cohesive. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allison's talking about one by Adobe called Kuler, I think. 265 00:11:04,260 --> 00:11:04,885 It's K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON BUCHHOLTZ-AU: I think so. 267 00:11:06,259 --> 00:11:07,610 I'm pretty sure that's the one. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: My favorite has always been Color Scheme Designer. 269 00:11:11,050 --> 00:11:13,998 >> ALLISON BUCHHOLTZ-AU: Ooh. 270 00:11:13,998 --> 00:11:16,010 >> TOMAS REIMERS: Which is now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON BUCHHOLTZ-AU: Ah, this is beautiful. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: And you can basically say, like, 273 00:11:18,818 --> 00:11:21,700 I want three colors next to each other. 274 00:11:21,700 --> 00:11:25,030 And then let's do something nice. 275 00:11:25,030 --> 00:11:29,210 And then you can get an example of what that might look like. 276 00:11:29,210 --> 00:11:32,470 And then if you hover over any of them, it gives you the hex value. 277 00:11:32,470 --> 00:11:35,010 >> So just as a good way to start thinking about color schemes 278 00:11:35,010 --> 00:11:39,570 or what colors in a website might go well together. 279 00:11:39,570 --> 00:11:45,655 Because that can be surprisingly not as easy to pick as you think. 280 00:11:45,655 --> 00:11:48,280 And then the other cool thing I've always found about this site 281 00:11:48,280 --> 00:11:51,480 is if you hit Examples, it'll show what an example website 282 00:11:51,480 --> 00:11:54,800 might look like using that color scheme. 283 00:11:54,800 --> 00:11:56,270 Anyway. 284 00:11:56,270 --> 00:11:57,863 >> Back to the actual CSS. 285 00:11:57,863 --> 00:12:01,112 ALLISON BUCHHOLTZ-AU: But obviously, we know these references might be useful. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: No, they definitely can be helpful. 287 00:12:03,195 --> 00:12:04,720 So the second rule, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON BUCHHOLTZ-AU: Yeah. 289 00:12:05,844 --> 00:12:08,280 The second rule is just corresponding to our font. 290 00:12:08,280 --> 00:12:11,520 So font weight is just kind of-- so the weight would 291 00:12:11,520 --> 00:12:15,220 be if you want just, like, normal or, like, thinner fonts, 292 00:12:15,220 --> 00:12:17,251 or in this case, like, bold. 293 00:12:17,251 --> 00:12:17,750 I forget. 294 00:12:17,750 --> 00:12:21,557 What's the if you wanted it-- is there a thinner one than just, like, normal? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: I don't actually know if there's a thinner one. 296 00:12:24,140 --> 00:12:24,680 ALLISON BUCHHOLTZ-AU: I forget. 297 00:12:24,680 --> 00:12:26,300 So font weight we typically just use for bold. 298 00:12:26,300 --> 00:12:29,010 If you want to get really into it, we're going to show you. 299 00:12:29,010 --> 00:12:34,317 W3Schools has all the different things you can do for fonts. 300 00:12:34,317 --> 00:12:36,900 But basically, if you ever want to change anything about font, 301 00:12:36,900 --> 00:12:39,330 it's always going to be, like, font-something. 302 00:12:39,330 --> 00:12:43,450 So it'll be like, font-family if you're trying to change the actual type. 303 00:12:43,450 --> 00:12:47,390 It'll be font-style if you want to make it like cursive, 304 00:12:47,390 --> 00:12:49,710 or italics, or whatnot. 305 00:12:49,710 --> 00:12:53,570 Or even font-color, if we wanted to change that. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 So you can change that. 308 00:12:56,925 --> 00:12:59,360 And sort of just to recap now, so you can 309 00:12:59,360 --> 00:13:01,400 see that we have the selector up here. 310 00:13:01,400 --> 00:13:03,000 We have these curly braces. 311 00:13:03,000 --> 00:13:06,735 And then we have rules delimited by semicolons. 312 00:13:06,735 --> 00:13:08,100 Does that make sense? 313 00:13:08,100 --> 00:13:09,130 Yeah? 314 00:13:09,130 --> 00:13:10,500 Cool. 315 00:13:10,500 --> 00:13:13,200 So if that is good-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON BUCHHOLTZ-AU: Back. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Let's talk specifically about what kind of selectors we have. 318 00:13:17,590 --> 00:13:19,790 'Cause right now we've sort of just shown tags. 319 00:13:19,790 --> 00:13:21,696 But you guys could see it plausible. 320 00:13:21,696 --> 00:13:23,570 Say you have two paragraphs on a page and you 321 00:13:23,570 --> 00:13:26,087 want to be able to style one but not the other, 322 00:13:26,087 --> 00:13:29,170 you don't just want to limit yourself to have to use different actual HTML 323 00:13:29,170 --> 00:13:33,410 tags to give them different styles. 324 00:13:33,410 --> 00:13:35,995 >> So we have three basic types of selectors. 325 00:13:35,995 --> 00:13:37,120 ALLISON BUCHHOLTZ-AU: Yeah. 326 00:13:37,120 --> 00:13:39,828 So we have tag, which is what we've been talking about right now. 327 00:13:39,828 --> 00:13:42,430 So that's kind of like your body or p. 328 00:13:42,430 --> 00:13:46,280 And then we have class, which is when we define it in our CSS file, 329 00:13:46,280 --> 00:13:49,907 it's always going to be dot, whatever you want the name of your class to be. 330 00:13:49,907 --> 00:13:51,490 And this can apply to multiple things. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Say you have five paragraphs and two of the three of them 333 00:13:57,610 --> 00:14:00,580 need to be styled the same, you would apply a class to it. 334 00:14:00,580 --> 00:14:03,040 And this is just the way we do it. 335 00:14:03,040 --> 00:14:05,600 We'll give you an example of where this actually shows up. 336 00:14:05,600 --> 00:14:11,030 But if you had maybe some tag p, after it, you would write, 337 00:14:11,030 --> 00:14:14,170 class equals whatever classes you want to apply to it. 338 00:14:14,170 --> 00:14:19,280 So whatever class selectors that we want to apply to this specific paragraph, 339 00:14:19,280 --> 00:14:21,300 we could just write like this. 340 00:14:21,300 --> 00:14:24,080 Of course, I think an example will make it much more concrete. 341 00:14:24,080 --> 00:14:27,270 >> The other one we have is id, which we denote 342 00:14:27,270 --> 00:14:29,707 with a hash, or pound, or hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: Octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON BUCHHOLTZ-AU: Octothorpe. 345 00:14:32,430 --> 00:14:34,550 That works, too. 346 00:14:34,550 --> 00:14:36,640 And this one should really be unique. 347 00:14:36,640 --> 00:14:39,880 They should only apply to one thing on your page. 348 00:14:39,880 --> 00:14:43,820 So whether that's a specific paragraph, or some item in a list, or whatever, 349 00:14:43,820 --> 00:14:45,090 this should be unique. 350 00:14:45,090 --> 00:14:48,730 And in the same way that we just say, like, class= "class1 class2," 351 00:14:48,730 --> 00:14:51,577 this can just be id of whatever we have. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Yeah. 353 00:14:52,410 --> 00:14:54,330 So let's definitely talk about examples here. 354 00:14:54,330 --> 00:14:58,170 And I'm just going to dive straight back into the code. 355 00:14:58,170 --> 00:15:02,090 So let's look at our HTML. 356 00:15:02,090 --> 00:15:03,960 And so we right now have one paragraph. 357 00:15:03,960 --> 00:15:05,510 This is text. 358 00:15:05,510 --> 00:15:09,151 I'm just going to modify it. "This is text 1." 359 00:15:09,151 --> 00:15:11,150 And then we're going to have a "This is text 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON BUCHHOLTZ-AU: Second one. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 So we now have "This is text 2," right? 363 00:15:16,810 --> 00:15:21,560 And we're going to see that if we reload the page, what we're going to find 364 00:15:21,560 --> 00:15:23,067 is we're gonna find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON BUCHHOLTZ-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS REIMERS: Yeah. 367 00:15:24,983 --> 00:15:27,570 We're going to find a "This is text 1," and "This is text 2." 368 00:15:27,570 --> 00:15:28,650 >> ALLISON BUCHHOLTZ-AU: And out lovely yellow color. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: And you'll see that our selector right now, 370 00:15:31,066 --> 00:15:34,940 which applies to p's, or paragraphs, affects both of them, 371 00:15:34,940 --> 00:15:38,700 because both of them meet the condition that they're both a p tag. 372 00:15:38,700 --> 00:15:40,360 That makes total sense. 373 00:15:40,360 --> 00:15:43,340 So the question is, well, what if we wanted to only get one? 374 00:15:43,340 --> 00:15:46,350 So exactly like Allison was saying, we have two other ways to do that. 375 00:15:46,350 --> 00:15:47,320 I'm going to start with id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON BUCHHOLTZ-AU: Let's start with id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: And both of these are attributes. 378 00:15:50,405 --> 00:15:53,200 So attributes exist in HTML. 379 00:15:53,200 --> 00:15:55,600 And what they are is something that you add 380 00:15:55,600 --> 00:15:58,840 inside the tag which is separate from the tag name. 381 00:15:58,840 --> 00:16:01,301 So you can have multiple attributes. 382 00:16:01,301 --> 00:16:01,800 Yeah? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON BUCHHOLTZ-AU: I was just going to say, from your example from PSET 7, 384 00:16:03,950 --> 00:16:06,650 if any of you try to align things to the center, 385 00:16:06,650 --> 00:16:08,550 you might have used "text align= center." 386 00:16:08,550 --> 00:16:10,550 And you noticed it probably should have centered 387 00:16:10,550 --> 00:16:12,650 your text or your navigation bar. 388 00:16:12,650 --> 00:16:15,499 So that's just also an attribute that you might be familiar with. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: There's a bunch of attributes that you'll see. 390 00:16:18,040 --> 00:16:18,539 Yeah. 391 00:16:18,539 --> 00:16:21,250 Like good reference to PSET 7. 392 00:16:21,250 --> 00:16:23,150 We have id. 393 00:16:23,150 --> 00:16:25,080 You can also have class, things like this. 394 00:16:25,080 --> 00:16:27,250 A single tag can have many attributes. 395 00:16:27,250 --> 00:16:33,140 So starting with id, let's pretend we want to have an id of-- I don't know. 396 00:16:33,140 --> 00:16:35,140 We'll call it special, because this one, we're 397 00:16:35,140 --> 00:16:37,867 going to make bold, and underline, and whatever. 398 00:16:37,867 --> 00:16:39,950 ALLISON BUCHHOLTZ-AU: It's gonna be super special. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: So this one, we have id special. 400 00:16:42,360 --> 00:16:48,140 So the way to select that, then, is in main.css, rather than have a p tag, 401 00:16:48,140 --> 00:16:51,500 you do #special, OK? 402 00:16:51,500 --> 00:16:55,538 And that selects the thing with id special. 403 00:16:55,538 --> 00:16:57,295 Does this make sense to everyone? 404 00:16:57,295 --> 00:16:57,920 AUDIENCE: Yeah. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 So now if we go back, we'll see-- whoops. 407 00:17:04,440 --> 00:17:06,240 Yeah. 408 00:17:06,240 --> 00:17:09,460 We'll see that it only selects the one with id special. 409 00:17:09,460 --> 00:17:10,622 Yeah? 410 00:17:10,622 --> 00:17:11,900 Sounds cool. 411 00:17:11,900 --> 00:17:12,570 Yes. 412 00:17:12,570 --> 00:17:15,456 >> AUDIENCE: Can something have an attribute of both class and an id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Yes. 414 00:17:16,359 --> 00:17:16,900 AUDIENCE: OK. 415 00:17:16,900 --> 00:17:20,887 And then what happens if you then give it some rules in CSS that conflict? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Absolutely. 417 00:17:21,970 --> 00:17:23,940 We're definitely going to talk about that. 418 00:17:23,940 --> 00:17:31,890 So exactly what you were getting at, you can also have classes. 419 00:17:31,890 --> 00:17:36,380 So let's pretend I had three paragraphs and I 420 00:17:36,380 --> 00:17:38,730 wanted to style the first two but not the third. 421 00:17:38,730 --> 00:17:42,850 Well, your first idea may be, well, I could just give the second one an id. 422 00:17:42,850 --> 00:17:45,590 But you can't, because an id, exactly like Allison was saying, 423 00:17:45,590 --> 00:17:47,330 has to be unique. 424 00:17:47,330 --> 00:17:50,860 >> So instead of an id, what you can use is you can use a class. 425 00:17:50,860 --> 00:17:57,880 And a class-- what it allows you to do is basically say, 426 00:17:57,880 --> 00:17:59,610 this belongs as part of a group. 427 00:17:59,610 --> 00:18:02,410 In this case, our group is called Special. 428 00:18:02,410 --> 00:18:06,500 And what we're going to do then is we're going to say-- rather than pound, 429 00:18:06,500 --> 00:18:08,070 we're going to use dot. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 And notice that the pound and dot only exist within the CSS file, 432 00:18:11,950 --> 00:18:12,797 not within the HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON BUCHHOLTZ-AU: Yes. 434 00:18:13,880 --> 00:18:15,185 Important distinction. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: I have had so much struggle, 436 00:18:17,510 --> 00:18:23,990 because I put the hash in the HTML and then just felt stupid for a long time. 437 00:18:23,990 --> 00:18:27,470 See how it selects both of the ones with that class? 438 00:18:27,470 --> 00:18:28,210 Cool. 439 00:18:28,210 --> 00:18:29,950 >> Now, things can have multiple classes. 440 00:18:29,950 --> 00:18:32,790 Let's say I wanted to make the first two have a background of yellow 441 00:18:32,790 --> 00:18:36,770 and the second two have a font color of blue. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 I don't really know why I'd want to do that, but I can. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON BUCHHOLTZ-AU: Might not recommended it for your website. 445 00:18:42,401 --> 00:18:43,880 But for our purposes, it'll do. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: It's not a good color scheme. 447 00:18:46,294 --> 00:18:49,210 ALLISON BUCHHOLTZ-AU: Well, yellow and blue are my high school colors. 448 00:18:49,210 --> 00:18:50,947 I don't know, though. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison's high school had a great color scheme. 450 00:18:53,530 --> 00:18:54,520 [LAUGHTER] 451 00:18:54,520 --> 00:18:59,120 So then what we can call this is let's call this-- so we have Special 452 00:18:59,120 --> 00:19:00,030 and we have Pretty. 453 00:19:00,030 --> 00:19:02,405 I suggest, for this, you use much more descriptive names. 454 00:19:02,405 --> 00:19:05,820 ALLISON BUCHHOLTZ-AU: Yeah, I would call this, like, yellow or blue. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: We're not really making a real website, 456 00:19:08,314 --> 00:19:09,730 which is why we're not doing that. 457 00:19:09,730 --> 00:19:11,521 But if you actually had a real website, you 458 00:19:11,521 --> 00:19:16,220 might have, like, article header, article content, first word, 459 00:19:16,220 --> 00:19:21,920 things like that, which allow you to be much more descriptive. 460 00:19:21,920 --> 00:19:23,550 These are really just like variables. 461 00:19:23,550 --> 00:19:28,390 They should be named in a way where you can, like-- yeah, as such. 462 00:19:28,390 --> 00:19:29,470 Perfect. 463 00:19:29,470 --> 00:19:30,480 >> So background color. 464 00:19:30,480 --> 00:19:35,920 And then we're going to say-- so the way to change color is just "color." 465 00:19:35,920 --> 00:19:38,412 And we're going to make it blue. 466 00:19:38,412 --> 00:19:40,150 That's cool. 467 00:19:40,150 --> 00:19:42,640 So now we have the first two have special. 468 00:19:42,640 --> 00:19:45,972 Next one's going to have "class= pretty." 469 00:19:45,972 --> 00:19:49,180 ALLISON BUCHHOLTZ-AU: And then you'll want to add "pretty" to the middle one. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 And then to the middle one, to add "pretty," what happens 472 00:19:52,970 --> 00:19:56,880 is you just have a space. 473 00:19:56,880 --> 00:19:59,800 So the class attribute is a space-separated list 474 00:19:59,800 --> 00:20:02,450 of all the classes that apply to that tag. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 It's not like this one belongs to some kind of special class called 477 00:20:05,750 --> 00:20:07,180 "special, space, pretty." 478 00:20:07,180 --> 00:20:10,870 It belongs to two classes-- special and pretty. 479 00:20:10,870 --> 00:20:12,492 Yes? 480 00:20:12,492 --> 00:20:14,360 Cool. 481 00:20:14,360 --> 00:20:17,010 >> And then if we look at what happens, we're 482 00:20:17,010 --> 00:20:21,850 going to see that first one has yellow background, black text. 483 00:20:21,850 --> 00:20:22,450 Second one-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON BUCHHOLTZ-AU: --has bold yellow background with blue text. 485 00:20:26,160 --> 00:20:29,330 And our last one just has the blue text that we assigned to it. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 How selectors work? 488 00:20:32,491 --> 00:20:32,990 Awesome. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON BUCHHOLTZ-AU: Do we want to talk about the conflict now then? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: So yeah. 491 00:20:35,780 --> 00:20:36,310 Absolutely. 492 00:20:36,310 --> 00:20:38,380 So what happens if you have a conflict, right? 493 00:20:38,380 --> 00:20:44,740 Let's pretend the first one sets up something like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON BUCHHOLTZ-AU: Maybe this one changes the background? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Yeah. 496 00:20:48,090 --> 00:20:51,699 So we're going to make "pretty" change the background to salmon. 497 00:20:51,699 --> 00:20:54,740 ALLISON BUCHHOLTZ-AU: You're just with all the great colors today, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Yeah. 499 00:20:55,573 --> 00:20:58,200 Because I found out I can use salmon as a real color. 500 00:20:58,200 --> 00:21:00,270 So we're only going to do that. 501 00:21:00,270 --> 00:21:01,770 I also think Sunset is a real color. 502 00:21:01,770 --> 00:21:03,103 AUDIENCE: Sunset's a real color? 503 00:21:03,103 --> 00:21:04,572 ALLISON BUCHHOLTZ-AU: Let's try it. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: After this demo just because in case it messes up, 505 00:21:07,735 --> 00:21:08,943 I don't want to be debugging. 506 00:21:08,943 --> 00:21:11,580 So we know salmon's a real color. 507 00:21:11,580 --> 00:21:15,626 So any guesses on what's going to happen? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON BUCHHOLTZ-AU: Any idea? 509 00:21:17,522 --> 00:21:20,002 >> AUDIENCE: [INAUDIBLE]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Yeah. 511 00:21:20,920 --> 00:21:22,150 So you got it exactly right. 512 00:21:22,150 --> 00:21:24,930 Basically, it takes the last rule that it was given. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON BUCHHOLTZ-AU: So this is where cascading comes into effect. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: So remember how we had that cascading style sheets? 515 00:21:31,080 --> 00:21:33,660 So by that, we kind of mean that we have a bunch of rules 516 00:21:33,660 --> 00:21:37,115 which apply on top of each other, and they can also override each other. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON BUCHHOLTZ-AU: So whatever's at the bottom 518 00:21:39,380 --> 00:21:41,540 will override whatever's at the top. 519 00:21:41,540 --> 00:21:45,842 You could have rules that completely negate something beforehand. 520 00:21:45,842 --> 00:21:48,300 That's also why you want to be careful when you're styling, 521 00:21:48,300 --> 00:21:51,465 so you're not creating rules that you're just completely overriding. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: Or maybe you do want to overwrite rules. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON BUCHHOLTZ-AU: Or maybe you do. 524 00:21:53,920 --> 00:21:54,300 Yes. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Pretend you have a class which applies to most things, 526 00:21:57,175 --> 00:22:01,220 but let's say you want to change the background color to red and the font 527 00:22:01,220 --> 00:22:03,140 weight to bold for most things, but for one, 528 00:22:03,140 --> 00:22:06,098 you only want the background color to be red but you want all the other 529 00:22:06,098 --> 00:22:09,990 properties, you could do something like "font-weight= normal," 530 00:22:09,990 --> 00:22:12,760 which would then undo that bold change. 531 00:22:12,760 --> 00:22:14,480 Yeah? 532 00:22:14,480 --> 00:22:17,250 Again, the best way, I think Allison said it, is just practice. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON BUCHHOLTZ-AU: Experimentation. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Practice, practice, practice, and experiment. 535 00:22:20,090 --> 00:22:22,950 I know a lot of people that think CSS is just a lot of guess-and-check 536 00:22:22,950 --> 00:22:25,580 at the end of the day, where if you want to do something-- like, 537 00:22:25,580 --> 00:22:27,663 you have a rough idea, but you still probably need 538 00:22:27,663 --> 00:22:31,390 to try it out to make sure you know what it looks like. 539 00:22:31,390 --> 00:22:34,482 >> AUDIENCE: When you're applying classes, more than one 540 00:22:34,482 --> 00:22:37,339 to the same paragraph or section, does it 541 00:22:37,339 --> 00:22:39,505 matter what order you can type them into the quotes? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: No, not at all. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON BUCHHOLTZ-AU: What matters is the order within your CSS style sheet. 544 00:22:45,764 --> 00:22:47,430 AUDIENCE: Could you repeat the question? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON BUCHHOLTZ-AU: Within class, when you're giving classes 547 00:22:53,990 --> 00:22:56,964 to something in the HTML, does it matter which order they're in? 548 00:22:56,964 --> 00:22:58,130 It doesn't matter the order. 549 00:22:58,130 --> 00:23:02,915 What matters is the order of the class selectors within your CSS, 550 00:23:02,915 --> 00:23:04,306 within your style sheet. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: Sound good? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON BUCHHOLTZ-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: And then we're going to continue to-- 554 00:23:11,539 --> 00:23:13,330 ALLISON BUCHHOLTZ-AU: What do we have next? 555 00:23:13,330 --> 00:23:14,245 I forget. 556 00:23:14,245 --> 00:23:16,087 Oh, we just have examples. 557 00:23:16,087 --> 00:23:17,295 But we've kind of done those. 558 00:23:17,295 --> 00:23:18,990 We've done examples on the fly. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: We get to combine the selectors soon. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON BUCHHOLTZ-AU: Oh, we get to combine selectors. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: So some examples is we have 562 00:23:25,260 --> 00:23:29,630 #dog-- pound, or hashtag, or octothorpe, or whatever 563 00:23:29,630 --> 00:23:32,050 you want to call that-- sharp. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON BUCHHOLTZ-AU: Sharp dog. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Then you have .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Something has an id of dog, there's only one dog on the page. 568 00:23:41,600 --> 00:23:43,870 Something has an id of cat, there's only one cat. 569 00:23:43,870 --> 00:23:45,665 There may be many pets on the page. 570 00:23:45,665 --> 00:23:47,570 That's why we gave that classes. 571 00:23:47,570 --> 00:23:48,740 You have an example of p. 572 00:23:48,740 --> 00:23:50,490 And then so one of the last example, which 573 00:23:50,490 --> 00:23:53,790 is something we haven't talked about, is what happens when you combine them. 574 00:23:53,790 --> 00:23:54,580 So p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> So for that, let's go back to the code and introduce another-- yeah. 577 00:24:02,950 --> 00:24:04,290 So back here. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON BUCHHOLTZ-AU: I feel like this is really-- 579 00:24:04,850 --> 00:24:08,105 like just looking through examples is really the way to learn this. 580 00:24:08,105 --> 00:24:09,360 So that's what we're doing. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: So let's pretend we only want to select text 2, right? 582 00:24:14,030 --> 00:24:16,530 So we definitely can't do that with an id. 583 00:24:16,530 --> 00:24:19,620 Well, we could do that with an id, but it doesn't have an id. 584 00:24:19,620 --> 00:24:22,490 I could add one, but let's pretend that I didn't want to add one 585 00:24:22,490 --> 00:24:24,910 or it already has something else. 586 00:24:24,910 --> 00:24:26,516 I can't do that with that. 587 00:24:26,516 --> 00:24:28,870 The tag is definitely not unique, right? 588 00:24:28,870 --> 00:24:30,670 And neither is the class. 589 00:24:30,670 --> 00:24:32,314 But you can combine these things. 590 00:24:32,314 --> 00:24:35,230 Let's say we wanted to do something which only applies to things which 591 00:24:35,230 --> 00:24:39,420 have the class special and which have the class pretty. 592 00:24:39,420 --> 00:24:48,150 >> So what you can do is in main.css, you can say, let's first delete this. 593 00:24:48,150 --> 00:24:50,240 You can combine these. 594 00:24:50,240 --> 00:24:51,430 So you can do .special. 595 00:24:51,430 --> 00:24:52,110 No space. 596 00:24:52,110 --> 00:24:54,770 Just .special.pretty. 597 00:24:54,770 --> 00:25:00,550 What that means is something which is both special and pretty. 598 00:25:00,550 --> 00:25:01,900 Does that make sense? 599 00:25:01,900 --> 00:25:04,190 And if we go here, what you're going to see 600 00:25:04,190 --> 00:25:09,734 is this rule only applies to the second one, which has both of those. 601 00:25:09,734 --> 00:25:11,400 And you can do that for a lot of things. 602 00:25:11,400 --> 00:25:13,270 You can say-- let's pretend I only wanted 603 00:25:13,270 --> 00:25:18,300 to do things which have the class pretty and which are also a paragraph tag. 604 00:25:18,300 --> 00:25:19,920 So p.pretty. 605 00:25:19,920 --> 00:25:23,585 Let's pretend that I had something pretty on the tag body. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 I can run this and I can see that it's only 608 00:25:28,490 --> 00:25:32,720 going to apply to things which are paragraphs with the class pretty. 609 00:25:32,720 --> 00:25:35,650 And you can combine these, basically, as many as you want. 610 00:25:35,650 --> 00:25:38,580 So you can just put them together. 611 00:25:38,580 --> 00:25:39,604 Does that make sense? 612 00:25:39,604 --> 00:25:41,770 ALLISON BUCHHOLTZ-AU: So this kind of is more useful 613 00:25:41,770 --> 00:25:45,490 when, Tomas was saying earlier, maybe you have a very complicated website, 614 00:25:45,490 --> 00:25:48,050 and you already have a lot of these rules written, 615 00:25:48,050 --> 00:25:51,170 and you just need to combine two from before. 616 00:25:51,170 --> 00:25:55,350 Like instead of writing a whole new selector and changing it there, 617 00:25:55,350 --> 00:25:58,592 you can just combine them where it overlaps. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: Or you might find out-- sometimes 619 00:26:00,670 --> 00:26:04,290 there's one class which makes font's color like blue, 620 00:26:04,290 --> 00:26:06,740 and there's another class which makes the background blue. 621 00:26:06,740 --> 00:26:07,840 And that just won't work. 622 00:26:07,840 --> 00:26:10,924 So you write a special case, where, like-- but if it has both, what you're 623 00:26:10,924 --> 00:26:13,548 going to do is you're going to make this one this shade of blue 624 00:26:13,548 --> 00:26:15,310 and this one this other shade of blue. 625 00:26:15,310 --> 00:26:15,580 Right? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON BUCHHOLTZ-AU: Good for those kinds of exceptions. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: So to think about problems 628 00:26:21,220 --> 00:26:25,000 that might arise when you combine them. 629 00:26:25,000 --> 00:26:27,020 Cool. 630 00:26:27,020 --> 00:26:29,692 So back to our presentation. 631 00:26:29,692 --> 00:26:31,400 ALLISON BUCHHOLTZ-AU: We're almost there. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: And it has stopped connecting. 633 00:26:34,022 --> 00:26:36,494 ALLISON BUCHHOLTZ-AU: Oh, no. 634 00:26:36,494 --> 00:26:39,125 ALLISON BUCHHOLTZ-AU: CS at the office, internet goes down. 635 00:26:39,125 --> 00:26:40,360 Oh, the irony. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: So fortunately, we can present without the internet, I guess, 637 00:26:45,620 --> 00:26:47,380 because we have all the slides here. 638 00:26:47,380 --> 00:26:49,304 So let's talk about the relationship of tags. 639 00:26:49,304 --> 00:26:50,470 ALLISON BUCHHOLTZ-AU: Right. 640 00:26:50,470 --> 00:26:52,660 So just kind of going off of what Tomas said, 641 00:26:52,660 --> 00:26:54,180 this is just another way to do it. 642 00:26:54,180 --> 00:26:57,840 So we have some parent selector with a child selector. 643 00:26:57,840 --> 00:27:02,815 So in this example here, we have some body with a class navbar, class button. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Oh, sorry. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON BUCHHOLTZ-AU: And basically, what this means 647 00:27:06,180 --> 00:27:11,070 is select all of the children, like all of these sorts of selectors, 648 00:27:11,070 --> 00:27:13,040 within this parent selector. 649 00:27:13,040 --> 00:27:16,004 And those are the only ones it's ever going to apply to. 650 00:27:16,004 --> 00:27:17,755 I don't know if you have a better way of-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: So I guess the way to think 652 00:27:19,504 --> 00:27:22,440 about this is remember before how we sort of like put them together. 653 00:27:22,440 --> 00:27:26,340 And then that means one element which matches all of these. 654 00:27:26,340 --> 00:27:29,530 What this is saying is, I want you to match everything 655 00:27:29,530 --> 00:27:33,220 within some-- I want you to find a selector. 656 00:27:33,220 --> 00:27:35,670 And then within that, I want you to match new things. 657 00:27:35,670 --> 00:27:36,170 Right? 658 00:27:36,170 --> 00:27:40,900 So in CSS, it's all about sort of being able to match these items. 659 00:27:40,900 --> 00:27:43,050 And you can try to match items within other items. 660 00:27:43,050 --> 00:27:46,510 >> So let's actually do an example, and we think that'll clarify. 661 00:27:46,510 --> 00:27:53,090 So let's pretend we have special, special pretty, whatever. 662 00:27:53,090 --> 00:27:55,690 And then we have a link, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 So remember, a is a link. 665 00:28:02,370 --> 00:28:03,900 It's not going to go anywhere. 666 00:28:03,900 --> 00:28:11,500 And we're going to give it the class link, I guess. 667 00:28:11,500 --> 00:28:13,335 Let's give it the class-- give me an idea. 668 00:28:13,335 --> 00:28:14,460 ALLISON BUCHHOLTZ-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: Coo-- let's go it the class pretty. 670 00:28:16,420 --> 00:28:16,930 Why not? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON BUCHHOLTZ-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: So right now pretty things 673 00:28:23,040 --> 00:28:26,000 are going to make the background blue, background color of salmon. 674 00:28:26,000 --> 00:28:27,969 That makes sense. 675 00:28:27,969 --> 00:28:28,760 And if we do this-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON BUCHHOLTZ-AU: Do you want to add text 677 00:28:29,620 --> 00:28:31,078 so the hyperlink actually shows up? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: That would be a good call. 679 00:28:35,088 --> 00:28:37,921 ALLISON BUCHHOLTZ-AU: 'Cause right now we're just gonna get nothing. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: So this is a link. 681 00:28:39,690 --> 00:28:42,202 "This is a link." 682 00:28:42,202 --> 00:28:45,820 Oh, and this is going to be another link. 683 00:28:45,820 --> 00:28:47,280 Let's give it the class "cool." 684 00:28:47,280 --> 00:28:50,295 You're right. 685 00:28:50,295 --> 00:28:50,795 Cool. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 So right now we're going to grab this. 688 00:28:56,010 --> 00:28:57,269 We're going to throw one. 689 00:28:57,269 --> 00:28:59,060 We have one in the special tag, and we also 690 00:28:59,060 --> 00:29:01,150 are going to have one in the pretty tag. 691 00:29:01,150 --> 00:29:05,449 And right now what we're going to do is we're going to make cool-- 692 00:29:05,449 --> 00:29:06,490 what do we want it to do? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON BUCHHOLTZ-AU: Can we make it larger? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Let's give it a border. 696 00:29:13,800 --> 00:29:14,840 ALLISON BUCHHOLTZ-AU: We could border. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Yeah. 698 00:29:15,673 --> 00:29:18,560 So we're going to do something like, border is-- and we're 699 00:29:18,560 --> 00:29:20,971 going to explain this all in a second. 700 00:29:20,971 --> 00:29:21,470 For now-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON BUCHHOLTZ-AU: To the box model. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: But for now, we're just going to give it a border. 703 00:29:27,300 --> 00:29:29,580 So what that means is you're going to see these links. 704 00:29:29,580 --> 00:29:32,788 And you're going to see that they have these, like, ugly black borders, which 705 00:29:32,788 --> 00:29:33,820 is cool. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON BUCHHOLTZ-AU: Our website's so pretty. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Yeah. 708 00:29:35,333 --> 00:29:38,930 Our website is awesome. 709 00:29:38,930 --> 00:29:41,585 So these two are links, and they appear. 710 00:29:41,585 --> 00:29:44,160 Now let's pretend I only wanted to do this 711 00:29:44,160 --> 00:29:50,072 if it was not within something which had a background of salmon. 712 00:29:50,072 --> 00:29:52,280 So remember that this one has a background of salmon, 713 00:29:52,280 --> 00:29:54,000 because it's of class pretty. 714 00:29:54,000 --> 00:29:59,777 >> But we want to say that only cools which are in class special, not in class 715 00:29:59,777 --> 00:30:02,890 pretty, should have that border. 716 00:30:02,890 --> 00:30:12,549 Well, what you can do is you can say, .special, space, .cool. 717 00:30:12,549 --> 00:30:15,590 And what that's doing, when you think about it, is it's basically saying, 718 00:30:15,590 --> 00:30:19,530 OK, find me everything that matches special. 719 00:30:19,530 --> 00:30:24,104 Then within those tags, find me everything that's cool. 720 00:30:24,104 --> 00:30:27,270 ALLISON BUCHHOLTZ-AU: So another way that might be good to think about this, 721 00:30:27,270 --> 00:30:29,810 bringing it back to C, is just like the idea of scope. 722 00:30:29,810 --> 00:30:34,020 So when you have some selector, like the ones 723 00:30:34,020 --> 00:30:38,460 that we've been working for before this, your entire web page, all of your HTML 724 00:30:38,460 --> 00:30:40,180 is within your scope, right? 725 00:30:40,180 --> 00:30:43,090 But when we have these parent-child relationships, 726 00:30:43,090 --> 00:30:47,130 it's as if you're narrowing down where you're looking to a specific place, 727 00:30:47,130 --> 00:30:50,540 as if, like, we're looking within a specific function instead 728 00:30:50,540 --> 00:30:52,007 of our entire file. 729 00:30:52,007 --> 00:30:55,090 AUDIENCE: So with that in mind, would it have mattered if we had changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON BUCHHOLTZ-AU: The order? 731 00:30:56,423 --> 00:30:59,320 AUDIENCE: --the class in CSS to .cool, space, .special? 732 00:30:59,320 --> 00:31:01,153 ALLISON BUCHHOLTZ-AU: Yes, because then that 733 00:31:01,153 --> 00:31:04,420 would say, scope it to everything that has cool, 734 00:31:04,420 --> 00:31:07,235 and then look at what has-- I mean, like, in this case, 735 00:31:07,235 --> 00:31:08,860 I don't think it would have changed it. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: If we had said what? 737 00:31:10,318 --> 00:31:10,906 Sorry. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON BUCHHOLTZ-AU: If we scope it to cool and then 739 00:31:12,660 --> 00:31:14,550 look for things out of special, it would be the same, actually. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: So it would not be. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON BUCHHOLTZ-AU: It wouldn't? 742 00:31:16,590 --> 00:31:17,590 Oh, oh well. 743 00:31:17,590 --> 00:31:18,090 I am wrong. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: So the reason it's different-- common mistake-- 745 00:31:21,480 --> 00:31:27,140 is that right now only the link has cool, right? 746 00:31:27,140 --> 00:31:32,176 I guess my question to you guys is, what on this page is matched by .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 There are two tags here, right? 749 00:31:38,340 --> 00:31:39,770 Which is this one and this one. 750 00:31:39,770 --> 00:31:40,590 Both match cool. 751 00:31:40,590 --> 00:31:42,200 Nothing else does. 752 00:31:42,200 --> 00:31:46,460 So if you said, .cool, space, .special, what you're going to say is, 753 00:31:46,460 --> 00:31:48,824 within these tags, what is special? 754 00:31:48,824 --> 00:31:49,865 ALLISON BUCHHOLTZ-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 That's what it-- right. 756 00:31:51,800 --> 00:31:52,310 Because it's like just something here. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: So it selects nothing. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON BUCHHOLTZ-AU: Whereas with special, we're within these tags here. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: Those and those. 760 00:31:57,971 --> 00:31:58,512 AUDIENCE: OK. 761 00:31:58,512 --> 00:31:58,920 So those tags from the forward slash? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Yes. 763 00:31:59,740 --> 00:32:01,150 Does that make sense? 764 00:32:01,150 --> 00:32:03,685 How it's basically trying to narrow scope. 765 00:32:03,685 --> 00:32:04,810 ALLISON BUCHHOLTZ-AU: Yeah. 766 00:32:04,810 --> 00:32:06,870 I think that's probably the easiest way to think about it. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: So we found this, and we found this both matched special. 768 00:32:09,270 --> 00:32:11,400 And then we're asking, within these guys, what's cool? 769 00:32:11,400 --> 00:32:12,941 And within this one, this one's cool. 770 00:32:12,941 --> 00:32:14,500 Within this one, nothing's cool. 771 00:32:14,500 --> 00:32:16,250 So this is the only tag that remains. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON BUCHHOLTZ-AU: Whereas cool is just within these a tags there. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Exactly. 774 00:32:21,070 --> 00:32:22,403 And what's special within those? 775 00:32:22,403 --> 00:32:22,930 Nothing. 776 00:32:22,930 --> 00:32:25,270 Now, what I will say is if there was no space, 777 00:32:25,270 --> 00:32:29,880 you're asking what's cool and special-- or what's pretty and special, right? 778 00:32:29,880 --> 00:32:35,370 If you say .special.pretty, that's the same as .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Because what removing the space is asking is, when you say .special, 780 00:32:39,220 --> 00:32:40,970 you're asking, OK, which ones are special? 781 00:32:40,970 --> 00:32:43,780 And then of those, which ones are also pretty, 782 00:32:43,780 --> 00:32:47,010 which is the same, grammatically, as asking, what's pretty, 783 00:32:47,010 --> 00:32:49,500 and then of those, what's also special? 784 00:32:49,500 --> 00:32:50,000 Right? 785 00:32:50,000 --> 00:32:53,099 It's the difference of what's within what is. 786 00:32:53,099 --> 00:32:53,640 AUDIENCE: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Yeah. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Awesome. 790 00:32:58,030 --> 00:33:00,426 So with that in mind then-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON BUCHHOLTZ-AU: I think our last thing is (IN FANCY BRITISH ACCENT) 792 00:33:01,800 --> 00:33:02,510 the box model. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: The box-- [CHUCKLES] I love the way Allison says that. 794 00:33:05,992 --> 00:33:06,950 So the box model thing. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON BUCHHOLTZ-AU: Just have a box, I'll be your box model. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: So let's talk about that. 797 00:33:11,310 --> 00:33:14,070 So right now we've spent a lot of time talking about selectors. 798 00:33:14,070 --> 00:33:16,944 By now, you guys are probably, like, masters of selectors-- you know, 799 00:33:16,944 --> 00:33:21,510 how to exactly select the content that you want to manipulate on your screen. 800 00:33:21,510 --> 00:33:24,740 >> So now the question is, how exactly can you manipulate it? 801 00:33:24,740 --> 00:33:27,010 So I guess the most basic way to think about that 802 00:33:27,010 --> 00:33:30,294 is, well, what exactly is an element in CSS? 803 00:33:30,294 --> 00:33:32,585 We've spent a lot of time talking about, what is a tag, 804 00:33:32,585 --> 00:33:36,140 or what is the most basic representation of a tag? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> A good way to think about that is, what shape is salmon? 807 00:33:45,170 --> 00:33:47,295 What shape is, like, the salmon-colored background? 808 00:33:47,295 --> 00:33:47,880 >> AUDIENCE: It's a rectangle. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: It's a rectangle, right? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON BUCHHOLTZ-AU: Wasn't a trick question. 811 00:33:50,956 --> 00:33:51,870 [LAUGHTER] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Not trying to trick you guys this late. 813 00:33:54,670 --> 00:33:57,510 So we have this rectangle. 814 00:33:57,510 --> 00:33:59,140 And the tag is a p, right? 815 00:33:59,140 --> 00:34:02,280 So that gives us good belief that the paragraph 816 00:34:02,280 --> 00:34:07,440 is represented as a rectangle, at least in the mind of the browser, which 817 00:34:07,440 --> 00:34:08,715 it is. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON BUCHHOLTZ-AU: I mean, browsers are typically rectangular, 819 00:34:11,423 --> 00:34:13,440 so it makes sense. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: The idea here is that all of the tags within CSS 821 00:34:18,750 --> 00:34:21,790 are represented as a rectangle. 822 00:34:21,790 --> 00:34:25,699 And every rectangle has four parts according to CSS, OK? 823 00:34:25,699 --> 00:34:27,830 You have the actual content. 824 00:34:27,830 --> 00:34:29,644 That's where the text lies. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON BUCHHOLTZ-AU: Maybe your picture. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Yeah. 827 00:34:31,303 --> 00:34:33,860 You have padding, which is just some kind of white space. 828 00:34:33,860 --> 00:34:35,085 Then you have a border. 829 00:34:35,085 --> 00:34:37,710 And then you have margin, which is white space outside of that. 830 00:34:37,710 --> 00:34:39,460 So that makes no sense to anyone, so we're 831 00:34:39,460 --> 00:34:42,500 going to talk about that for a second. 832 00:34:42,500 --> 00:34:47,570 So right here, what we're going to do is we're going to create some divs, OK? 833 00:34:47,570 --> 00:34:48,420 Excuse me while I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON BUCHHOLTZ-AU: I feel like we should put a cute picture in. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: We definitely should. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON BUCHHOLTZ-AU: I feel like everyone 837 00:34:53,389 --> 00:34:54,870 could benefit from a cute picture, is all. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: Can we all benefit from a-- 839 00:34:56,774 --> 00:34:57,648 >> AUDIENCE: Yeah, sure. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, cool. 841 00:34:58,790 --> 00:35:02,254 So we should put a cute picture in somewhere. 842 00:35:02,254 --> 00:35:05,295 ALLISON BUCHHOLTZ-AU: I feel like a cute bunny might be useful right now. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Sure. 844 00:35:06,190 --> 00:35:06,950 ALLISON BUCHHOLTZ-AU: End of the week. 845 00:35:06,950 --> 00:35:07,390 Have something adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: How bout a kitten? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON BUCHHOLTZ-AU: A kitten works, too. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, because there's a site for that. 849 00:35:11,300 --> 00:35:12,300 It's called PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON BUCHHOLTZ-AU: That's great. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Yes. 852 00:35:15,510 --> 00:35:18,040 ALLISON BUCHHOLTZ-AU: Just for, like, placeholder images in your website. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 There's also PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 And there's PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON BUCHHOLTZ-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Really? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, we don't have internet access here. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON BUCHHOLTZ-AU: [GROANS] 860 00:35:29,875 --> 00:35:30,375 Tragic. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: Otherwise, I would show you guys 862 00:35:32,333 --> 00:35:33,870 how to put images in your website. 863 00:35:33,870 --> 00:35:36,370 We're going to try to get this working before we have to go. 864 00:35:36,370 --> 00:35:38,660 But for now, we're just going to talk in colors then. 865 00:35:38,660 --> 00:35:39,820 We want to put pictures of kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON BUCHHOLTZ-AU: We did. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: --the internet's down for the moment being. 868 00:35:43,110 --> 00:35:47,820 So we have two divs, and we're going to give them two ids. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 We're going to call it "first" and "second." 871 00:35:56,760 --> 00:36:01,184 So id= "first." 872 00:36:01,184 --> 00:36:02,850 And we're going to give them two colors. 873 00:36:02,850 --> 00:36:08,424 So how do we select something with an id of "first"? 874 00:36:08,424 --> 00:36:09,840 ALLISON BUCHHOLTZ-AU: Dot or hash? 875 00:36:09,840 --> 00:36:10,730 AUDIENCE: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, perfect. 877 00:36:12,940 --> 00:36:14,950 Sharp, hash, whatever we-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON BUCHHOLTZ-AU: Lots of things to call it. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 We're going to settle on hashtag, and that's what we're going to go with. 881 00:36:19,800 --> 00:36:20,300 OK? 882 00:36:20,300 --> 00:36:20,735 >> ALLISON BUCHHOLTZ-AU: Hashtag. 883 00:36:20,735 --> 00:36:22,340 >> TOMAS REIMERS: So hashtag's first. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON BUCHHOLTZ-AU: So you can tweet the seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag cool. 886 00:36:27,582 --> 00:36:29,040 TOMAS REIMERS: Hashtag Awesomeness. 887 00:36:29,040 --> 00:36:30,730 ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, yes. 888 00:36:30,730 --> 00:36:31,480 TOMAS REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 So we have "first" and "second." 890 00:36:33,660 --> 00:36:37,697 So first, we're going to have a background color of red. 891 00:36:37,697 --> 00:36:39,030 ALLISON BUCHHOLTZ-AU: Uh, colon. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON BUCHHOLTZ-AU: I'll be your spot-checker. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison's got me. 895 00:36:43,960 --> 00:36:45,830 Background-color of blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Purple! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Purple. 898 00:36:47,726 --> 00:36:48,830 ALLISON BUCHHOLTZ-AU: Yes. 899 00:36:48,830 --> 00:36:50,630 Purple's my favorite color, and we haven't used it yet. 900 00:36:50,630 --> 00:36:51,546 >> TOMAS REIMERS: Violet. 901 00:36:51,546 --> 00:36:53,361 ALLISON BUCHHOLTZ-AU: Violet. 902 00:36:53,361 --> 00:36:53,860 That works. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: So we're going to have two divs. 905 00:36:59,880 --> 00:37:01,654 They're going to be totally empty. 906 00:37:01,654 --> 00:37:03,070 We should probably have some text. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 So "first" is going to be "HELLO." 909 00:37:09,815 --> 00:37:10,940 And the "second" will say-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON BUCHHOLTZ-AU: Goodbye. 911 00:37:11,110 --> 00:37:12,514 >> AUDIENCE: --"WORLD." 912 00:37:12,514 --> 00:37:14,122 Hello, goodbye. 913 00:37:14,122 --> 00:37:16,580 ALLISON BUCHHOLTZ-AU: I saw them in concert the other week. 914 00:37:16,580 --> 00:37:17,705 TOMAS REIMERS: The Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON BUCHHOLTZ-AU: For reals. 916 00:37:20,242 --> 00:37:21,200 They're not that great. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 I don't like it. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: We have "HELLO" and "GOODBYE." 920 00:37:26,060 --> 00:37:29,102 And again, CSS is just awesome, because it recognizes our colors. 921 00:37:29,102 --> 00:37:30,810 Don't need to even worry that they exist. 922 00:37:30,810 --> 00:37:33,194 They do. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON BUCHHOLTZ-AU: They exist. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: So CSS I think has 255 words to talk about color. 925 00:37:39,560 --> 00:37:42,986 If you can think of a color outside those 255, like, I will be impressed. 926 00:37:42,986 --> 00:37:44,110 ALLISON BUCHHOLTZ-AU: Yeah. 927 00:37:44,110 --> 00:37:45,560 I think you guys may have just come in right after. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: So here, you'll see we have two boxes 929 00:37:47,727 --> 00:37:49,143 right on top of each other, right? 930 00:37:49,143 --> 00:37:50,200 HELLO and GOODBYE. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON BUCHHOLTZ-AU: There's no space in between. 932 00:37:51,460 --> 00:37:53,390 They're just smooshed right on top of each other. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: So the first thing I guess we should talk about 934 00:37:55,973 --> 00:38:02,960 is let's also say-- yeah. 935 00:38:02,960 --> 00:38:08,020 So CSS represents them as sort of boxes. 936 00:38:08,020 --> 00:38:10,100 And as boxes, they have content. 937 00:38:10,100 --> 00:38:14,540 And the content right now is sort of the HELLO or the GOODBYE and that's it. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> So one of the first things you can do is you can add padding. 940 00:38:19,790 --> 00:38:25,610 Padding says how much space it should leave on each side. 941 00:38:25,610 --> 00:38:29,200 So let's say I want to say 10 pixels on each side. 942 00:38:29,200 --> 00:38:31,234 And I will dissect that in a second. 943 00:38:31,234 --> 00:38:33,150 ALLISON BUCHHOLTZ-AU: All of these things here 944 00:38:33,150 --> 00:38:36,980 are going to be mostly in pixels for the rest of the seminar. 945 00:38:36,980 --> 00:38:40,980 You're going to see that it has some space around it, right? 946 00:38:40,980 --> 00:38:46,360 So what you don't see here is there's this invisible sort of padding 947 00:38:46,360 --> 00:38:49,600 on each side, which says, like, OK, you have your box of content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON BUCHHOLTZ-AU: Do you want to just pull up the inspect element? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Yeah, that's a good idea. 950 00:38:53,659 --> 00:38:56,700 ALLISON BUCHHOLTZ-AU: Also, I find that the inspect element is a good way 951 00:38:56,700 --> 00:39:01,280 to figure out if something's going wrong, something unexpected happens, 952 00:39:01,280 --> 00:39:04,570 inspecting the tags and seeing what it's like overwritten is helpful. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: So I'm not sure if you guys can see this color. 954 00:39:05,940 --> 00:39:06,470 Can you? 955 00:39:06,470 --> 00:39:10,120 You'll see this padding on the sort of edge. 956 00:39:10,120 --> 00:39:13,410 And then you see the actual content in blue, right? 957 00:39:13,410 --> 00:39:16,820 So that's the very basics of the box model. 958 00:39:16,820 --> 00:39:17,674 You have content. 959 00:39:17,674 --> 00:39:18,590 Then you have padding. 960 00:39:18,590 --> 00:39:20,440 >> AUDIENCE: Why don't you just use the box inside the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON BUCHHOLTZ-AU: Right. 962 00:39:21,606 --> 00:39:24,745 Because it's just selecting the element right now. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 Other things. 965 00:39:27,060 --> 00:39:29,780 So let's talk about that padding command for a second. 966 00:39:29,780 --> 00:39:36,380 So in CSS, measurements need to have a unit. 967 00:39:36,380 --> 00:39:39,740 So first you have the amount. 968 00:39:39,740 --> 00:39:41,460 So in this case, we've said 10. 969 00:39:41,460 --> 00:39:44,780 And then the next one we've said is pixels, px. 970 00:39:44,780 --> 00:39:49,160 Other ones you might have are things like centimeters, inches. 971 00:39:49,160 --> 00:39:51,367 You can do things like, what is 10 inches? 972 00:39:51,367 --> 00:39:52,700 And it's going to be ridiculous. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON BUCHHOLTZ-AU: Oh, boy. 974 00:39:52,990 --> 00:39:53,460 >> AUDIENCE: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS AND ALLISON: Yeah. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: So that's all padding. 977 00:39:57,840 --> 00:39:59,255 I'm going to go back to pixels. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON BUCHHOLTZ-AU: Pixels tend to be, like, the standard. 979 00:40:01,754 --> 00:40:04,589 When you look at a lot of websites, they mostly work in pixels. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: So you're going to see either pixels-- the other ones you see 981 00:40:07,755 --> 00:40:13,952 is em, which is one em is equal to the height of the font 982 00:40:13,952 --> 00:40:15,160 which you're currently using. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON BUCHHOLTZ-AU: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 TOMAS REIMERS: It's a good way to say, like, I want as much space as my font 986 00:40:20,740 --> 00:40:21,514 is taking. 987 00:40:21,514 --> 00:40:23,180 ALLISON BUCHHOLTZ-AU: Did not know that. 988 00:40:23,180 --> 00:40:25,747 You learn something new every day. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: There are a lot of measurements in CS. 990 00:40:27,955 --> 00:40:29,260 I suggest you look them up. 991 00:40:29,260 --> 00:40:32,122 For all your cases, I think pixels should be sufficient. 992 00:40:32,122 --> 00:40:33,830 And they're also what you're going to see 993 00:40:33,830 --> 00:40:36,520 in the majority of examples done online. 994 00:40:36,520 --> 00:40:38,320 So we'll leave it at pixels. 995 00:40:38,320 --> 00:40:42,420 >> You can also, I should say-- so padding sets all of the paddings. 996 00:40:42,420 --> 00:40:49,789 You can also do something like "padding-top" to just set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON BUCHHOLTZ-AU: Maybe we'll get our "HELLO" back. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to just set the padding on the top and nothing else. 999 00:40:55,480 --> 00:40:59,560 So the four commands are padding-top, padding-bottom, padding-left, 1000 00:40:59,560 --> 00:41:00,310 and padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON BUCHHOLTZ-AU: Just like you would expect for a box. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Yeah. 1003 00:41:03,530 --> 00:41:05,240 Nothing too crazy there. 1004 00:41:05,240 --> 00:41:08,230 Does that make sense? 1005 00:41:08,230 --> 00:41:11,990 So that is padding. 1006 00:41:11,990 --> 00:41:14,110 I'm going to set all the paddings back to 10. 1007 00:41:14,110 --> 00:41:17,010 And then I'm going to move on to border. 1008 00:41:17,010 --> 00:41:21,130 >> So what border is is border's a weird command. 1009 00:41:21,130 --> 00:41:24,450 It takes sort of three things at once. 1010 00:41:24,450 --> 00:41:28,930 So the first is how big you want it to be as a measurement. 1011 00:41:28,930 --> 00:41:30,662 Again, I'm only using pixels. 1012 00:41:30,662 --> 00:41:32,620 And the last thing I should add to measurements 1013 00:41:32,620 --> 00:41:35,270 is the one thing which doesn't need a unit is 0. 1014 00:41:35,270 --> 00:41:37,390 It's actually incorrect to give 0 a unit, 1015 00:41:37,390 --> 00:41:41,940 because 0 is 0 across inches, pixels, centimeters, whatever. 1016 00:41:41,940 --> 00:41:43,960 It all just means 0, right? 1017 00:41:43,960 --> 00:41:46,710 So first you give it the measurement. 1018 00:41:46,710 --> 00:41:48,650 >> Then you give it the style. 1019 00:41:48,650 --> 00:41:49,869 So I'm going to say "solid." 1020 00:41:49,869 --> 00:41:51,410 And we'll talk about what that means. 1021 00:41:51,410 --> 00:41:54,290 And then lastly, you give it a color. 1022 00:41:54,290 --> 00:41:56,850 So I'm going to say "black." 1023 00:41:56,850 --> 00:41:59,637 And these are all things we've now seen before, except for style, 1024 00:41:59,637 --> 00:42:00,720 but we'll talk about that. 1025 00:42:00,720 --> 00:42:04,120 So you guys have seen measurements, and you've seen colors. 1026 00:42:04,120 --> 00:42:10,410 And what happens is we get this nice black border around it, right? 1027 00:42:10,410 --> 00:42:11,620 You guys see how we did that? 1028 00:42:11,620 --> 00:42:12,760 >> AUDIENCE: Yeah. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 So what is that? 1031 00:42:17,370 --> 00:42:19,160 So first of all, it's one pixel. 1032 00:42:19,160 --> 00:42:20,880 That's self-evident enough, right? 1033 00:42:20,880 --> 00:42:23,254 Like, it's one pixel thick. 1034 00:42:23,254 --> 00:42:26,170 Or it would be one pixel, but I'm zoomed in, so it's a little bit more 1035 00:42:26,170 --> 00:42:26,490 than that. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON BUCHHOLTZ-AU: And we have this ridiculous resolution TV. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Yeah. 1038 00:42:29,460 --> 00:42:33,640 You can make it bigger, smaller, whatever. 1039 00:42:33,640 --> 00:42:35,630 So here's a two-pixel border. 1040 00:42:35,630 --> 00:42:38,810 You'll see it's twice as thick. 1041 00:42:38,810 --> 00:42:40,172 Next thing you have is color. 1042 00:42:40,172 --> 00:42:41,130 That's not interesting. 1043 00:42:41,130 --> 00:42:42,710 I'm not going to talk about that, really. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON BUCHHOLTZ-AU: But the style might be just a little interesting. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Yeah. 1046 00:42:45,980 --> 00:42:48,560 So style, there are few ones that I see used commonly. 1047 00:42:48,560 --> 00:42:55,690 First one's solid, next one's dotted, and the last one's dashed. 1048 00:42:55,690 --> 00:42:59,290 And here is dotted. 1049 00:42:59,290 --> 00:43:02,980 You'll see that they're a bunch of dots, right? 1050 00:43:02,980 --> 00:43:09,030 A good way to sort of get a nice border going, dashes are also pretty popular. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON BUCHHOLTZ-AU: And then of course, I'm 1053 00:43:13,600 --> 00:43:16,660 sure there are plenty other styles that you can get. 1054 00:43:16,660 --> 00:43:20,000 And we have a great set of links at the end for you guys 1055 00:43:20,000 --> 00:43:23,470 to kind of peruse and look at more cool CSS. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: And then the last thing, we're 1057 00:43:25,954 --> 00:43:27,870 going to talk about the box models real quick. 1058 00:43:27,870 --> 00:43:30,070 Oh, and then border, exactly like padding, 1059 00:43:30,070 --> 00:43:33,270 you also have things like border-left, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, which allow you to get at a specific border. 1061 00:43:37,590 --> 00:43:40,650 So here's just the border left-defined. 1062 00:43:40,650 --> 00:43:43,060 Does that makes sense? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON BUCHHOLTZ-AU: It's a cool way to emphasize things or add 1064 00:43:46,170 --> 00:43:47,545 lines between different elements. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Absolutely. 1066 00:43:48,670 --> 00:43:50,940 So that's our border. 1067 00:43:50,940 --> 00:43:52,790 And the last one's margin. 1068 00:43:52,790 --> 00:43:55,892 Margin's like padding except it's not within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON BUCHHOLTZ-AU: It's not around your element 1070 00:43:57,975 --> 00:44:00,840 but actually around the entire box that we've been seeing. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Yeah. 1072 00:44:02,770 --> 00:44:04,090 Allison said it perfectly. 1073 00:44:04,090 --> 00:44:07,550 It's not, like, inside your element, it's around the whole box. 1074 00:44:07,550 --> 00:44:10,900 That means things like background don't apply to it. 1075 00:44:10,900 --> 00:44:13,550 And it basically says, like, I don't want anything 1076 00:44:13,550 --> 00:44:15,230 in this much space for me. 1077 00:44:15,230 --> 00:44:17,470 So like here we have a margin of 10 pixels. 1078 00:44:17,470 --> 00:44:23,100 So nothing within 10 pixels should be next to me. 1079 00:44:23,100 --> 00:44:26,210 That's kind of its space but kind of not. 1080 00:44:26,210 --> 00:44:29,215 So that's the very basics of the box model. 1081 00:44:29,215 --> 00:44:30,090 Does that make sense? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Cool, cool. 1084 00:44:34,550 --> 00:44:35,800 ALLISON BUCHHOLTZ-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 So now I think we just have our cool resources 1086 00:44:37,890 --> 00:44:41,220 that we'll take you guys through very quickly. 1087 00:44:41,220 --> 00:44:44,815 And we'll actually-- well, do we have internet yet? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS REIMERS: Let's see if I can open up-- 1089 00:44:47,860 --> 00:44:50,040 let me just see if I can get internet quickly 1090 00:44:50,040 --> 00:44:53,317 while Allison talks about anything Allison wants to talk about. 1091 00:44:53,317 --> 00:44:55,150 ALLISON BUCHHOLTZ-AU: So basically-- I don't 1092 00:44:55,150 --> 00:44:57,930 know what else I can say at this point. 1093 00:44:57,930 --> 00:45:01,340 But these are some really good resources. 1094 00:45:01,340 --> 00:45:04,629 These are ones that Tomas and I have used 1095 00:45:04,629 --> 00:45:06,420 and that we actually used to prep for this. 1096 00:45:06,420 --> 00:45:09,940 W3Schools is one that you guys should have seen before. 1097 00:45:09,940 --> 00:45:12,440 We recommend it for a lot of things with CSS. 1098 00:45:12,440 --> 00:45:15,060 I know I recommend it to my section all the time. 1099 00:45:15,060 --> 00:45:21,050 >> One of the great things is that it allows you to kind of mess with CSS 1100 00:45:21,050 --> 00:45:23,830 and see the changes instantaneously in this, 1101 00:45:23,830 --> 00:45:25,920 like, double-window view that it has. 1102 00:45:25,920 --> 00:45:29,980 So you don't have to worry about setting up your own web page, 1103 00:45:29,980 --> 00:45:33,090 or setting up vhost in your local appliance and local host, 1104 00:45:33,090 --> 00:45:34,980 and getting all that stuff working. 1105 00:45:34,980 --> 00:45:36,830 It is embedded right within the page. 1106 00:45:36,830 --> 00:45:39,042 >> And it has these little lessons that you can 1107 00:45:39,042 --> 00:45:40,750 go through to learn more about selectors, 1108 00:45:40,750 --> 00:45:44,610 or learn about manipulating your font, or a background, or an image. 1109 00:45:44,610 --> 00:45:46,990 And you have these instantaneous results that you 1110 00:45:46,990 --> 00:45:49,310 don't have to do any other prep work for. 1111 00:45:49,310 --> 00:45:51,060 So I love W3Schools. 1112 00:45:51,060 --> 00:45:51,960 It's fabulous. 1113 00:45:51,960 --> 00:45:52,670 Is it working? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Yeah. 1115 00:45:52,950 --> 00:45:53,720 No, it's not. 1116 00:45:53,720 --> 00:45:55,636 Do you want me to try and restart my computer? 1117 00:45:55,636 --> 00:45:56,410 Or do we want to-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON BUCHHOLTZ-AU: I mean, well, this will also be online. 1119 00:46:01,490 --> 00:46:02,740 All the slides will be online. 1120 00:46:02,740 --> 00:46:05,470 So I just highly recommend doing these. 1121 00:46:05,470 --> 00:46:07,880 >> This is great as just like a cheat sheet. 1122 00:46:07,880 --> 00:46:10,690 It's just all the basic commands that you have. 1123 00:46:10,690 --> 00:46:13,070 It's great when you're first starting out your website. 1124 00:46:13,070 --> 00:46:15,080 Because maybe you don't want to get into all 1125 00:46:15,080 --> 00:46:17,355 the real nitty gritty design-heavy stuff. 1126 00:46:17,355 --> 00:46:20,230 You just need to format it in a way that kind of makes sense and will 1127 00:46:20,230 --> 00:46:21,490 do for the time being. 1128 00:46:21,490 --> 00:46:23,580 And if you really want to get into it, I know 1129 00:46:23,580 --> 00:46:27,240 this is, like, one of Tomas's favorite references. 1130 00:46:27,240 --> 00:46:30,130 We were using it to prep, and it's fabulous. 1131 00:46:30,130 --> 00:46:33,030 It's the Developer from Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: So Mozilla are the people who make Firefox. 1133 00:46:36,490 --> 00:46:40,290 And it's just their own developer reference, which I think is awesome. 1134 00:46:40,290 --> 00:46:44,870 And it has a wonderful list of resources. 1135 00:46:44,870 --> 00:46:45,530 So we have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON BUCHHOLTZ-AU: And then last note is 1137 00:46:48,060 --> 00:46:50,120 when you're trying to design your website, 1138 00:46:50,120 --> 00:46:53,550 draw inspiration from things that you think are pretty. 1139 00:46:53,550 --> 00:46:56,340 Inspecting the element, inspecting the source code 1140 00:46:56,340 --> 00:46:59,370 can be super helpful for trying to figure out 1141 00:46:59,370 --> 00:47:02,080 how to style your own website. 1142 00:47:02,080 --> 00:47:04,540 >> Often, I feel like the best way, besides experimentation, 1143 00:47:04,540 --> 00:47:06,290 is just to look at things that are pretty. 1144 00:47:06,290 --> 00:47:09,810 I find it's really hard to just kind of design things on your own, 1145 00:47:09,810 --> 00:47:11,090 especially in the beginning. 1146 00:47:11,090 --> 00:47:14,740 So please look at websites that you enjoy looking at. 1147 00:47:14,740 --> 00:47:16,880 Figure out what makes them appealing to you. 1148 00:47:16,880 --> 00:47:19,170 And then feel free to try and replicate that. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Right. 1150 00:47:20,410 --> 00:47:23,120 Even like websites like this, you can see 1151 00:47:23,120 --> 00:47:25,460 there's definitely a div at the top. 1152 00:47:25,460 --> 00:47:29,920 And then you have another div within here, which is CSS Awesomeness. 1153 00:47:29,920 --> 00:47:32,480 And then you have a bunch of links here. 1154 00:47:32,480 --> 00:47:34,770 If you really just inspect elements, you can sort of 1155 00:47:34,770 --> 00:47:38,520 start to see what do websites look like, and how can I 1156 00:47:38,520 --> 00:47:40,493 recreate that if I wanted to. 1157 00:47:40,493 --> 00:47:41,890 Does that make sense? 1158 00:47:41,890 --> 00:47:43,670 So we only have three minutes left. 1159 00:47:43,670 --> 00:47:46,380 So questions? 1160 00:47:46,380 --> 00:47:47,650 Any of them? 1161 00:47:47,650 --> 00:47:48,350 Yes. 1162 00:47:48,350 --> 00:47:50,780 >> AUDIENCE: For the color rectangle, how would you 1163 00:47:50,780 --> 00:47:53,499 have-- if you didn't want it going across the whole page, could 1164 00:47:53,499 --> 00:47:56,400 you have made it go across only half the page or just the text? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Yeah, absolutely. 1166 00:47:59,660 --> 00:48:02,780 So let me see actually. 1167 00:48:02,780 --> 00:48:04,670 I have two ideas. 1168 00:48:04,670 --> 00:48:07,265 So first of all, you can also use percents. 1169 00:48:07,265 --> 00:48:08,140 >> AUDIENCE: Really? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON BUCHHOLTZ-AU: So something to look up is relative positioning. 1171 00:48:11,260 --> 00:48:13,385 It's something that we don't have time to get into, 1172 00:48:13,385 --> 00:48:16,392 but it's something I definitely recommend you guys checking out. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: So percents. 1174 00:48:17,580 --> 00:48:21,524 And see how we made it just 50% of the width? 1175 00:48:21,524 --> 00:48:24,190 ALLISON BUCHHOLTZ-AU: If you actually know the number of pixels, 1176 00:48:24,190 --> 00:48:25,780 you can be more precise that way. 1177 00:48:25,780 --> 00:48:27,200 You can fiddle around with it. 1178 00:48:27,200 --> 00:48:27,700 But 50%. 1179 00:48:27,700 --> 00:48:31,970 If we were to resize our browser, it would make it smaller. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Well, it's basically 50% right now, I think. 1181 00:48:35,250 --> 00:48:38,820 It's 50%, and then the margin has been added to that. 1182 00:48:38,820 --> 00:48:40,100 CSS has a lot of quirks. 1183 00:48:40,100 --> 00:48:43,195 So right now this is 50% of the page width. 1184 00:48:43,195 --> 00:48:46,860 But remember that you have 10 pixels taken off from each side. 1185 00:48:46,860 --> 00:48:49,700 So if you were to move that against the left edge of the browser, 1186 00:48:49,700 --> 00:48:51,550 then it would look like 50%. 1187 00:48:51,550 --> 00:48:53,884 Again, like I said, CSS can be a lot of guess-and-check. 1188 00:48:53,884 --> 00:48:56,049 Like, you think something's going to behave one way, 1189 00:48:56,049 --> 00:48:57,805 but it behaves a totally different way. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON BUCHHOLTZ-AU: And you just get smarter, 1191 00:48:59,420 --> 00:49:02,020 and you just get a better intuition for it as you move along. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: And it gets worse and worse. 1193 00:49:02,730 --> 00:49:03,496 So it's really just a race. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON BUCHHOLTZ-AU: That's super encouraging. 1195 00:49:05,454 --> 00:49:07,070 We want them to like CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS is awesome. 1197 00:49:08,810 --> 00:49:10,354 Remember that. 1198 00:49:10,354 --> 00:49:11,020 Other questions? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON BUCHHOLTZ-AU: The one thing. 1200 00:49:14,297 --> 00:49:14,880 Anything else? 1201 00:49:14,880 --> 00:49:15,140 Cool. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS REIMERS: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON BUCHHOLTZ-AU: Well, if you guys have any questions later on, 1204 00:49:18,523 --> 00:49:20,919 we're always available as per usual. 1205 00:49:20,919 --> 00:49:22,960 You'll probably see some of us for final projects 1206 00:49:22,960 --> 00:49:24,280 and definitely at the hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Absolutely. 1208 00:49:25,200 --> 00:49:25,720 And at the fair. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON BUCHHOLTZ-AU: And at the fair. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Look forward to seeing all of your awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON BUCHHOLTZ-AU: We'll see all of your awesome websites 1213 00:49:29,420 --> 00:49:30,572 that will be beautiful. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: You can always see, like, the websites 1215 00:49:32,780 --> 00:49:36,234 who had, like, good CSS and then like those who did not try to do CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON BUCHHOLTZ-AU: Also, another thing, one more thing to look into 1217 00:49:39,150 --> 00:49:40,445 is Bootstrapping. 1218 00:49:40,445 --> 00:49:41,805 So Bootstrap is great. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google that if you-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON BUCHHOLTZ-AU: Google it. 1221 00:49:43,573 --> 00:49:44,340 It's fabulous. 1222 00:49:44,340 --> 00:49:45,620 You'll love it. 1223 00:49:45,620 --> 00:49:48,000 And now that you have a basic understanding of CSS, 1224 00:49:48,000 --> 00:49:50,340 it'll make a lot more sense. 1225 00:49:50,340 --> 00:49:50,890 Awesome. 1226 00:49:50,890 --> 00:49:51,480 Thanks, guys. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Thank you so much. 1228 00:49:53,330 --> 00:49:54,219