1
99:59:59,999 --> 99:59:59,999
In this webpage, we're using CSS

2
99:59:59,999 --> 99:59:59,999
to style our ``s and paragraphs

3
99:59:59,999 --> 99:59:59,999
so that all the ``s are green 
and all the paragraphs are purple.

4
99:59:59,999 --> 99:59:59,999
But what if we wanted to select 
just the first ``

5
99:59:59,999 --> 99:59:59,999
or style just the second paragraph?

6
99:59:59,999 --> 99:59:59,999
We'd need to come up with a way 
to tell the browser exactly which

7
99:59:59,999 --> 99:59:59,999
of the elements we're selecting

8
99:59:59,999 --> 99:59:59,999
so that it didn't apply the styles 
to all of them like it is now.

9
99:59:59,999 --> 99:59:59,999
One way to do that is to select by ID.

10
99:59:59,999 --> 99:59:59,999
We can give a tag in our page 
a unique ID

11
99:59:59,999 --> 99:59:59,999
and then we can tell CSS,

12
99:59:59,999 --> 99:59:59,999
"Listen here: I only want to apply 
these styles to the element with this ID,

13
99:59:59,999 --> 99:59:59,999
not to any of the other elements."

14
99:59:59,999 --> 99:59:59,999
To do that, the first step is 
actually modifying the HTML

15
99:59:59,999 --> 99:59:59,999
to add id attributes to the tags 
we want to specifically select.

16
99:59:59,999 --> 99:59:59,999
Let's start with 
the second paragraph here.

17
99:59:59,999 --> 99:59:59,999
To add an id attribute, 
we put our cursor

18
99:59:59,999 --> 99:59:59,999
in the start `` tag 
right after the p,

19
99:59:59,999 --> 99:59:59,999
then add a space, and then type 
`id = "`

20
99:59:59,999 --> 99:59:59,999
Now we need to fill in this 
id attribute with a value.

21
99:59:59,999 --> 99:59:59,999
What ID should I give it?

22
99:59:59,999 --> 99:59:59,999
Well, it should be 
descripitive and unique.

23
99:59:59,999 --> 99:59:59,999
Nothing else on this page should 
ever have the same ID.

24
99:59:59,999 --> 99:59:59,999
Well since this is a song about rabbits, 
I'll call it rabbits-song.

25
99:59:59,999 --> 99:59:59,999
We can't have spaces in IDs, so if 
they have multiple words like this one

26
99:59:59,999 --> 99:59:59,999
you should always use 
hyphens or underscores.

27
99:59:59,999 --> 99:59:59,999
I really like hypens, myself.

28
99:59:59,999 --> 99:59:59,999
Now we have a way of identifying 
this paragraph uniquely.

29
99:59:59,999 --> 99:59:59,999
So we can add a CSS rule targeting it.

30
99:59:59,999 --> 99:59:59,999
Let's go back up to our `` tag 
for the second step.

31
99:59:59,999 --> 99:59:59,999
We'll add a new line, 
after the last rule there.

32
99:59:59,999 --> 99:59:59,999
Now remember, the first part 
of a CSS rule is the selector:

33
99:59:59,999 --> 99:59:59,999
the part that tells the browser 
what to select.

34
99:59:59,999 --> 99:59:59,999
In our previous rules up here, 
we used selectors like `` and ``

35
99:59:59,999 --> 99:59:59,999
to select all the ``s and ``s 
on the page.

36
99:59:59,999 --> 99:59:59,999
Now to make a selector 
that only selects elements

37
99:59:59,999 --> 99:59:59,999
with a particular ID,

38
99:59:59,999 --> 99:59:59,999
we must start the selector 
with a hash sign.

39
99:59:59,999 --> 99:59:59,999
That tells the browser that 
whatever is coming next is an ID.

40
99:59:59,999 --> 99:59:59,999
Now we write our ID: 
rabbits-song.

41
99:59:59,999 --> 99:59:59,999
The rest of the rule 
is the same as before.

