CSS Selecting by id

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.