Let's take a look at our webpage.
It has these top headings,
it has this paragraph describing rabbits,
and now it actually has multiple paragraphs,
with the lyrics to my favorite song about rabbits.
Last time, we styled the first lyrics paragraph using the id.
But now that I have multiple paragraphs of lyrics,
I want them all to have that yellow background color.
How could we do that using what we know so far?
The first thing we learned how to do
was to select all tags of a particular type,
like with the `p` selector.
But that colored all of the paragraphs, not just the paragraphs with lyrics.
We need something more specific.
Then we learned how to select tags with a particular id,
like selecting the paragraph with the "rabbit-song" id.
But that only selected the first paragraph.
We can't add that id to the other paragraphs,
because we're not allowed to use the same id on multiple tags.
If we wanted to select the other paragraphs,
we'd have to give each of them new IDs
(like "song-lyrics2", and "song-lyrics3"),
beacuse every ID must be unique.
And then we'd have to add rules for each of them.
We could do that. But, wow, that is a lot of work!
And every time we added a new verse to the song,
we'd have to remember to add another ID to the HTML,
and another ID to the CSS rules,
and if we added hundreds of verses, it would just be exhausting.
Well, guess what?
There is a better way, and it's called "classes".
A class is basically:
a way of assigning a particular element to a group.
And you can assign as many elements as you want to a group.
To add a class, we need to add a class attribute, like we did with IDs.
First I'll just delete this ID, since I'm going to replace it.
Now I've got my cursor in the start `` tag.
I'll add a space, and write: class = "
Now we need to come up with a class name.
A nice descriptive one.
Let's call it, "song-lyrics".
I've typed that in there.
What other elements should have this class name?
Well, all the other lyric paragraphs.
So we'll just go down the page,
and add the attribute to each of the paragraph classes.
("song-lyrics")
Okay, great. Now we're ready to add the CSS rule.
So we go back up to our `` tag,
and delete the id selector that we had before,
since we're replacing it.
And now we need to come up with our class selector.
Well, to start a class selector, we use a period, a dot.
Then we write the class name after it: song-lyrics,
and then just like always: curly-braces, property, colon, value.
Ta-da!
All of lyrics now have yellow backgrounds.
What would happen if we capitalize the s here?
It doesn't work.
Because class names are also case-sensitive.
It matters which letters are lowercase and uppercase,
just like with IDs.
What would happen if we used a hash sign instead of a period?
It doesn't work.
Because then the browser thinks that "song-lyrics" is an ID,
and when it can't find anything in the id attribute of song lyrics,
it gives up.
What would happen if we put spaces in our class names?
Well, that doesn't work either,
because classes can't have whitespace.
And as we'll find out later,
a space means something very specific in CSS land.
So, we'll just fix this back.
So, one more time:
When we want to add a class,
we come up with a class name,
and we add it to our class attribute in the HTML.
Then we write a style rule,
starting with a period and then the class name.
And now your CSS can be classy!