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.