1
00:00:00,095 --> 00:00:02,336
In this webpage, we're using CSS

2
00:00:02,336 --> 00:00:04,600
to style our ``s and paragraphs

3
00:00:04,600 --> 00:00:08,920
so that all the ``s are green 
and all the paragraphs are purple.

4
00:00:09,537 --> 00:00:13,460
But what if we wanted to select 
just the first ``

5
00:00:13,460 --> 00:00:16,462
or style just the second paragraph?

6
00:00:16,716 --> 00:00:19,867
We'd need to come up with a way 
to tell the browser exactly which

7
00:00:19,867 --> 00:00:21,513
of the elements we're selecting

8
00:00:21,513 --> 00:00:24,931
so that it didn't apply the styles 
to all of them like it is now.

9
00:00:25,333 --> 00:00:27,945
One way to do that is to select by ID.

10
00:00:28,265 --> 00:00:30,525
We can give a tag in our page 
a unique ID

11
00:00:30,525 --> 00:00:32,176
and then we can tell CSS,

12
00:00:32,176 --> 00:00:36,297
"Listen here: I only want to apply 
these styles to the element with this ID,

13
00:00:36,297 --> 00:00:38,208
not to any of the other elements."

14
00:00:38,455 --> 00:00:41,281
To do that, the first step is 
actually modifying the HTML

15
00:00:41,281 --> 00:00:45,132
to add id attributes to the tags 
we want to specifically select.

16
00:00:45,741 --> 00:00:48,371
Let's start with 
the second paragraph here.

17
00:00:48,529 --> 00:00:50,896
To add an id attribute, 
we put our cursor

18
00:00:50,896 --> 00:00:53,415
in the start `` tag 
right after the p,

19
00:00:53,415 --> 00:00:58,357
then add a space, and then type 
`id = "`

20
00:00:58,982 --> 00:01:02,667
Now we need to fill in this 
id attribute with a value.

21
00:01:02,812 --> 00:01:04,180
What ID should I give it?

22
00:01:04,180 --> 00:01:06,452
Well, it should be 
descripitive and unique.

23
00:01:06,508 --> 00:01:09,229
Nothing else on this page should 
ever have the same ID.

24
00:01:09,479 --> 00:01:15,080
Well since this is a song about rabbits, 
I'll call it rabbits-song.

25
00:01:15,422 --> 00:01:19,837
We can't have spaces in IDs, so if 
they have multiple words like this one

26
00:01:19,837 --> 00:01:22,237
you should always use 
hyphens or underscores.

27
00:01:22,596 --> 00:01:24,717
I really like hypens, myself.

28
00:01:25,650 --> 00:01:28,941
Now we have a way of identifying 
this paragraph uniquely.

29
00:01:29,016 --> 00:01:31,646
So we can add a CSS rule targeting it.

30
00:01:31,746 --> 00:01:35,479
Let's go back up to our `` tag 
for the second step.

31
00:01:35,598 --> 00:01:38,428
We'll add a new line, 
after the last rule there.

32
00:01:39,478 --> 00:01:43,255
Now remember, the first part 
of a CSS rule is the selector:

33
00:01:43,255 --> 00:01:45,840
the part that tells the browser 
what to select.

34
00:01:46,098 --> 00:01:51,130
In our previous rules up here, 
we used selectors like `` and ``

35
00:01:51,130 --> 00:01:54,031
to select all the ``s and ``s 
on the page.

36
00:01:54,554 --> 00:01:57,203
Now to make a selector 
that only selects elements

37
00:01:57,203 --> 00:01:58,671
with a particular ID,

38
00:01:58,671 --> 00:02:00,862
we must start the selector 
with a hash sign.

39
00:02:01,293 --> 00:02:04,547
That tells the browser that 
whatever is coming next is an ID.

40
00:02:05,147 --> 00:02:08,798
Now we write our ID: 
rabbits-song.

41
00:02:09,603 --> 00:02:11,882
The rest of the rule 
is the same as before.

