WEBVTT 00:00:00.095 --> 00:00:02.336 In this webpage, we're using CSS 00:00:02.336 --> 00:00:04.600 to style our ``s and paragraphs 00:00:04.600 --> 00:00:08.920 so that all the ``s are green and all the paragraphs are purple. 00:00:09.537 --> 00:00:13.460 But what if we wanted to select just the first `` 00:00:13.460 --> 00:00:16.462 or style just the second paragraph? 00:00:16.716 --> 00:00:19.867 We'd need to come up with a way to tell the browser exactly which 00:00:19.867 --> 00:00:21.513 of the elements we're selecting 00:00:21.513 --> 00:00:24.931 so that it didn't apply the styles to all of them like it is now. 00:00:25.333 --> 00:00:27.945 One way to do that is to select by ID. 00:00:28.265 --> 00:00:30.525 We can give a tag in our page a unique ID 00:00:30.525 --> 00:00:32.176 and then we can tell CSS, 00:00:32.176 --> 00:00:36.297 "Listen here: I only want to apply these styles to the element with this ID, 00:00:36.297 --> 00:00:38.208 not to any of the other elements." 00:00:38.455 --> 00:00:41.281 To do that, the first step is actually modifying the HTML 00:00:41.281 --> 00:00:45.132 to add id attributes to the tags we want to specifically select. 00:00:45.741 --> 00:00:48.371 Let's start with the second paragraph here. 00:00:48.529 --> 00:00:50.896 To add an id attribute, we put our cursor 00:00:50.896 --> 00:00:53.415 in the start `` tag right after the p, 00:00:53.415 --> 00:00:58.357 then add a space, and then type `id = "` 00:00:58.982 --> 00:01:02.667 Now we need to fill in this id attribute with a value. 00:01:02.812 --> 00:01:04.180 What ID should I give it? 00:01:04.180 --> 00:01:06.452 Well, it should be descripitive and unique. 00:01:06.508 --> 00:01:09.229 Nothing else on this page should ever have the same ID. 00:01:09.479 --> 00:01:15.080 Well since this is a song about rabbits, I'll call it rabbits-song. 00:01:15.422 --> 00:01:19.837 We can't have spaces in IDs, so if they have multiple words like this one 00:01:19.837 --> 00:01:22.237 you should always use hyphens or underscores. 00:01:22.596 --> 00:01:24.717 I really like hypens, myself. 00:01:25.650 --> 00:01:28.941 Now we have a way of identifying this paragraph uniquely. 00:01:29.016 --> 00:01:31.646 So we can add a CSS rule targeting it. 00:01:31.746 --> 00:01:35.479 Let's go back up to our `` tag for the second step. 00:01:35.598 --> 00:01:38.428 We'll add a new line, after the last rule there. 00:01:39.478 --> 00:01:43.255 Now remember, the first part of a CSS rule is the selector: 00:01:43.255 --> 00:01:45.840 the part that tells the browser what to select. 00:01:46.098 --> 00:01:51.130 In our previous rules up here, we used selectors like `` and `` 00:01:51.130 --> 00:01:54.031 to select all the ``s and ``s on the page. 00:01:54.554 --> 00:01:57.203 Now to make a selector that only selects elements 00:01:57.203 --> 00:01:58.671 with a particular ID, 00:01:58.671 --> 00:02:00.862 we must start the selector with a hash sign. 00:02:01.293 --> 00:02:04.547 That tells the browser that whatever is coming next is an ID. 00:02:05.147 --> 00:02:08.798 Now we write our ID: rabbits-song. 00:02:09.603 --> 00:02:11.882 The rest of the rule is the same as before. 00:02:11.934 --> 00:02:13.722 We open and close our curly braces, 00:02:13.722 --> 00:02:17.844 we add a property, like background-color... 00:02:18.364 --> 00:02:20.574 ...and ta-da! It worked! 00:02:20.873 --> 00:02:23.934 Only the song paragraph has the yellow background color, 00:02:23.934 --> 00:02:26.093 and the first paragraph stayed the same. 00:02:26.574 --> 00:02:30.764 Let's do this again, for selecting that first ``. 00:02:31.133 --> 00:02:32.866 Can you remember the first step? 00:02:33.515 --> 00:02:36.586 That's right. We need to actually modify this HTML 00:02:36.586 --> 00:02:38.145 to add the `id` attribute. 00:02:38.300 --> 00:02:40.693 So we stick our cursor in the start tag, 00:02:40.693 --> 00:02:43.520 add a space, type `id =` 00:02:43.580 --> 00:02:46.691 and then type a very unique and descriptive ID. 00:02:46.791 --> 00:02:49.944 So, "rabbits-info-heading". 00:02:50.690 --> 00:02:54.043 Okay, the second step. Back up in our style tag 00:02:54.043 --> 00:02:57.429 we add a new line, write the hash sign, 00:02:57.429 --> 00:03:01.840 then our ID, rabbits-info-heading 00:03:01.840 --> 00:03:04.947 and then put our properties inside curly braces { 00:03:04.947 --> 00:03:08.625 background-color: purple; } 00:03:08.945 --> 00:03:13.260 Uh-oh! Okay, it didn't work. Umm... do you see what went wrong? 00:03:13.420 --> 00:03:15.279 Did I... spell it the same way? 00:03:15.359 --> 00:03:18.305 rabbits-info-Heading, rabbits-info-heading... 00:03:18.485 --> 00:03:21.049 Hmm... so they look pretty much the same. 00:03:21.160 --> 00:03:23.374 Now I could compare them letter-by-letter 00:03:23.374 --> 00:03:25.079 to figure out what's wrong, 00:03:25.079 --> 00:03:29.633 but what I like to do is just go down and select the ID in the HTML, 00:03:29.679 --> 00:03:33.810 and copy it, and then paste it in here to make sure it's exactly the same. 00:03:33.887 --> 00:03:35.481 And... it worked! 00:03:35.561 --> 00:03:39.825 My `` has a background. And did you noticed what changed? 00:03:40.085 --> 00:03:44.474 Maybe you did. It was the h here. The h used to be a capital H, 00:03:44.474 --> 00:03:47.003 which the browser does not consider the same. 00:03:47.103 --> 00:03:50.231 It has to be that lower h to match the HTML. 00:03:50.315 --> 00:03:52.850 That's because id's are case-sensitive. 00:03:52.930 --> 00:03:57.143 So you have to both spell them and case them the same way everywhere. 00:03:57.513 --> 00:04:01.753 I find it's best to just always use lowercase for every letter in my IDs 00:04:01.753 --> 00:04:04.645 so I don't have to think about what casing I used when. 00:04:05.158 --> 00:04:08.404 Okay, now let me leave you with one last warning: 00:04:08.404 --> 00:04:10.530 IDs must be unique! 00:04:10.648 --> 00:04:13.444 If you have two tags on your page with the same exact ID, 00:04:13.444 --> 00:04:17.835 the browser might style both of them, but it also might style only one of them. 00:04:17.962 --> 00:04:20.341 And you don't want to leave that up to chance. 00:04:20.451 --> 00:04:23.096 Nice, unique, descriptive IDs.