[MUSIC PLAYING] ALLISON BUCHHOLTZ-AU: So we're basically just going to give you a rundown of CSS, because we know that it wasn't covered in all the sections. And we really want to make sure that you guys have this tool at your disposal, because it has the ability to make your websites look much prettier. 

And if you're building a website, then you probably want to make it pretty. I mean, you don't have to, but I'd suggest it. [LAUGHS] If you want users to use it, you might want to make it a little [INAUDIBLE]. So we're going to try and give you just some basic tools and understanding, so that when you go out and you're researching things about CSS, it's not complete gibberish, like CSS sometimes to be. 

TOMAS REIMERS: Yeah. Allison said it pretty well. So I guess the first thing we should start with is what is CSS? So CSS is awesome. CSS-- 

ALLISON BUCHHOLTZ-AU: That's the name of our seminar. 

TOMAS REIMERS: Yeah. It's really important that you understand that by then. If you only take away one thing, it's that CSS if awesome. Two is CSS stands for Cascading Style Sheets. So at its core, CSS is a style sheet, meaning it allows you to style a web page. And then what that means, it's a way to add style to your websites. So by style, we mean everything that's not structural-- so things like colors, background images, borders, like, padding, margins. We'll talk about what all that means in a bit. 

So we've just gone ahead and opened both of those up in gedit. So this is index.HTML. And this is main.css. So main.css has nothing. ALLISON BUCHHOLTZ-AU: No style so far. TOMAS REIMERS: None. And as you'll see, it's a really ugly site. ALLISON BUCHHOLTZ-AU: It's just plain. TOMAS REIMERS: Yeah. Yeah, it's not ugly, it's just minimalist. And then here we have index.html. And so for a quick recap of HTML, Allison, you want to just talk about the page? 

ALLISON BUCHHOLTZ-AU: Yeah. So obviously, we have our HTML tag, which just names HTML file. We have our header here, with CSS Awesomeness, which-- if you go back. Where is that? 

TOMAS REIMERS: Oh. Yeah, you can see. ALLISON BUCHHOLTZ-AU: And notice the header is this tab header right up here. And then "Hello, world!" is the text that we have just displaying on the web page, which is-- go back. Back. Which is just in our body here-- the plain text. Also, one thing to notice, if you look here, Tomas switched up these two from our slide. So as long as you have all three of these, you're fine. They can be in whatever order they want. What's most important is just that you have each of those three things. 

TOMAS REIMERS: Cool. Add a doc type? ALLISON BUCHHOLTZ-AU: Yeah. TOMAS REIMERS: Yeah. Cool. ALLISON BUCHHOLTZ-AU: Apparently, my mics don't like me. TOMAS REIMERS: Oh, give us a sec just while Allison switches out her mic. So yeah. So we have our main page. It's kind of unstyled. We don't have much. We just have basically text. We have the style sheet. We have the title. So just bare-boned components make a website. 

So from there, let's talk about what CSS is and what it looks like and all of that. So for that-- ALLISON BUCHHOLTZ-AU: Back to the slides. TOMAS REIMERS: Back to the slides. And Allison can take over. 

ALLISON BUCHHOLTZ-AU: Woo. OK. So in your CSS file, you're going to have a lot of these things called selectors. That will just be the basis of your CSS file. It's just going to be lots and lots of these. So selector. This is just the general anatomy. We're going to go through examples, because if you guys never watched my section, I feel like things in the abstract don't really make sense. It always helps to see the examples. 

So we have some selector. That's going to be some identifier for what we want the style to apply to. And then we can have any set of rules and values. So selectors that you might see might be something like body, or paragraph with P, or header, or whatever, whatever you want your HTML tags to be. 

So in this case, we have body. And we have some rule, which this corresponds to what your style applies to. So in this case, we have background color and font weight. So this is going to change the background of anything within any body tag of our HTML file. And it's going to give it this light blue value. 

So it's going to make the background light blue. And then anything within body is going to have a font weight bold. So it's just going to bold all of our text. And this is just one selector. But you could have very many of these. And as we're going to show later, a little bit more into how that works and more examples there. Anything you want to add? 

TOMAS REIMERS: No. Allison got it. We're just going to cut up an example here on our example site. So let's actually take this. It's perfect. So I'm just going to copy and paste that right into our main.css file. And I'm going to save it. And then we will run it. So side note, one of the most frustrating things is if you don't save a file, and then you, like, reload the page, and like, why isn't the change happening? It happens. So here we saw that we made our website a light blue background and some bolded text. 

I should also mention, if you guys have questions about anything we're doing, please feel free to stop us and ask us. We're totally willing to field questions. 

ALLISON BUCHHOLTZ-AU: Obviously, with CSS, everything builds upon itself. So if one thing doesn't make sense now, we don't want that to bog you down later. 

TOMAS REIMERS: So let's kind of dissect this. So do you want to start with the selector here? 

ALLISON BUCHHOLTZ-AU: Yeah. As I was saying before, body is just our selector here. So if we go back over to our index-- ah. 

TOMAS REIMERS: Which I just closed. Give me a second. So File, Open, index.html. ALLISON BUCHHOLTZ-AU: Cool. So if you notice here, we have these body tags, right? So the selector just corresponds to the tags that we're talking about. So body right here. So what we're saying is everything-- can we go back? I wish I could just like touch the screen. It'd be so much cooler. 

So anything within those body tags, which we saw was just, like, the text, and the body in general refers to, like, the background. If you ever want to change the background, that's going to be in a body tag. Just has these rules applied to them. 

So if we were to go to index.html and-- actually, can we have something outside of the body? If we had, like, a footer or something, it wouldn't apply to this. But anything within these body tags is going to be affected by this body selector that we've made. So if you were to type something else there-- 