42
00:02:11,934 --> 00:02:13,722
We open and close our curly braces,

43
00:02:13,722 --> 00:02:17,844
we add a property, 
like background-color...

44
00:02:18,364 --> 00:02:20,574
...and ta-da! It worked!

45
00:02:20,873 --> 00:02:23,934
Only the song paragraph has 
the yellow background color,

46
00:02:23,934 --> 00:02:26,093
and the first paragraph 
stayed the same.

47
00:02:26,574 --> 00:02:30,764
Let's do this again, 
for selecting that first ``.

48
00:02:31,133 --> 00:02:32,866
Can you remember the first step?

49
00:02:33,515 --> 00:02:36,586
That's right. We need to 
actually modify this HTML

50
00:02:36,586 --> 00:02:38,145
to add the `id` attribute.

51
00:02:38,300 --> 00:02:40,693
So we stick our cursor 
in the start tag,

52
00:02:40,693 --> 00:02:43,520
add a space, type 
`id =`

53
00:02:43,580 --> 00:02:46,691
and then type a very unique 
and descriptive ID.

54
00:02:46,791 --> 00:02:49,944
So, "rabbits-info-heading".

55
00:02:50,690 --> 00:02:54,043
Okay, the second step. 
Back up in our style tag

56
00:02:54,043 --> 00:02:57,429
we add a new line, 
write the hash sign,

57
00:02:57,429 --> 00:03:01,840
then our ID, 
rabbits-info-heading

58
00:03:01,840 --> 00:03:04,947
and then put our properties 
inside curly braces {

59
00:03:04,947 --> 00:03:08,625
background-color: purple; 
}

60
00:03:08,945 --> 00:03:13,260
Uh-oh! Okay, it didn't work. 
Umm... do you see what went wrong?

61
00:03:13,420 --> 00:03:15,279
Did I... spell it the same way?

62
00:03:15,359 --> 00:03:18,305
rabbits-info-Heading, 
rabbits-info-heading...

63
00:03:18,485 --> 00:03:21,049
Hmm... so they look pretty much the same.

64
00:03:21,160 --> 00:03:23,374
Now I could compare them 
letter-by-letter

65
00:03:23,374 --> 00:03:25,079
to figure out what's wrong,

66
00:03:25,079 --> 00:03:29,633
but what I like to do is just go down 
and select the ID in the HTML,

67
00:03:29,679 --> 00:03:33,810
and copy it, and then paste it in here 
to make sure it's exactly the same.

68
00:03:33,887 --> 00:03:35,481
And... it worked!

69
00:03:35,561 --> 00:03:39,825
My `` has a background. 
And did you noticed what changed?

70
00:03:40,085 --> 00:03:44,474
Maybe you did. It was the h here. 
The h used to be a capital H,

71
00:03:44,474 --> 00:03:47,003
which the browser 
does not consider the same.

72
00:03:47,103 --> 00:03:50,231
It has to be that lower h 
to match the HTML.

73
00:03:50,315 --> 00:03:52,850
That's because id's are case-sensitive.

74
00:03:52,930 --> 00:03:57,143
So you have to both spell them 
and case them the same way everywhere.

75
00:03:57,513 --> 00:04:01,753
I find it's best to just always use 
lowercase for every letter in my IDs

76
00:04:01,753 --> 00:04:04,645
so I don't have to think about 
what casing I used when.

77
00:04:05,158 --> 00:04:08,404
Okay, now let me leave you with 
one last warning:

78
00:04:08,404 --> 00:04:10,530
IDs must be unique!

79
00:04:10,648 --> 00:04:13,444
If you have two tags on your page 
with the same exact ID,

80
00:04:13,444 --> 00:04:17,835
the browser might style both of them, 
but it also might style only one of them.

81
00:04:17,962 --> 00:04:20,341
And you don't want to leave that 
up to chance.

82
00:04:20,451 --> 00:04:23,096
Nice, unique, descriptive IDs.