Basic CSS Selectors

[00:00:00]
>> Kevin Powell: Is there any way I could improve this or not improve it, but make it so it's, if I'm doing the same thing three times, can I do that? Yeah, go for it, Chris. You could use your comma and put them all in the same. Yeah, perfect. So instead of, if you're declaring the same thing over and over again, you can definitely put them all in one selector, so I could come here and say H2 and then comma A, and we could have them all on one selector and it's going to work the exact same way.

[00:00:31]
It doesn't change anything. We can see the colors are working on all of them. For now, I'm going to leave the H1 and H2 like that because they are getting styled the same. I'm actually going to separate my link one, not because the color is different. This is just a habit that I've built up over time. Links, you tend to have a bit of unique different styling on it, and it just, I want to look for my link styling.

[00:00:52]
I like having it all in one place when there's other properties on it. There's not really a benefit to it other than just the way I like to be organized. The next group of selectors we have are classes. Classes are when you have a class on an element, we have our page header, article header, things like this, and this is beneficial because sometimes we don't want to select every single paragraph. Let's come back and look at our design again.

[00:01:18]
Page one. If you take a close look at them, the first paragraph is larger than the other paragraphs. So there's no way with an element selector to say that only this one paragraph should be larger, and on the second page there's two paragraphs that should actually be larger. So, I don't have a way of doing that with an element selector. Element selectors are all of that element, or that's it. There's nothing else we can do with that.

[00:01:41]
So I can come on my index and I can give this a class. It is equal to, and I'm going to call it lead. You can come in with a different name. This is a typography term, the first paragraph in like a newspaper magazine, they're often the lead paragraph, they're a larger font size. If you're coming from more of a utility class, it could be large text, other things like that. We're going to talk more about naming as we go through things.

[00:02:05]
Coming up with good names is hard. Just give it something descriptive that makes sense, that does what you're telling it to do. So for me, lead makes sense, other people might look at it and not like that class name. I can do that. Dot lead and then come in with a font size declaration. We're going to talk a lot more about things. We can have a font size here. The default font size in the browser for paragraphs is 16 pixels.

[00:02:29]
Anything bigger than that would work, so I can come in, let's say, with 21 pixels. I'm not going to suggest pixels in general, but we'll do this for now until we learn a bit more about things, but I can set that to there and then jump back over to my project. And I'm on the second page, so let's jump back to the home page. I'm going to zoom out a little bit on that page for now, and now we can see that this paragraph here is bigger than the other ones, and if I can come in with a different size there, it gets even bigger with whatever reason.

[00:03:03]
If I wanted it to be smaller, I could make it smaller, and the lead is only impacting that one paragraph. And I mentioned the second one. I also want these two paragraphs to be larger as well, so that just means now I can reuse that existing class that I've already created, which is the benefit of classes. By saying this has a class of lead as well, and this one, because it's the first two classes or first two paragraphs in this case, both have the lead, and we can see those have gotten bigger.

[00:03:36]
Other common use cases for using classes is when you have different elements that you need to look the same, so buttons are a very classic example of this. You'll have links and buttons that both should look like a button. Some people don't like that pattern, but it's part of the web now, it's pretty globally used, so then I can just use the same class on two different elements to get them to look the same, and we've already applied that in our project.

[00:04:03]
The last one is an ID selector, which is an ID is equal to, and then we use it the same way as a class, but instead of a dot at the beginning of it, we do a hashtag at the beginning of it to select that selector, and that's a shortcut for an ID. One thing with IDs is online classes that I can reuse all over the place, an ID you're only supposed to use it once per page, so it's not as useful just because before I had two lead paragraphs, I wouldn't have been able to reuse those if I had the multiple, I wouldn't be able to use an ID over and over again if I wanted to.

[00:04:38]
So in general you won't see IDs used for that reason, as well as specificity, which we'll be talking about a little bit later, but they have an impact on the way that the rules are applied. They can sometimes get in the way. So you'll often hear people saying don't use ID selectors. I would say just use them with a lot of caution. One place they are used is with anchor links. So this is nothing to do with styling, but just a reason to have it.

[00:05:03]
This page actually uses them, so you can see on the sidebar here I can just click and it brings me to each section along there, all that is, if we take a look, those are set up exactly like this. This is copy pasted from the markup, so the href is just looking for the ID of the headings, and when you click it, it will bring you there. So that's a good use case for IDs that can be quite handy. And the last one for now that I wanted to just mention really quickly because it will come up a little bit later is the universal selector, which is the star selector, which means it selects everything on our page, and it's a little bit heavy handed.

[00:05:42]
I'm going to say don't use it. There are a couple of use cases, we'll see them as we come across them, but as a general rule of thumb, I would say try not to. So if I come here and I do a star, and let's just say color is green, actually color might not be the best one, we'll do font family. Do not do this in production or for what you're doing, but font family, I'm just going to write sans serif for now.

[00:06:08]
We're going to talk more about font families later. But it's going to change the font family of everything. It's, I see people using this type of way where they want to, oh, all my fonts should be this, so I'm just going to put it on the star selector. We're going to be very, very specific with when we use it, there's much better ways of accomplishing what I just did here. So, use the star selector or the universal selector with caution, please.