TOMAS REIMERS: Let's drive that home. So if we had a div-- so that's just another tag you can have. I'm going to close it. Or let's make this a paragraph. So p stands for paragraph. And within that paragraph. And then I say, "This is text." Cool. And then I made this rule apply to a paragraph instead of the body. You'll see how it applies only to the newly formed paragraph, right, not the whole thing. Does that make sense? 

ALLISON BUCHHOLTZ-AU: So this is all body, but now our selector just corresponds to the paragraph. So we just have bold and blue for this specific paragraph, because this is the only thing that is enclosed within the p tag. 

TOMAS REIMERS: Does that make sense sort of how things encapsulate other things? ALLISON BUCHHOLTZ-AU: Also, just to say, like, one of the best ways to really get comfortable with CSS is to just do things like this, just try it out. It's very simple to type something out, hit Refresh, and see what happens. And as with most CS, experimentation can often lead to a much better intuitive understanding. Even more so than us just, like, talking to you. 

TOMAS REIMERS: Absolutely 100% agree on that point. So if we go back to this, let's start dissecting exactly what these two do. So we have two rules on this. So the first one is background color. And you see that we've set it equal to a value, light blue. 

So in CSS, CSS is sort of very loose about how you're allowed to define color. So you can define them by name. You can also do something like "red." And then if we go back to this, you'll see that the background is red. You can also get really-- I think you can get pretty creative with this, can't you? 

ALLISON BUCHHOLTZ-AU: I think you can use hex. Can't you? 

TOMAS REIMERS: Yeah. So you can use hex. But I'm thinking name-wise. Aren't there? ALLISON BUCHHOLTZ-AU: You can do quite a few. Pretty much like most colors that you can name-- like, I think salmon is one. 

TOMAS REIMERS: We're gonna try salmon. ALLISON BUCHHOLTZ-AU: I think chartreuse is in there. TOMAS REIMERS: Yeah. See? So you can get pretty creative. 

ALLISON BUCHHOLTZ-AU: You could get pretty creative. Like, if you can think of the color name, it's probably in there. If you really want fine detail, you can go hex. 

TOMAS REIMERS: Yeah. So hexadecimal. If you guys remember this back from your old PSET, Image Recover, you guys had to deal with these hex values. And sort of to recap what that is, hex has three values stored in it. So it's in groups of two increments. The first two represent the red value. The second one represents the green value. And the last one is blue? 

So FF happens to represent a hexadecimal 255. So you have 255 red, 255 green, and 0 for blue. And values range between 0 and 255. 

AUDIENCE: Right. So essentially, we could search the internet for any color we want, and identify the actually-known color spectrum combo, and then we could put it in? ALLISON BUCHHOLTZ-AU: Exactly. So you have pretty much complete control over the colors you want within CSS. Are we going to talk about background images later? Or do we want to do that? 

TOMAS REIMERS: Yeah. Absolutely. So first, just to show that red and green is yellow. And if you need some help finding this, you can Google something like "color picker." ALLISON BUCHHOLTZ-AU: Oh, it's so good. I love Color Picker. 

TOMAS REIMERS: colorpicker.com is a good example. And here, you'll see that you have a full Photoshop-like color picker. 

ALLISON BUCHHOLTZ-AU: Mm-hm. Also, the cool things are you can generate color schemes so that you don't have, like, clashing colors. TOMAS REIMERS: And then here's the hex value up here. So you can always find online basically places to get the hex value from. It's not sort of that just, like, we see the colors of the world in numbers. It's more that we go online and find what color we want, and then take the number down. Because it's just a really easy way to reference things in CS. 

ALLISON BUCHHOLTZ-AU: And then there's also-- I forget the exact name of the site. But there's definitely, I think, something from Adobe that generates color schemes for you, which is really cool, because you definitely-- it's sometimes hard to figure out, oh, if I want to use this color, what might be another useful one to use elsewhere on my site to, like, make it nice and cohesive. 

TOMAS REIMERS: Allison's talking about one by Adobe called Kuler, I think. It's K-U-L-E-R. ALLISON BUCHHOLTZ-AU: I think so. I'm pretty sure that's the one. 

TOMAS REIMERS: My favorite has always been Color Scheme Designer. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS REIMERS: Which is now-- 

ALLISON BUCHHOLTZ-AU: Ah, this is beautiful. 

TOMAS REIMERS: And you can basically say, like, I want three colors next to each other. And then let's do something nice. And then you can get an example of what that might look like. And then if you hover over any of them, it gives you the hex value. 

So just as a good way to start thinking about color schemes or what colors in a website might go well together. Because that can be surprisingly not as easy to pick as you think. And then the other cool thing I've always found about this site is if you hit Examples, it'll show what an example website might look like using that color scheme. Anyway. 

Back to the actual CSS. ALLISON BUCHHOLTZ-AU: But obviously, we know these references might be useful. TOMAS REIMERS: No, they definitely can be helpful. So the second rule, Allison? 

ALLISON BUCHHOLTZ-AU: Yeah. The second rule is just corresponding to our font. So font weight is just kind of-- so the weight would be if you want just, like, normal or, like, thinner fonts, or in this case, like, bold. I forget. What's the if you wanted it-- is there a thinner one than just, like, normal? TOMAS REIMERS: I don't actually know if there's a thinner one. ALLISON BUCHHOLTZ-AU: I forget. So font weight we typically just use for bold. If you want to get really into it, we're going to show you. W3Schools has all the different things you can do for fonts. But basically, if you ever want to change anything about font, it's always going to be, like, font-something. So it'll be like, font-family if you're trying to change the actual type. It'll be font-style if you want to make it like cursive, or italics, or whatnot. Or even font-color, if we wanted to change that. 

TOMAS REIMERS: Yup. So you can change that. And sort of just to recap now, so you can see that we have the selector up here. We have these curly braces. And then we have rules delimited by semicolons. Does that make sense? Yeah? Cool. So if that is good-- 

