Grouped Selectors & IDs

[00:00:00]
>> Jen Kramer: So just sort of a run through here. We talked about terminology, we talked about the three ways to include CSS in your document and the one that you should always use. We talked about selectors, we talked about using HTML tags as selectors, we talked about classes. I haven't mentioned IDs yet, which we can do really quickly.

[00:00:19]
We talked about descendant selectors,
>> Jen Kramer: And grouping selectors, that's the other thing I need to talk about. We talked about all these properties and values. So let me take five minutes and tell you about IDs and grouping selectors. So for example, right here in my CSS, you'll notice that I have an h2 with the color of orange and I have an h3 with the color of orange, okay.

[00:00:48]
So I have the same style over and over again. Programmers hate this, this makes programmers very angry. They hate it when people repeat themselves over and over again. So they'd to see us tighten up our code a little bit so we aren't so repetitive. Make sense? So one way that we can do this really easily is simply to say, h2, h3, and we can stack our selectors on top of each other, and then we don't even need that one anymore, okay.

[00:01:19]
So really easy, you can just separate your selectors by commas. And then the styles there are going to apply to all of the selectors that you list in that list separated by commas. Makes sense? And they don't all have to be headings. They don't all have to be HTML tags.

[00:01:39]
We could say also big bold. My class big bold, I'd like that to be in there too. And by the way, it also like a, a colon link to be in there too. Yeah, you can throw in whatever you want here. Make sense?
>> Jen Kramer: All right, so that's the comma separated selectors there, that's just going ahead and putting in a whole string in these things.

[00:02:08]
And then the last thing I needed to mention were IDs. So so far we talked about classes in our document as exceptions to the rule. Classes are just, you create your class, it starts with a dot, you apply it in your HTML. You can use that class over and over again on your web page as many times as you want.

[00:02:27]
Make sense, right? There's something else that's called an ID, all right. How many times do you think you can use an ID on your webpage?
>> Jen Kramer: Once, it's an ID. [LAUGH] Okay, so IDs can only be used once on your webpage. And while we can attach styling to IDs, it's very seldom done anymore.

[00:02:51]
You'll actually find very few professional programmers using IDs much in their CSS styling. They are very handy for JavaScript. So you'll find IDs used a lot in JavaScript, not as much in CSS, but you can create an ID. Same way that you would do with a class, you need to come up with a name, only this time it's gonna start with a character that will date you.

[00:03:15]
If you're old like me you call it a pound sign, if you're a young person you call it the hashtag, all right. And then you put in your name, myid.
>> Jen Kramer: And you can put in whatever styling you want here.
>> Jen Kramer: Okay, and so then we can go in ahead and apply that ID wherever we want it to go.

[00:03:43]
So let's say here for this h2 I'll go in ahead and apply my ID of myid.
>> Jen Kramer: So that's what an ID looks like.