0:00:00.095,0:00:02.336
In this webpage, we're using CSS

0:00:02.336,0:00:04.600
to style our ``s and paragraphs

0:00:04.600,0:00:08.920
so that all the ``s are green [br]and all the paragraphs are purple.

0:00:09.537,0:00:13.460
But what if we wanted to select [br]just the first ``

0:00:13.460,0:00:16.462
or style just the second paragraph?

0:00:16.716,0:00:19.867
We'd need to come up with a way [br]to tell the browser exactly which

0:00:19.867,0:00:21.513
of the elements we're selecting

0:00:21.513,0:00:24.931
so that it didn't apply the styles [br]to all of them like it is now.

0:00:25.333,0:00:27.945
One way to do that is to select by ID.

0:00:28.265,0:00:30.525
We can give a tag in our page [br]a unique ID

0:00:30.525,0:00:32.176
and then we can tell CSS,

0:00:32.176,0:00:36.297
"Listen here: I only want to apply [br]these styles to the element with this ID,

0:00:36.297,0:00:38.208
not to any of the other elements."

0:00:38.455,0:00:41.281
To do that, the first step is [br]actually modifying the HTML

0:00:41.281,0:00:45.132
to add id attributes to the tags [br]we want to specifically select.

0:00:45.741,0:00:48.371
Let's start with [br]the second paragraph here.

0:00:48.529,0:00:50.896
To add an id attribute, [br]we put our cursor

0:00:50.896,0:00:53.415
in the start `` tag [br]right after the p,

0:00:53.415,0:00:58.357
then add a space, and then type [br]`id = "`

0:00:58.982,0:01:02.667
Now we need to fill in this [br]id attribute with a value.

0:01:02.812,0:01:04.180
What ID should I give it?

0:01:04.180,0:01:06.452
Well, it should be [br]descripitive and unique.

0:01:06.508,0:01:09.229
Nothing else on this page should [br]ever have the same ID.

0:01:09.479,0:01:15.080
Well since this is a song about rabbits, [br]I'll call it rabbits-song.

0:01:15.422,0:01:19.837
We can't have spaces in IDs, so if [br]they have multiple words like this one

0:01:19.837,0:01:22.237
you should always use [br]hyphens or underscores.

0:01:22.596,0:01:24.717
I really like hypens, myself.

0:01:25.650,0:01:28.941
Now we have a way of identifying [br]this paragraph uniquely.

0:01:29.016,0:01:31.646
So we can add a CSS rule targeting it.

0:01:31.746,0:01:35.479
Let's go back up to our `` tag [br]for the second step.

0:01:35.598,0:01:38.428
We'll add a new line, [br]after the last rule there.

0:01:39.478,0:01:43.255
Now remember, the first part [br]of a CSS rule is the selector:

0:01:43.255,0:01:45.840
the part that tells the browser [br]what to select.

0:01:46.098,0:01:51.130
In our previous rules up here, [br]we used selectors like `` and ``

0:01:51.130,0:01:54.031
to select all the ``s and ``s [br]on the page.

0:01:54.554,0:01:57.203
Now to make a selector [br]that only selects elements

0:01:57.203,0:01:58.671
with a particular ID,

0:01:58.671,0:02:00.862
we must start the selector [br]with a hash sign.

0:02:01.293,0:02:04.547
That tells the browser that [br]whatever is coming next is an ID.

0:02:05.147,0:02:08.798
Now we write our ID: [br]rabbits-song.

0:02:09.603,0:02:11.882
The rest of the rule [br]is the same as before.

0:02:11.934,0:02:13.722
We open and close our curly braces,

0:02:13.722,0:02:17.844
we add a property, [br]like background-color...

0:02:18.364,0:02:20.574
...and ta-da! It worked!

0:02:20.873,0:02:23.934
Only the song paragraph has [br]the yellow background color,

0:02:23.934,0:02:26.093
and the first paragraph [br]stayed the same.

0:02:26.574,0:02:30.764
Let's do this again, [br]for selecting that first ``.

0:02:31.133,0:02:32.866
Can you remember the first step?

0:02:33.515,0:02:36.586
That's right. We need to [br]actually modify this HTML

0:02:36.586,0:02:38.145
to add the `id` attribute.

0:02:38.300,0:02:40.693
So we stick our cursor [br]in the start tag,

0:02:40.693,0:02:43.520
add a space, type [br]`id =`

0:02:43.580,0:02:46.691
and then type a very unique [br]and descriptive ID.

0:02:46.791,0:02:49.944
So, "rabbits-info-heading".

0:02:50.690,0:02:54.043
Okay, the second step. [br]Back up in our style tag

0:02:54.043,0:02:57.429
we add a new line, [br]write the hash sign,

0:02:57.429,0:03:01.840
then our ID, [br]rabbits-info-heading

0:03:01.840,0:03:04.947
and then put our properties [br]inside curly braces {

0:03:04.947,0:03:08.625
background-color: purple; [br]}

0:03:08.945,0:03:13.260
Uh-oh! Okay, it didn't work. [br]Umm... do you see what went wrong?

0:03:13.420,0:03:15.279
Did I... spell it the same way?

0:03:15.359,0:03:18.305
rabbits-info-Heading, [br]rabbits-info-heading...

0:03:18.485,0:03:21.049
Hmm... so they look pretty much the same.

0:03:21.160,0:03:23.374
Now I could compare them [br]letter-by-letter

0:03:23.374,0:03:25.079
to figure out what's wrong,

0:03:25.079,0:03:29.633
but what I like to do is just go down [br]and select the ID in the HTML,

0:03:29.679,0:03:33.810
and copy it, and then paste it in here [br]to make sure it's exactly the same.

0:03:33.887,0:03:35.481
And... it worked!

0:03:35.561,0:03:39.825
My `` has a background. [br]And did you noticed what changed?

0:03:40.085,0:03:44.474
Maybe you did. It was the h here. [br]The h used to be a capital H,

0:03:44.474,0:03:47.003
which the browser [br]does not consider the same.

0:03:47.103,0:03:50.231
It has to be that lower h [br]to match the HTML.

0:03:50.315,0:03:52.850
That's because id's are case-sensitive.

0:03:52.930,0:03:57.143
So you have to both spell them [br]and case them the same way everywhere.

0:03:57.513,0:04:01.753
I find it's best to just always use [br]lowercase for every letter in my IDs

0:04:01.753,0:04:04.645
so I don't have to think about [br]what casing I used when.

0:04:05.158,0:04:08.404
Okay, now let me leave you with [br]one last warning:

0:04:08.404,0:04:10.530
IDs must be unique!

0:04:10.648,0:04:13.444
If you have two tags on your page [br]with the same exact ID,

0:04:13.444,0:04:17.835
the browser might style both of them, [br]but it also might style only one of them.

0:04:17.962,0:04:20.341
And you don't want to leave that [br]up to chance.

0:04:20.451,0:04:23.096
Nice, unique, descriptive IDs.