ALLISON BUCHHOLTZ-AU: Back. TOMAS REIMERS: Let's talk specifically about what kind of selectors we have. 'Cause right now we've sort of just shown tags. But you guys could see it plausible. Say you have two paragraphs on a page and you want to be able to style one but not the other, you don't just want to limit yourself to have to use different actual HTML tags to give them different styles. 

So we have three basic types of selectors. ALLISON BUCHHOLTZ-AU: Yeah. So we have tag, which is what we've been talking about right now. So that's kind of like your body or p. And then we have class, which is when we define it in our CSS file, it's always going to be dot, whatever you want the name of your class to be. And this can apply to multiple things. 

Say you have five paragraphs and two of the three of them need to be styled the same, you would apply a class to it. And this is just the way we do it. We'll give you an example of where this actually shows up. But if you had maybe some tag p, after it, you would write, class equals whatever classes you want to apply to it. So whatever class selectors that we want to apply to this specific paragraph, we could just write like this. Of course, I think an example will make it much more concrete. 

The other one we have is id, which we denote with a hash, or pound, or hashtag. TOMAS REIMERS: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. That works, too. And this one should really be unique. They should only apply to one thing on your page. So whether that's a specific paragraph, or some item in a list, or whatever, this should be unique. And in the same way that we just say, like, class= "class1 class2," this can just be id of whatever we have. TOMAS REIMERS: Yeah. So let's definitely talk about examples here. And I'm just going to dive straight back into the code. So let's look at our HTML. And so we right now have one paragraph. This is text. I'm just going to modify it. "This is text 1." And then we're going to have a "This is text 2." 

ALLISON BUCHHOLTZ-AU: Second one. TOMAS REIMERS: Yup. So we now have "This is text 2," right? And we're going to see that if we reload the page, what we're going to find is we're gonna find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS REIMERS: Yeah. We're going to find a "This is text 1," and "This is text 2." 

ALLISON BUCHHOLTZ-AU: And out lovely yellow color. 

TOMAS REIMERS: And you'll see that our selector right now, which applies to p's, or paragraphs, affects both of them, because both of them meet the condition that they're both a p tag. That makes total sense. So the question is, well, what if we wanted to only get one? So exactly like Allison was saying, we have two other ways to do that. I'm going to start with id. 

ALLISON BUCHHOLTZ-AU: Let's start with id. 

TOMAS REIMERS: And both of these are attributes. So attributes exist in HTML. And what they are is something that you add inside the tag which is separate from the tag name. So you can have multiple attributes. Yeah? 

ALLISON BUCHHOLTZ-AU: I was just going to say, from your example from PSET 7, if any of you try to align things to the center, you might have used "text align= center." And you noticed it probably should have centered your text or your navigation bar. So that's just also an attribute that you might be familiar with. TOMAS REIMERS: There's a bunch of attributes that you'll see. Yeah. Like good reference to PSET 7. We have id. You can also have class, things like this. A single tag can have many attributes. So starting with id, let's pretend we want to have an id of-- I don't know. We'll call it special, because this one, we're going to make bold, and underline, and whatever. ALLISON BUCHHOLTZ-AU: It's gonna be super special. TOMAS REIMERS: So this one, we have id special. So the way to select that, then, is in main.css, rather than have a p tag, you do #special, OK? And that selects the thing with id special. Does this make sense to everyone? AUDIENCE: Yeah. TOMAS REIMERS: Cool. So now if we go back, we'll see-- whoops. Yeah. We'll see that it only selects the one with id special. Yeah? Sounds cool. Yes. 

AUDIENCE: Can something have an attribute of both class and an id? 

TOMAS REIMERS: Yes. AUDIENCE: OK. And then what happens if you then give it some rules in CSS that conflict? TOMAS REIMERS: Absolutely. We're definitely going to talk about that. So exactly what you were getting at, you can also have classes. So let's pretend I had three paragraphs and I wanted to style the first two but not the third. Well, your first idea may be, well, I could just give the second one an id. But you can't, because an id, exactly like Allison was saying, has to be unique. 

So instead of an id, what you can use is you can use a class. And a class-- what it allows you to do is basically say, this belongs as part of a group. In this case, our group is called Special. And what we're going to do then is we're going to say-- rather than pound, we're going to use dot. OK? And notice that the pound and dot only exist within the CSS file, not within the HTML. ALLISON BUCHHOLTZ-AU: Yes. Important distinction. 

TOMAS REIMERS: I have had so much struggle, because I put the hash in the HTML and then just felt stupid for a long time. See how it selects both of the ones with that class? Cool. 

Now, things can have multiple classes. Let's say I wanted to make the first two have a background of yellow and the second two have a font color of blue. OK. I don't really know why I'd want to do that, but I can. 

ALLISON BUCHHOLTZ-AU: Might not recommended it for your website. But for our purposes, it'll do. 

TOMAS REIMERS: It's not a good color scheme. ALLISON BUCHHOLTZ-AU: Well, yellow and blue are my high school colors. I don't know, though. TOMAS REIMERS: Allison's high school had a great color scheme. [LAUGHTER] So then what we can call this is let's call this-- so we have Special and we have Pretty. I suggest, for this, you use much more descriptive names. ALLISON BUCHHOLTZ-AU: Yeah, I would call this, like, yellow or blue. 

TOMAS REIMERS: We're not really making a real website, which is why we're not doing that. But if you actually had a real website, you might have, like, article header, article content, first word, things like that, which allow you to be much more descriptive. These are really just like variables. They should be named in a way where you can, like-- yeah, as such. Perfect. 

So background color. And then we're going to say-- so the way to change color is just "color." And we're going to make it blue. That's cool. So now we have the first two have special. Next one's going to have "class= pretty." ALLISON BUCHHOLTZ-AU: And then you'll want to add "pretty" to the middle one. TOMAS REIMERS: Yup. And then to the middle one, to add "pretty," what happens is you just have a space. So the class attribute is a space-separated list of all the classes that apply to that tag. OK? It's not like this one belongs to some kind of special class called "special, space, pretty." It belongs to two classes-- special and pretty. Yes? Cool. 

