WEBVTT 99:59:59.999 --> 99:59:59.999 In this webpage, we're using CSS 99:59:59.999 --> 99:59:59.999 to style our ``s and paragraphs 99:59:59.999 --> 99:59:59.999 so that all the ``s are green and all the paragraphs are purple. 99:59:59.999 --> 99:59:59.999 But what if we wanted to select just the first `` 99:59:59.999 --> 99:59:59.999 or style just the second paragraph? 99:59:59.999 --> 99:59:59.999 We'd need to come up with a way to tell the browser exactly which 99:59:59.999 --> 99:59:59.999 of the elements we're selecting 99:59:59.999 --> 99:59:59.999 so that it didn't apply the styles to all of them like it is now. 99:59:59.999 --> 99:59:59.999 One way to do that is to select by ID. 99:59:59.999 --> 99:59:59.999 We can give a tag in our page a unique ID 99:59:59.999 --> 99:59:59.999 and then we can tell CSS, 99:59:59.999 --> 99:59:59.999 "Listen here: I only want to apply these styles to the element with this ID, 99:59:59.999 --> 99:59:59.999 not to any of the other elements." 99:59:59.999 --> 99:59:59.999 To do that, the first step is actually modifying the HTML 99:59:59.999 --> 99:59:59.999 to add id attributes to the tags we want to specifically select. 99:59:59.999 --> 99:59:59.999 Let's start with the second paragraph here. 99:59:59.999 --> 99:59:59.999 To add an id attribute, we put our cursor 99:59:59.999 --> 99:59:59.999 in the start `` tag right after the p, 99:59:59.999 --> 99:59:59.999 then add a space, and then type `id = "` 99:59:59.999 --> 99:59:59.999 Now we need to fill in this id attribute with a value. 99:59:59.999 --> 99:59:59.999 What ID should I give it? 99:59:59.999 --> 99:59:59.999 Well, it should be descripitive and unique. 99:59:59.999 --> 99:59:59.999 Nothing else on this page should ever have the same ID. 99:59:59.999 --> 99:59:59.999 Well since this is a song about rabbits, I'll call it rabbits-song. 99:59:59.999 --> 99:59:59.999 We can't have spaces in IDs, so if they have multiple words like this one 99:59:59.999 --> 99:59:59.999 you should always use hyphens or underscores. 99:59:59.999 --> 99:59:59.999 I really like hypens, myself. 99:59:59.999 --> 99:59:59.999 Now we have a way of identifying this paragraph uniquely. 99:59:59.999 --> 99:59:59.999 So we can add a CSS rule targeting it. 99:59:59.999 --> 99:59:59.999 Let's go back up to our `` tag for the second step. 99:59:59.999 --> 99:59:59.999 We'll add a new line, after the last rule there. 99:59:59.999 --> 99:59:59.999 Now remember, the first part of a CSS rule is the selector: 99:59:59.999 --> 99:59:59.999 the part that tells the browser what to select. 99:59:59.999 --> 99:59:59.999 In our previous rules up here, we used selectors like `` and `` 99:59:59.999 --> 99:59:59.999 to select all the ``s and ``s on the page. 99:59:59.999 --> 99:59:59.999 Now to make a selector that only selects elements 99:59:59.999 --> 99:59:59.999 with a particular ID, 99:59:59.999 --> 99:59:59.999 we must start the selector with a hash sign. 99:59:59.999 --> 99:59:59.999 That tells the browser that whatever is coming next is an ID. 99:59:59.999 --> 99:59:59.999 Now we write our ID: rabbits-song. 99:59:59.999 --> 99:59:59.999 The rest of the rule is the same as before. 99:59:59.999 --> 99:59:59.999 We open and close our curly braces, 99:59:59.999 --> 99:59:59.999 we add a property, like background-color... 99:59:59.999 --> 99:59:59.999 ...and ta-da! It worked! 99:59:59.999 --> 99:59:59.999 Only the song paragraph has the yellow background color, 99:59:59.999 --> 99:59:59.999 and the first paragraph stayed the same. 99:59:59.999 --> 99:59:59.999 Let's do this again, for selecting that first ``. 99:59:59.999 --> 99:59:59.999 Can you remember the first step? 99:59:59.999 --> 99:59:59.999 That's right. We need to actually modify this HTML 99:59:59.999 --> 99:59:59.999 to add the `id` attribute. 99:59:59.999 --> 99:59:59.999 So we stick our cursor in the start tag, 99:59:59.999 --> 99:59:59.999 add a space, type `id =` 99:59:59.999 --> 99:59:59.999 and then type a very unique and descriptive ID. 99:59:59.999 --> 99:59:59.999 So, "rabbits-info-heading". 99:59:59.999 --> 99:59:59.999 Okay, the second step. Back up in our style tag 99:59:59.999 --> 99:59:59.999 we add a new line, write the hash sign, 99:59:59.999 --> 99:59:59.999 then our ID, rabbits-info-heading 99:59:59.999 --> 99:59:59.999 and then put our properties inside curly braces { 99:59:59.999 --> 99:59:59.999 background-color: purple; } 99:59:59.999 --> 99:59:59.999 Uh-oh! Okay, it didn't work. Umm... do you see what went wrong? 99:59:59.999 --> 99:59:59.999 Did I... spell it the same way? 99:59:59.999 --> 99:59:59.999 rabbits-info-Heading, rabbits-info-heading... 99:59:59.999 --> 99:59:59.999 Hmm... so they look pretty much the same. 99:59:59.999 --> 99:59:59.999 Now I could compare them letter-by-letter 99:59:59.999 --> 99:59:59.999 to figure out what's wrong, 99:59:59.999 --> 99:59:59.999 but what I like to do is just go down and select the ID in the HTML, 99:59:59.999 --> 99:59:59.999 and copy it, and then paste it in here to make sure it's exactly the same. 99:59:59.999 --> 99:59:59.999 And... it worked! 99:59:59.999 --> 99:59:59.999 My `` has a background. And did you noticed what changed? 99:59:59.999 --> 99:59:59.999 Maybe you did. It was the h here. The h used to be a capital H, 99:59:59.999 --> 99:59:59.999 which the browser does not consider the same. 99:59:59.999 --> 99:59:59.999 It has to be that lower h to match the HTML. 99:59:59.999 --> 99:59:59.999 That's because id's are case-sensitive. 99:59:59.999 --> 99:59:59.999 So you have to both spell them and case them the same way everywhere. 99:59:59.999 --> 99:59:59.999 I find it's best to just always use lowercase for every letter in my IDs 99:59:59.999 --> 99:59:59.999 so I don't have to think about what casing I used when. 99:59:59.999 --> 99:59:59.999 Okay, now let me leave you with one last warning: 99:59:59.999 --> 99:59:59.999 IDs must be unique! 99:59:59.999 --> 99:59:59.999 If you have two tags on your page with the same exact ID, 99:59:59.999 --> 99:59:59.999 the browser might style both of them, but it also might style only one of them. 99:59:59.999 --> 99:59:59.999 And you don't want to leave that up to chance. 99:59:59.999 --> 99:59:59.999 Nice, unique, descriptive IDs.