42
99:59:59,999 --> 99:59:59,999
We open and close our curly braces,

43
99:59:59,999 --> 99:59:59,999
we add a property, 
like background-color...

44
99:59:59,999 --> 99:59:59,999
...and ta-da! It worked!

45
99:59:59,999 --> 99:59:59,999
Only the song paragraph has 
the yellow background color,

46
99:59:59,999 --> 99:59:59,999
and the first paragraph 
stayed the same.

47
99:59:59,999 --> 99:59:59,999
Let's do this again, 
for selecting that first ``.

48
99:59:59,999 --> 99:59:59,999
Can you remember the first step?

49
99:59:59,999 --> 99:59:59,999
That's right. We need to 
actually modify this HTML

50
99:59:59,999 --> 99:59:59,999
to add the `id` attribute.

51
99:59:59,999 --> 99:59:59,999
So we stick our cursor 
in the start tag,

52
99:59:59,999 --> 99:59:59,999
add a space, type 
`id =`

53
99:59:59,999 --> 99:59:59,999
and then type a very unique 
and descriptive ID.

54
99:59:59,999 --> 99:59:59,999
So, "rabbits-info-heading".

55
99:59:59,999 --> 99:59:59,999
Okay, the second step. 
Back up in our style tag

56
99:59:59,999 --> 99:59:59,999
we add a new line, 
write the hash sign,

57
99:59:59,999 --> 99:59:59,999
then our ID, 
rabbits-info-heading

58
99:59:59,999 --> 99:59:59,999
and then put our properties 
inside curly braces {

59
99:59:59,999 --> 99:59:59,999
background-color: purple; 
}

60
99:59:59,999 --> 99:59:59,999
Uh-oh! Okay, it didn't work. 
Umm... do you see what went wrong?

61
99:59:59,999 --> 99:59:59,999
Did I... spell it the same way?

62
99:59:59,999 --> 99:59:59,999
rabbits-info-Heading, 
rabbits-info-heading...

63
99:59:59,999 --> 99:59:59,999
Hmm... so they look pretty much the same.

64
99:59:59,999 --> 99:59:59,999
Now I could compare them 
letter-by-letter

65
99:59:59,999 --> 99:59:59,999
to figure out what's wrong,

66
99:59:59,999 --> 99:59:59,999
but what I like to do is just go down 
and select the ID in the HTML,

67
99:59:59,999 --> 99:59:59,999
and copy it, and then paste it in here 
to make sure it's exactly the same.

68
99:59:59,999 --> 99:59:59,999
And... it worked!

69
99:59:59,999 --> 99:59:59,999
My `` has a background. 
And did you noticed what changed?

70
99:59:59,999 --> 99:59:59,999
Maybe you did. It was the h here. 
The h used to be a capital H,

71
99:59:59,999 --> 99:59:59,999
which the browser 
does not consider the same.

72
99:59:59,999 --> 99:59:59,999
It has to be that lower h 
to match the HTML.

73
99:59:59,999 --> 99:59:59,999
That's because id's are case-sensitive.

74
99:59:59,999 --> 99:59:59,999
So you have to both spell them 
and case them the same way everywhere.

75
99:59:59,999 --> 99:59:59,999
I find it's best to just always use 
lowercase for every letter in my IDs

76
99:59:59,999 --> 99:59:59,999
so I don't have to think about 
what casing I used when.

77
99:59:59,999 --> 99:59:59,999
Okay, now let me leave you with 
one last warning:

78
99:59:59,999 --> 99:59:59,999
IDs must be unique!

79
99:59:59,999 --> 99:59:59,999
If you have two tags on your page 
with the same exact ID,

80
99:59:59,999 --> 99:59:59,999
the browser might style both of them, 
but it also might style only one of them.

81
99:59:59,999 --> 99:59:59,999
And you don't want to leave that 
up to chance.

82
99:59:59,999 --> 99:59:59,999
Nice, unique, descriptive IDs.