And then if we look at what happens, we're going to see that first one has yellow background, black text. Second one-- 

ALLISON BUCHHOLTZ-AU: --has bold yellow background with blue text. And our last one just has the blue text that we assigned to it. 

TOMAS REIMERS: Cool? How selectors work? Awesome. 

ALLISON BUCHHOLTZ-AU: Do we want to talk about the conflict now then? 

TOMAS REIMERS: So yeah. Absolutely. So what happens if you have a conflict, right? Let's pretend the first one sets up something like-- ALLISON BUCHHOLTZ-AU: Maybe this one changes the background? TOMAS REIMERS: Yeah. So we're going to make "pretty" change the background to salmon. ALLISON BUCHHOLTZ-AU: You're just with all the great colors today, Tomas. TOMAS REIMERS: Yeah. Because I found out I can use salmon as a real color. So we're only going to do that. I also think Sunset is a real color. AUDIENCE: Sunset's a real color? ALLISON BUCHHOLTZ-AU: Let's try it. TOMAS REIMERS: After this demo just because in case it messes up, I don't want to be debugging. So we know salmon's a real color. So any guesses on what's going to happen? 

ALLISON BUCHHOLTZ-AU: Any idea? 

AUDIENCE: [INAUDIBLE]. 

TOMAS REIMERS: Yeah. So you got it exactly right. Basically, it takes the last rule that it was given. 

ALLISON BUCHHOLTZ-AU: So this is where cascading comes into effect. 

TOMAS REIMERS: So remember how we had that cascading style sheets? So by that, we kind of mean that we have a bunch of rules which apply on top of each other, and they can also override each other. 

ALLISON BUCHHOLTZ-AU: So whatever's at the bottom will override whatever's at the top. You could have rules that completely negate something beforehand. That's also why you want to be careful when you're styling, so you're not creating rules that you're just completely overriding. 

TOMAS REIMERS: Or maybe you do want to overwrite rules. 

ALLISON BUCHHOLTZ-AU: Or maybe you do. Yes. 

TOMAS REIMERS: Pretend you have a class which applies to most things, but let's say you want to change the background color to red and the font weight to bold for most things, but for one, you only want the background color to be red but you want all the other properties, you could do something like "font-weight= normal," which would then undo that bold change. Yeah? Again, the best way, I think Allison said it, is just practice. 

ALLISON BUCHHOLTZ-AU: Experimentation. 

TOMAS REIMERS: Practice, practice, practice, and experiment. I know a lot of people that think CSS is just a lot of guess-and-check at the end of the day, where if you want to do something-- like, you have a rough idea, but you still probably need to try it out to make sure you know what it looks like. 

AUDIENCE: When you're applying classes, more than one to the same paragraph or section, does it matter what order you can type them into the quotes? 

TOMAS REIMERS: No, not at all. 

ALLISON BUCHHOLTZ-AU: What matters is the order within your CSS style sheet. AUDIENCE: Could you repeat the question? TOMAS REIMERS: Oh. ALLISON BUCHHOLTZ-AU: Within class, when you're giving classes to something in the HTML, does it matter which order they're in? It doesn't matter the order. What matters is the order of the class selectors within your CSS, within your style sheet. 

TOMAS REIMERS: Sound good? 

ALLISON BUCHHOLTZ-AU: Lovely. 

TOMAS REIMERS: And then we're going to continue to-- ALLISON BUCHHOLTZ-AU: What do we have next? I forget. Oh, we just have examples. But we've kind of done those. We've done examples on the fly. 

TOMAS REIMERS: We get to combine the selectors soon. 

ALLISON BUCHHOLTZ-AU: Oh, we get to combine selectors. TOMAS REIMERS: So some examples is we have #dog-- pound, or hashtag, or octothorpe, or whatever you want to call that-- sharp. 

ALLISON BUCHHOLTZ-AU: Sharp dog. 

TOMAS REIMERS: Then you have .pets. Something has an id of dog, there's only one dog on the page. Something has an id of cat, there's only one cat. There may be many pets on the page. That's why we gave that classes. You have an example of p. And then so one of the last example, which is something we haven't talked about, is what happens when you combine them. So p.pets. 

So for that, let's go back to the code and introduce another-- yeah. So back here. 

ALLISON BUCHHOLTZ-AU: I feel like this is really-- like just looking through examples is really the way to learn this. So that's what we're doing. 

TOMAS REIMERS: So let's pretend we only want to select text 2, right? So we definitely can't do that with an id. Well, we could do that with an id, but it doesn't have an id. I could add one, but let's pretend that I didn't want to add one or it already has something else. I can't do that with that. The tag is definitely not unique, right? And neither is the class. But you can combine these things. Let's say we wanted to do something which only applies to things which have the class special and which have the class pretty. 

So what you can do is in main.css, you can say, let's first delete this. You can combine these. So you can do .special. No space. Just .special.pretty. What that means is something which is both special and pretty. Does that make sense? And if we go here, what you're going to see is this rule only applies to the second one, which has both of those. And you can do that for a lot of things. You can say-- let's pretend I only wanted to do things which have the class pretty and which are also a paragraph tag. So p.pretty. Let's pretend that I had something pretty on the tag body. OK? I can run this and I can see that it's only going to apply to things which are paragraphs with the class pretty. And you can combine these, basically, as many as you want. So you can just put them together. Does that make sense? ALLISON BUCHHOLTZ-AU: So this kind of is more useful when, Tomas was saying earlier, maybe you have a very complicated website, and you already have a lot of these rules written, and you just need to combine two from before. Like instead of writing a whole new selector and changing it there, you can just combine them where it overlaps. 

TOMAS REIMERS: Or you might find out-- sometimes there's one class which makes font's color like blue, and there's another class which makes the background blue. And that just won't work. So you write a special case, where, like-- but if it has both, what you're going to do is you're going to make this one this shade of blue and this one this other shade of blue. Right? 

