In this webpage, we're using CSS

to style our ``s and paragraphs

so that all the ``s are green 
and all the paragraphs are purple.

But what if we wanted to select 
just the first ``

or style just the second paragraph?

We'd need to come up with a way 
to tell the browser exactly which

of the elements we're selecting

so that it 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 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 the start `` tag 
right after the p,

then add a space, and then type 
`id = "`

Now we need to fill in this 
id attribute with a value.

What ID should I give it?

Well, it should be 
descripitive 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 hypens, 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 `` tag 
for the second step.

We'll add a new line, 
after the last rule there.

Now remember, the first part 
of a CSS rule is the selector:

the part that tells the browser 
what to select.

In our previous rules up here, 
we used selectors like `` and ``

to select all the ``s and ``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 
is the same as before.

We open and close our curly braces,

we add a property, 
like background-color...

...and ta-da! 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 that first ``.

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 =`

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 sign,

then our ID, 
rabbits-info-heading

and then put our properties 
inside curly braces {

background-color: purple; 
}

Uh-oh! Okay, it didn't work. 
Umm... do you see what went wrong?

Did I... spell it the same way?

rabbits-info-Heading, 
rabbits-info-heading...

Hmm... 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 `` has a background. 
And did you noticed 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 id's 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 
lowercase for every 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.