CSS: Selecting by id | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy


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

5 comments on “CSS: Selecting by id | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy”

  1. jean reynold says:

    Thanks for the video.

  2. Feitidede says:

    This is oddly sad and painful to step on, thank for the awesome video!

  3. jardim produtivo says:

    portugues please

  4. 41hz says:

    Thanks Pamela! Could you make the videos more accessible on mobile devices? When I use my iPad, I have to watch it on YouTube and have to play it the full way on the website, but the website is blank. It gives no code. I can hear you talking, though.
    Thanks for making these amazing vids though! 🤓🤓🤓🤓

  5. 852 harimao says:

    amazing video.

Leave a Reply

Your email address will not be published. Required fields are marked *