ALLISON BUCHHOLTZ-AU: Good for those kinds of exceptions. TOMAS REIMERS: So to think about problems that might arise when you combine them. Cool. So back to our presentation. ALLISON BUCHHOLTZ-AU: We're almost there. TOMAS REIMERS: And it has stopped connecting. ALLISON BUCHHOLTZ-AU: Oh, no. ALLISON BUCHHOLTZ-AU: CS at the office, internet goes down. Oh, the irony. 

TOMAS REIMERS: So fortunately, we can present without the internet, I guess, because we have all the slides here. So let's talk about the relationship of tags. ALLISON BUCHHOLTZ-AU: Right. So just kind of going off of what Tomas said, this is just another way to do it. So we have some parent selector with a child selector. So in this example here, we have some body with a class navbar, class button. Ah. 

TOMAS REIMERS: Oh, sorry. 

ALLISON BUCHHOLTZ-AU: And basically, what this means is select all of the children, like all of these sorts of selectors, within this parent selector. And those are the only ones it's ever going to apply to. I don't know if you have a better way of-- TOMAS REIMERS: So I guess the way to think about this is remember before how we sort of like put them together. And then that means one element which matches all of these. What this is saying is, I want you to match everything within some-- I want you to find a selector. And then within that, I want you to match new things. Right? So in CSS, it's all about sort of being able to match these items. And you can try to match items within other items. 

So let's actually do an example, and we think that'll clarify. So let's pretend we have special, special pretty, whatever. And then we have a link, OK? So remember, a is a link. It's not going to go anywhere. And we're going to give it the class link, I guess. Let's give it the class-- give me an idea. ALLISON BUCHHOLTZ-AU: Cool. TOMAS REIMERS: Coo-- let's go it the class pretty. Why not? 

ALLISON BUCHHOLTZ-AU: OK. TOMAS REIMERS: So right now pretty things are going to make the background blue, background color of salmon. That makes sense. And if we do this-- 

ALLISON BUCHHOLTZ-AU: Do you want to add text so the hyperlink actually shows up? TOMAS REIMERS: That would be a good call. ALLISON BUCHHOLTZ-AU: 'Cause right now we're just gonna get nothing. TOMAS REIMERS: So this is a link. "This is a link." Oh, and this is going to be another link. Let's give it the class "cool." You're right. Cool. So right now we're going to grab this. We're going to throw one. We have one in the special tag, and we also are going to have one in the pretty tag. And right now what we're going to do is we're going to make cool-- what do we want it to do? ALLISON BUCHHOLTZ-AU: Can we make it larger? TOMAS REIMERS: Let's give it a border. ALLISON BUCHHOLTZ-AU: We could border. TOMAS REIMERS: Yeah. So we're going to do something like, border is-- and we're going to explain this all in a second. For now-- 

ALLISON BUCHHOLTZ-AU: To the box model. TOMAS REIMERS: But for now, we're just going to give it a border. So what that means is you're going to see these links. And you're going to see that they have these, like, ugly black borders, which is cool. 

ALLISON BUCHHOLTZ-AU: Our website's so pretty. 

TOMAS REIMERS: Yeah. Our website is awesome. So these two are links, and they appear. Now let's pretend I only wanted to do this if it was not within something which had a background of salmon. So remember that this one has a background of salmon, because it's of class pretty. 

But we want to say that only cools which are in class special, not in class pretty, should have that border. Well, what you can do is you can say, .special, space, .cool. And what that's doing, when you think about it, is it's basically saying, OK, find me everything that matches special. Then within those tags, find me everything that's cool. ALLISON BUCHHOLTZ-AU: So another way that might be good to think about this, bringing it back to C, is just like the idea of scope. So when you have some selector, like the ones that we've been working for before this, your entire web page, all of your HTML is within your scope, right? But when we have these parent-child relationships, it's as if you're narrowing down where you're looking to a specific place, as if, like, we're looking within a specific function instead of our entire file. AUDIENCE: So with that in mind, would it have mattered if we had changed-- ALLISON BUCHHOLTZ-AU: The order? AUDIENCE: --the class in CSS to .cool, space, .special? ALLISON BUCHHOLTZ-AU: Yes, because then that would say, scope it to everything that has cool, and then look at what has-- I mean, like, in this case, I don't think it would have changed it. 

TOMAS REIMERS: If we had said what? Sorry. 

ALLISON BUCHHOLTZ-AU: If we scope it to cool and then look for things out of special, it would be the same, actually. 

TOMAS REIMERS: So it would not be. 

ALLISON BUCHHOLTZ-AU: It wouldn't? Oh, oh well. I am wrong. 

TOMAS REIMERS: So the reason it's different-- common mistake-- is that right now only the link has cool, right? I guess my question to you guys is, what on this page is matched by .cool? There are two tags here, right? Which is this one and this one. Both match cool. Nothing else does. So if you said, .cool, space, .special, what you're going to say is, within these tags, what is special? ALLISON BUCHHOLTZ-AU: Hm. That's what it-- right. Because it's like just something here. 

TOMAS REIMERS: So it selects nothing. 

ALLISON BUCHHOLTZ-AU: Whereas with special, we're within these tags here. 

TOMAS REIMERS: Those and those. AUDIENCE: OK. So those tags from the forward slash? 

TOMAS REIMERS: Yes. Does that make sense? How it's basically trying to narrow scope. ALLISON BUCHHOLTZ-AU: Yeah. I think that's probably the easiest way to think about it. 

TOMAS REIMERS: So we found this, and we found this both matched special. And then we're asking, within these guys, what's cool? And within this one, this one's cool. Within this one, nothing's cool. So this is the only tag that remains. 

ALLISON BUCHHOLTZ-AU: Whereas cool is just within these a tags there. TOMAS REIMERS: Exactly. And what's special within those? Nothing. Now, what I will say is if there was no space, you're asking what's cool and special-- or what's pretty and special, right? If you say .special.pretty, that's the same as .pretty.special. 

