5.5 CSS selectors - Video Tutorials & Practice Problems

<v ->All right, we ended the last section</v> by styling the anchor tags inside of this div. But this is really just a rudimentary way to specify things on the page. It's not the kind of thing that works on a full website though, is it, Lee? <v Lee>No, you would never want to do this.</v> I mean, you're always gonna be doing some generic HTML styling, like for instance, styling how links look across your page, but you can't keep putting As inside of divs and targeting it with just generic selectors. You need to do something that is more efficient and more targeted than this, and the only way to do that is to start using CSS IDs and CSS classes. <v ->Okay. So what's the difference between those?</v> <v Lee>A CSS ID is far more specific.</v> It is basically the highest that you can go in specificity, and you can only have one ID, per element, per page, essentially. You can have multiple per page, but you don't want to. Classes are more flexible. You can have multiple classes on a single element. You can have many classes on a single page. And for that reason, people tend to prefer that sites be styled using classes than using IDs. So we're gonna show both. Right now. <v ->Let's take a look.</v> Yeah. Let's take a look. We're gonna start with the div right here, right? And this is the kind of thing we probably wouldn't do in real life, but just to demo IDs, we'll put one in. So, the way you do it is just with the ID, and then you say equals to, and then a string, and there are some rules. You can look at the text, but I prefer to use these hyphens or underscores, basically. <v Lee>No spaces.</v> <v ->No spaces.</v> <v ->If you were to use a space,</v> that would be like adding a second ID, and only the first one would be recognized because you can only have one ID per element. <v ->Right. And in particular, not only can we not have</v> two IDs on this one element, but we also do not want to repeat this, right? So this would be... <v Lee>I mean, you can do that,</v> but when your site becomes more complicated and you start using something like JavaScript, this would cause problems because JavaScript only expects there to be one ID per page, essentially. So you can get some really funky behaviors when you're trying to do stuff. <v ->Okay. So, we don't wanna do that.</v> But, we can add more the same class on multiple elements, right? <v Lee>Correct.</v> <v ->So, let's add a class like this.</v> And so this here exec bio is--what's the name motivated by? What's the exec in this context? <v Lee>The executive biography.</v> <v ->Oh, okay. So it's like the top level of the first one.</v> <v Lee>Exactly.</v> <v ->And then we're going to use these eventually</v> for short biographies and the class on each of these will be a bio box. <v Lee>Which is a box that contains a bio.</v> <v ->Right. And now we can use this on every one of these divs,</v> which let's just copy this and... I thought, "do I want to copy this space? No, I don't need this space." I should have copied it. Well, there we go. And now if we refresh this, nothing should happen, right? These IDs and classes aren't visible to the user, right? <v Lee>Correct. If you see something, something went wrong.</v> <v ->Right, so it should just be the same.</v> But what this lets us do is add styles to specific IDs and classes. So, the first thing we wanted to do just as a demo, we changed the background color of uh... <v Lee>Exec bio.</v> <v ->The executive bio. Right.</v> So, let's go back up here. Now, this is getting more specific, right, Lee? <v Lee>Exactly. Keep going down the page.</v> <v ->Right. And actually, we're gonna get rid of some of these.</v> Let's take a look at this. We're gonna get rid of this one. We don't really want to use that technique, right? Well, actually, we can--let's do it like this. <v Lee>Yeah, leave it there. We actually modify it.</v> <v ->Yeah. Okay, cool.</v> So, do you wanna put it here? <v ->Yeah, let's put it there.</v> <v ->All right. Okay.</v> So the way you would specify an ID inside a CSS is using the hash symbol, like this. And this will apply the following rule to any element that has this ID. Is that right? <v Lee>That's correct.</v> <v ->Okay. So, let's change the background color.</v> Let's make it light gray. And I'm gonna spell this the American way with an A, but the English spelling, G-R-E-Y, is also supported to avoid a holy war presumably between the Brits and the Americans. There we go. So you can see with a refresh. Now there's a light gray background there. So, that's the way to style that ID. And now we wanna style the bio boxes. And in particular, right here, we've got a border for every single div, but what we actually want, as it turns out, is to style just these bio box divs. They're the only divs on the page right now, but this way for future reference if we add extra divs, they won't necessarily or they won't automatically have this border. <v Lee>Because we covered this in the HTML tutorial,</v> but divs are a very generic container. So you don't wanna target something as a style to just the divs because you need to use them for everything on the page. <v ->Right. So, let's change this here.</v> I'm actually just gonna cut it and move it down. So, let's be a little bit more specific, and the way to specify the class is to use the dot. Now, actually, I'm gonna add it to the div like this. We'll do it both ways. So if we do this here, div.bio-box, what that does is it targets the divs with the class bio box. So, this hash symbol for an ID, and a dot for a class. So, it should not change anything. There we go. And now Lee, in the original design, though, we got rid of this div. What's the motivation for that? <v Lee>It's actually something that we're gonna cover</v> later in the tutorial that has a very high specificity. And so, it would make it more difficult to target styles on it. And so, in general you wanna be only as specific as you need to be. So, instead of saying, "target this border, one pixel, solid black at divs that also have bio box," you can just say, "target it at the class bio box." And that is as specific as you need to be without being too specific. <v ->Great. So what we can do in concrete terms is just</v> get rid of that div and it should still work. <v Lee>Yep.</v> <v ->Right, so, just comment out,</v> just double check. Cool. And the final thing we want to change, I think it's the final thing, right? Is this thing we did this kind of rudimentary way, right, with div A, color green. So, instead now what we've got is an anchor tag inside of an element with this bio box class. <v ->Right?</v> <v Lee>Correct.</v> <v ->So we've got bio box and then we can get rid of this here.</v> Actually, we can move it down here. So instead of "div A," we can say ".bio box A" <v Lee>That's correct.</v> <v ->And notice it's not a.bio box,</v> because the anchor tag doesn't have the class. It's the parent element that has the class. So this should still be green. <v Lee>And there it is.</v> <v ->Yeah. It's kind of fun just to get rid of it all,</v> just to see. Go from here... And then just verify that it's actually doing something. That's great. All right, this is a great start at learning how to target specific elements with CSS rules. I want to take the final step that's actually an exercise, but something that I feel like is important at this early stage, which is to make a Git commit and then deploy this up to GitHub pages. So, let's take a look at that. Take a look at the status. Right, so we've just made modifications to index.html. So, to commit changes to files that already exist in the repository we can do dash-A for all, message... And then... what do you wanna say here? What do we do, Lee? We added the internal style sheet. <v Lee>Mhm.</v> <v ->And then also the classes and IDs.</v> And, if we push this up, it should automatically deploy. Let's check it out. So, it didn't change right away. There's sometimes a short delay just while things get processed. Except... is it not working? <v Lee>You wouldn't see any difference.</v> <v ->No, we added the gray.</v> <v Lee>Oh, correct.</v> <v ->So it should look like this.</v> So, why is it not working? All right, we've waited a bit here and refreshed this page, and discovered that it's not working. That's a little frustrating, but we made a discovery, which is that GitHub has changed the behavior of this user page, which is called username.github.io, or maybe it was always this way and I just didn't know. But the bottom line is that if you look at the configuration you can see here in the settings that it actually says "Your GitHub Pages site is currently being built from the master branch. User pages must be built from the master branch." So, we actually don't wanna use the GH pages branch, we want to use master, and that's why it's not updating. So, let's fix that. The easiest way to do this is just to switch to the master branch. By the way, here I'm using CO, which is an alias for Checkout that pretty much everyone sets up, but it's not default Git. So, if that doesn't work you should probably set up that alias. And now I'm gonna merge in the changes from the GH pages branch. And then push them up. And since we're not gonna need GH Pages, let's just get rid of it. So, branch dash lowercase D will work. This deletes it only if it's been merged in, but it has been, so this is the safest way to delete a branch. Here we go. And we can delete it on GitHub too, but that's not... I'll leave that as an exercise. That's not necessary right now to get this to work. All right. So we did that push up to GitHub. And now if I refresh it, aha! Now it's working. Look at that. So we've got the great background. Cool.