9:59:59.000,9:59:59.000
In this webpage, we're using CSS

9:59:59.000,9:59:59.000
to style our ``s and paragraphs

9:59:59.000,9:59:59.000
so that all the ``s are green [br]and all the paragraphs are purple.

9:59:59.000,9:59:59.000
But what if we wanted to select [br]just the first ``

9:59:59.000,9:59:59.000
or style just the second paragraph?

9:59:59.000,9:59:59.000
We'd need to come up with a way [br]to tell the browser exactly which

9:59:59.000,9:59:59.000
of the elements we're selecting

9:59:59.000,9:59:59.000
so that it didn't apply the styles [br]to all of them like it is now.

9:59:59.000,9:59:59.000
One way to do that is to select by ID.

9:59:59.000,9:59:59.000
We can give a tag in our page [br]a unique ID

9:59:59.000,9:59:59.000
and then we can tell CSS,

9:59:59.000,9:59:59.000
"Listen here: I only want to apply [br]these styles to the element with this ID,

9:59:59.000,9:59:59.000
not to any of the other elements."

9:59:59.000,9:59:59.000
To do that, the first step is [br]actually modifying the HTML

9:59:59.000,9:59:59.000
to add id attributes to the tags [br]we want to specifically select.

9:59:59.000,9:59:59.000
Let's start with [br]the second paragraph here.

9:59:59.000,9:59:59.000
To add an id attribute, [br]we put our cursor

9:59:59.000,9:59:59.000
in the start `` tag [br]right after the p,

9:59:59.000,9:59:59.000
then add a space, and then type [br]`id = "`

9:59:59.000,9:59:59.000
Now we need to fill in this [br]id attribute with a value.

9:59:59.000,9:59:59.000
What ID should I give it?

9:59:59.000,9:59:59.000
Well, it should be [br]descripitive and unique.

9:59:59.000,9:59:59.000
Nothing else on this page should [br]ever have the same ID.

9:59:59.000,9:59:59.000
Well since this is a song about rabbits, [br]I'll call it rabbits-song.

9:59:59.000,9:59:59.000
We can't have spaces in IDs, so if [br]they have multiple words like this one

9:59:59.000,9:59:59.000
you should always use [br]hyphens or underscores.

9:59:59.000,9:59:59.000
I really like hypens, myself.

9:59:59.000,9:59:59.000
Now we have a way of identifying [br]this paragraph uniquely.

9:59:59.000,9:59:59.000
So we can add a CSS rule targeting it.

9:59:59.000,9:59:59.000
Let's go back up to our `` tag [br]for the second step.

9:59:59.000,9:59:59.000
We'll add a new line, [br]after the last rule there.

9:59:59.000,9:59:59.000
Now remember, the first part [br]of a CSS rule is the selector:

9:59:59.000,9:59:59.000
the part that tells the browser [br]what to select.

9:59:59.000,9:59:59.000
In our previous rules up here, [br]we used selectors like `` and ``

9:59:59.000,9:59:59.000
to select all the ``s and ``s [br]on the page.

9:59:59.000,9:59:59.000
Now to make a selector [br]that only selects elements

9:59:59.000,9:59:59.000
with a particular ID,

9:59:59.000,9:59:59.000
we must start the selector [br]with a hash sign.

9:59:59.000,9:59:59.000
That tells the browser that [br]whatever is coming next is an ID.

9:59:59.000,9:59:59.000
Now we write our ID: [br]rabbits-song.

9:59:59.000,9:59:59.000
The rest of the rule [br]is the same as before.

9:59:59.000,9:59:59.000
We open and close our curly braces,

9:59:59.000,9:59:59.000
we add a property, [br]like background-color...

9:59:59.000,9:59:59.000
...and ta-da! It worked!

9:59:59.000,9:59:59.000
Only the song paragraph has [br]the yellow background color,

9:59:59.000,9:59:59.000
and the first paragraph [br]stayed the same.

9:59:59.000,9:59:59.000
Let's do this again, [br]for selecting that first ``.

9:59:59.000,9:59:59.000
Can you remember the first step?

9:59:59.000,9:59:59.000
That's right. We need to [br]actually modify this HTML

9:59:59.000,9:59:59.000
to add the `id` attribute.

9:59:59.000,9:59:59.000
So we stick our cursor [br]in the start tag,

9:59:59.000,9:59:59.000
add a space, type [br]`id =`

9:59:59.000,9:59:59.000
and then type a very unique [br]and descriptive ID.

9:59:59.000,9:59:59.000
So, "rabbits-info-heading".

9:59:59.000,9:59:59.000
Okay, the second step. [br]Back up in our style tag

9:59:59.000,9:59:59.000
we add a new line, [br]write the hash sign,

9:59:59.000,9:59:59.000
then our ID, [br]rabbits-info-heading

9:59:59.000,9:59:59.000
and then put our properties [br]inside curly braces {

9:59:59.000,9:59:59.000
background-color: purple; [br]}

9:59:59.000,9:59:59.000
Uh-oh! Okay, it didn't work. [br]Umm... do you see what went wrong?

9:59:59.000,9:59:59.000
Did I... spell it the same way?

9:59:59.000,9:59:59.000
rabbits-info-Heading, [br]rabbits-info-heading...

9:59:59.000,9:59:59.000
Hmm... so they look pretty much the same.

9:59:59.000,9:59:59.000
Now I could compare them [br]letter-by-letter

9:59:59.000,9:59:59.000
to figure out what's wrong,

9:59:59.000,9:59:59.000
but what I like to do is just go down [br]and select the ID in the HTML,

9:59:59.000,9:59:59.000
and copy it, and then paste it in here [br]to make sure it's exactly the same.

9:59:59.000,9:59:59.000
And... it worked!

9:59:59.000,9:59:59.000
My `` has a background. [br]And did you noticed what changed?

9:59:59.000,9:59:59.000
Maybe you did. It was the h here. [br]The h used to be a capital H,

9:59:59.000,9:59:59.000
which the browser [br]does not consider the same.

9:59:59.000,9:59:59.000
It has to be that lower h [br]to match the HTML.

9:59:59.000,9:59:59.000
That's because id's are case-sensitive.

9:59:59.000,9:59:59.000
So you have to both spell them [br]and case them the same way everywhere.

9:59:59.000,9:59:59.000
I find it's best to just always use [br]lowercase for every letter in my IDs

9:59:59.000,9:59:59.000
so I don't have to think about [br]what casing I used when.

9:59:59.000,9:59:59.000
Okay, now let me leave you with [br]one last warning:

9:59:59.000,9:59:59.000
IDs must be unique!

9:59:59.000,9:59:59.000
If you have two tags on your page [br]with the same exact ID,

9:59:59.000,9:59:59.000
the browser might style both of them, [br]but it also might style only one of them.

9:59:59.000,9:59:59.000
And you don't want to leave that [br]up to chance.

9:59:59.000,9:59:59.000
Nice, unique, descriptive IDs.