Because what removing the space is asking is, when you say .special, you're asking, OK, which ones are special? And then of those, which ones are also pretty, which is the same, grammatically, as asking, what's pretty, and then of those, what's also special? Right? It's the difference of what's within what is. AUDIENCE: OK. TOMAS REIMERS: Yeah. Awesome. So with that in mind then-- 

ALLISON BUCHHOLTZ-AU: I think our last thing is (IN FANCY BRITISH ACCENT) the box model. 

TOMAS REIMERS: The box-- [CHUCKLES] I love the way Allison says that. So the box model thing. 

ALLISON BUCHHOLTZ-AU: Just have a box, I'll be your box model. TOMAS REIMERS: So let's talk about that. So right now we've spent a lot of time talking about selectors. By now, you guys are probably, like, masters of selectors-- you know, how to exactly select the content that you want to manipulate on your screen. 

So now the question is, how exactly can you manipulate it? So I guess the most basic way to think about that is, well, what exactly is an element in CSS? We've spent a lot of time talking about, what is a tag, or what is the most basic representation of a tag? 

A good way to think about that is, what shape is salmon? What shape is, like, the salmon-colored background? 

AUDIENCE: It's a rectangle. 

TOMAS REIMERS: It's a rectangle, right? 

ALLISON BUCHHOLTZ-AU: Wasn't a trick question. [LAUGHTER] 

TOMAS REIMERS: Not trying to trick you guys this late. So we have this rectangle. And the tag is a p, right? So that gives us good belief that the paragraph is represented as a rectangle, at least in the mind of the browser, which it is. 

ALLISON BUCHHOLTZ-AU: I mean, browsers are typically rectangular, so it makes sense. 

TOMAS REIMERS: The idea here is that all of the tags within CSS are represented as a rectangle. And every rectangle has four parts according to CSS, OK? You have the actual content. That's where the text lies. 

ALLISON BUCHHOLTZ-AU: Maybe your picture. 

TOMAS REIMERS: Yeah. You have padding, which is just some kind of white space. Then you have a border. And then you have margin, which is white space outside of that. So that makes no sense to anyone, so we're going to talk about that for a second. So right here, what we're going to do is we're going to create some divs, OK? Excuse me while I-- 

ALLISON BUCHHOLTZ-AU: I feel like we should put a cute picture in. 

TOMAS REIMERS: We definitely should. 

ALLISON BUCHHOLTZ-AU: I feel like everyone could benefit from a cute picture, is all. 

TOMAS REIMERS: Can we all benefit from a-- 

AUDIENCE: Yeah, sure. TOMAS REIMERS: OK, cool. So we should put a cute picture in somewhere. ALLISON BUCHHOLTZ-AU: I feel like a cute bunny might be useful right now. TOMAS REIMERS: Sure. ALLISON BUCHHOLTZ-AU: End of the week. Have something adorab-- 

TOMAS REIMERS: How bout a kitten? 

ALLISON BUCHHOLTZ-AU: A kitten works, too. 

TOMAS REIMERS: Cool, because there's a site for that. It's called PlaceKitten. ALLISON BUCHHOLTZ-AU: That's great. TOMAS REIMERS: Yes. ALLISON BUCHHOLTZ-AU: Just for, like, placeholder images in your website. TOMAS REIMERS: Mm-hm. There's also PlacePuppy. And there's PlaceBacon. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Really? 

TOMAS REIMERS: Oh, we don't have internet access here. 

ALLISON BUCHHOLTZ-AU: [GROANS] Tragic. TOMAS REIMERS: Otherwise, I would show you guys how to put images in your website. We're going to try to get this working before we have to go. But for now, we're just going to talk in colors then. We want to put pictures of kittens-- 

ALLISON BUCHHOLTZ-AU: We did. 

TOMAS REIMERS: --the internet's down for the moment being. So we have two divs, and we're going to give them two ids. We're going to call it "first" and "second." So id= "first." And we're going to give them two colors. So how do we select something with an id of "first"? ALLISON BUCHHOLTZ-AU: Dot or hash? AUDIENCE: Sharp. TOMAS REIMERS: Sharp, perfect. Sharp, hash, whatever we-- 

ALLISON BUCHHOLTZ-AU: Lots of things to call it. 

TOMAS REIMERS: OK. We're going to settle on hashtag, and that's what we're going to go with. OK? 

ALLISON BUCHHOLTZ-AU: Hashtag. 

TOMAS REIMERS: So hashtag's first. 

ALLISON BUCHHOLTZ-AU: So you can tweet the seminar-- hashtag CSS, hashtag cool. TOMAS REIMERS: Hashtag Awesomeness. ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, yes. TOMAS REIMERS: OK. So we have "first" and "second." So first, we're going to have a background color of red. ALLISON BUCHHOLTZ-AU: Uh, colon. TOMAS REIMERS: Yup. ALLISON BUCHHOLTZ-AU: I'll be your spot-checker. TOMAS REIMERS: Allison's got me. Background-color of blue-- 

TOMAS REIMERS: Purple! 

TOMAS REIMERS: Purple. ALLISON BUCHHOLTZ-AU: Yes. Purple's my favorite color, and we haven't used it yet. 

TOMAS REIMERS: Violet. ALLISON BUCHHOLTZ-AU: Violet. That works. 

TOMAS REIMERS: So we're going to have two divs. They're going to be totally empty. We should probably have some text. So "first" is going to be "HELLO." And the "second" will say-- 

ALLISON BUCHHOLTZ-AU: Goodbye. 

AUDIENCE: --"WORLD." Hello, goodbye. ALLISON BUCHHOLTZ-AU: I saw them in concert the other week. TOMAS REIMERS: The Beatles? ALLISON BUCHHOLTZ-AU: For reals. They're not that great. I don't like it. 

TOMAS REIMERS: We have "HELLO" and "GOODBYE." And again, CSS is just awesome, because it recognizes our colors. Don't need to even worry that they exist. They do. 

