CSS Selecting by class

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!