ALLISON BUCHHOLTZ-AU: They exist. 

TOMAS REIMERS: So CSS I think has 255 words to talk about color. If you can think of a color outside those 255, like, I will be impressed. ALLISON BUCHHOLTZ-AU: Yeah. I think you guys may have just come in right after. 

TOMAS REIMERS: So here, you'll see we have two boxes right on top of each other, right? HELLO and GOODBYE. 

ALLISON BUCHHOLTZ-AU: There's no space in between. They're just smooshed right on top of each other. 

TOMAS REIMERS: So the first thing I guess we should talk about is let's also say-- yeah. So CSS represents them as sort of boxes. And as boxes, they have content. And the content right now is sort of the HELLO or the GOODBYE and that's it. OK? 

So one of the first things you can do is you can add padding. Padding says how much space it should leave on each side. So let's say I want to say 10 pixels on each side. And I will dissect that in a second. ALLISON BUCHHOLTZ-AU: All of these things here are going to be mostly in pixels for the rest of the seminar. You're going to see that it has some space around it, right? So what you don't see here is there's this invisible sort of padding on each side, which says, like, OK, you have your box of content-- 

ALLISON BUCHHOLTZ-AU: Do you want to just pull up the inspect element? 

TOMAS REIMERS: Yeah, that's a good idea. ALLISON BUCHHOLTZ-AU: Also, I find that the inspect element is a good way to figure out if something's going wrong, something unexpected happens, inspecting the tags and seeing what it's like overwritten is helpful. 

TOMAS REIMERS: So I'm not sure if you guys can see this color. Can you? You'll see this padding on the sort of edge. And then you see the actual content in blue, right? So that's the very basics of the box model. You have content. Then you have padding. 

AUDIENCE: Why don't you just use the box inside the-- 

ALLISON BUCHHOLTZ-AU: Right. Because it's just selecting the element right now. 

TOMAS REIMERS: Yup. Other things. So let's talk about that padding command for a second. So in CSS, measurements need to have a unit. So first you have the amount. So in this case, we've said 10. And then the next one we've said is pixels, px. Other ones you might have are things like centimeters, inches. You can do things like, what is 10 inches? And it's going to be ridiculous. 

ALLISON BUCHHOLTZ-AU: Oh, boy. 

AUDIENCE: Whoa. 

TOMAS AND ALLISON: Yeah. TOMAS REIMERS: So that's all padding. I'm going to go back to pixels. 

ALLISON BUCHHOLTZ-AU: Pixels tend to be, like, the standard. When you look at a lot of websites, they mostly work in pixels. TOMAS REIMERS: So you're going to see either pixels-- the other ones you see is em, which is one em is equal to the height of the font which you're currently using. 

ALLISON BUCHHOLTZ-AU: Mm. TOMAS REIMERS: It's a good way to say, like, I want as much space as my font is taking. ALLISON BUCHHOLTZ-AU: Did not know that. You learn something new every day. TOMAS REIMERS: There are a lot of measurements in CS. I suggest you look them up. For all your cases, I think pixels should be sufficient. And they're also what you're going to see in the majority of examples done online. So we'll leave it at pixels. 

You can also, I should say-- so padding sets all of the paddings. You can also do something like "padding-top" to just set-- ALLISON BUCHHOLTZ-AU: Maybe we'll get our "HELLO" back. TOMAS REIMERS: --to just set the padding on the top and nothing else. So the four commands are padding-top, padding-bottom, padding-left, and padding-right. 

ALLISON BUCHHOLTZ-AU: Just like you would expect for a box. 

TOMAS REIMERS: Yeah. Nothing too crazy there. Does that make sense? So that is padding. I'm going to set all the paddings back to 10. And then I'm going to move on to border. 

So what border is is border's a weird command. It takes sort of three things at once. So the first is how big you want it to be as a measurement. Again, I'm only using pixels. And the last thing I should add to measurements is the one thing which doesn't need a unit is 0. It's actually incorrect to give 0 a unit, because 0 is 0 across inches, pixels, centimeters, whatever. It all just means 0, right? So first you give it the measurement. 

Then you give it the style. So I'm going to say "solid." And we'll talk about what that means. And then lastly, you give it a color. So I'm going to say "black." And these are all things we've now seen before, except for style, but we'll talk about that. So you guys have seen measurements, and you've seen colors. And what happens is we get this nice black border around it, right? You guys see how we did that? 

AUDIENCE: Yeah. 

TOMAS REIMERS: Cool. So what is that? So first of all, it's one pixel. That's self-evident enough, right? Like, it's one pixel thick. Or it would be one pixel, but I'm zoomed in, so it's a little bit more than that. 

ALLISON BUCHHOLTZ-AU: And we have this ridiculous resolution TV. 

TOMAS REIMERS: Yeah. You can make it bigger, smaller, whatever. So here's a two-pixel border. You'll see it's twice as thick. Next thing you have is color. That's not interesting. I'm not going to talk about that, really. 

ALLISON BUCHHOLTZ-AU: But the style might be just a little interesting. 

TOMAS REIMERS: Yeah. So style, there are few ones that I see used commonly. First one's solid, next one's dotted, and the last one's dashed. And here is dotted. You'll see that they're a bunch of dots, right? A good way to sort of get a nice border going, dashes are also pretty popular. 

ALLISON BUCHHOLTZ-AU: And then of course, I'm sure there are plenty other styles that you can get. And we have a great set of links at the end for you guys to kind of peruse and look at more cool CSS. 

TOMAS REIMERS: And then the last thing, we're going to talk about the box models real quick. Oh, and then border, exactly like padding, you also have things like border-left, border-right, border-top, border-bottom, which allow you to get at a specific border. So here's just the border left-defined. Does that makes sense? 

ALLISON BUCHHOLTZ-AU: It's a cool way to emphasize things or add lines between different elements. TOMAS REIMERS: Absolutely. So that's our border. And the last one's margin. Margin's like padding except it's not within-- ALLISON BUCHHOLTZ-AU: It's not around your element but actually around the entire box that we've been seeing. 

TOMAS REIMERS: Yeah. Allison said it perfectly. It's not, like, inside your element, it's around the whole box. That means things like background don't apply to it. And it basically says, like, I don't want anything in this much space for me. So like here we have a margin of 10 pixels. So nothing within 10 pixels should be next to me. That's kind of its space but kind of not. So that's the very basics of the box model. Does that make sense? Cool, cool. ALLISON BUCHHOLTZ-AU: Awesome. So now I think we just have our cool resources that we'll take you guys through very quickly. And we'll actually-- well, do we have internet yet? 

TOMAS REIMERS: Let's see if I can open up-- let me just see if I can get internet quickly while Allison talks about anything Allison wants to talk about. ALLISON BUCHHOLTZ-AU: So basically-- I don't know what else I can say at this point. But these are some really good resources. These are ones that Tomas and I have used and that we actually used to prep for this. W3Schools is one that you guys should have seen before. We recommend it for a lot of things with CSS. I know I recommend it to my section all the time. 

One of the great things is that it allows you to kind of mess with CSS and see the changes instantaneously in this, like, double-window view that it has. So you don't have to worry about setting up your own web page, or setting up vhost in your local appliance and local host, and getting all that stuff working. It is embedded right within the page. 

And it has these little lessons that you can go through to learn more about selectors, or learn about manipulating your font, or a background, or an image. And you have these instantaneous results that you don't have to do any other prep work for. So I love W3Schools. It's fabulous. Is it working? 

TOMAS REIMERS: Yeah. No, it's not. Do you want me to try and restart my computer? Or do we want to-- 

ALLISON BUCHHOLTZ-AU: I mean, well, this will also be online. All the slides will be online. So I just highly recommend doing these. 

This is great as just like a cheat sheet. It's just all the basic commands that you have. It's great when you're first starting out your website. Because maybe you don't want to get into all the real nitty gritty design-heavy stuff. You just need to format it in a way that kind of makes sense and will do for the time being. And if you really want to get into it, I know this is, like, one of Tomas's favorite references. We were using it to prep, and it's fabulous. It's the Developer from Mozilla. 

TOMAS REIMERS: So Mozilla are the people who make Firefox. And it's just their own developer reference, which I think is awesome. And it has a wonderful list of resources. So we have-- 

ALLISON BUCHHOLTZ-AU: And then last note is when you're trying to design your website, draw inspiration from things that you think are pretty. Inspecting the element, inspecting the source code can be super helpful for trying to figure out how to style your own website. 

Often, I feel like the best way, besides experimentation, is just to look at things that are pretty. I find it's really hard to just kind of design things on your own, especially in the beginning. So please look at websites that you enjoy looking at. Figure out what makes them appealing to you. And then feel free to try and replicate that. 

TOMAS REIMERS: Right. Even like websites like this, you can see there's definitely a div at the top. And then you have another div within here, which is CSS Awesomeness. And then you have a bunch of links here. If you really just inspect elements, you can sort of start to see what do websites look like, and how can I recreate that if I wanted to. Does that make sense? So we only have three minutes left. So questions? Any of them? Yes. 

AUDIENCE: For the color rectangle, how would you have-- if you didn't want it going across the whole page, could you have made it go across only half the page or just the text? 

TOMAS REIMERS: Yeah, absolutely. So let me see actually. I have two ideas. So first of all, you can also use percents. 

AUDIENCE: Really? 

ALLISON BUCHHOLTZ-AU: So something to look up is relative positioning. It's something that we don't have time to get into, but it's something I definitely recommend you guys checking out. 

TOMAS REIMERS: So percents. And see how we made it just 50% of the width? ALLISON BUCHHOLTZ-AU: If you actually know the number of pixels, you can be more precise that way. You can fiddle around with it. But 50%. If we were to resize our browser, it would make it smaller. 

TOMAS REIMERS: Well, it's basically 50% right now, I think. It's 50%, and then the margin has been added to that. CSS has a lot of quirks. So right now this is 50% of the page width. But remember that you have 10 pixels taken off from each side. So if you were to move that against the left edge of the browser, then it would look like 50%. Again, like I said, CSS can be a lot of guess-and-check. Like, you think something's going to behave one way, but it behaves a totally different way. 

ALLISON BUCHHOLTZ-AU: And you just get smarter, and you just get a better intuition for it as you move along. 

TOMAS REIMERS: And it gets worse and worse. So it's really just a race. 

ALLISON BUCHHOLTZ-AU: That's super encouraging. We want them to like CSS. 

TOMAS REIMERS: CSS is awesome. Remember that. Other questions? 

ALLISON BUCHHOLTZ-AU: The one thing. Anything else? Cool. 

TOMAS REIMERS: Awesome. 

ALLISON BUCHHOLTZ-AU: Well, if you guys have any questions later on, we're always available as per usual. You'll probably see some of us for final projects and definitely at the hackathon. 

TOMAS REIMERS: Absolutely. And at the fair. 

ALLISON BUCHHOLTZ-AU: And at the fair. Oh. 

TOMAS REIMERS: Look forward to seeing all of your awesome-- 

ALLISON BUCHHOLTZ-AU: We'll see all of your awesome websites that will be beautiful. TOMAS REIMERS: You can always see, like, the websites who had, like, good CSS and then like those who did not try to do CSS. ALLISON BUCHHOLTZ-AU: Also, another thing, one more thing to look into is Bootstrapping. So Bootstrap is great. 

TOMAS REIMERS: Google that if you-- 

ALLISON BUCHHOLTZ-AU: Google it. It's fabulous. You'll love it. And now that you have a basic understanding of CSS, it'll make a lot more sense. Awesome. Thanks, guys. 

TOMAS REIMERS: Thank you so much.