0:00:00.326,0:00:02.079
Let's take a look at our webpage.

0:00:02.284,0:00:04.540
It has these top headings,

0:00:04.540,0:00:07.581
it has this paragraph [br]describing rabbits,

0:00:07.581,0:00:10.588
and now it actually has [br]multiple paragraphs,

0:00:10.588,0:00:13.416
with the lyrics to my favorite song [br]about rabbits.

0:00:13.543,0:00:17.554
Last time, we styled [br]the first lyrics paragraph using the id.

0:00:17.857,0:00:21.016
But now that I have [br]multiple paragraphs of lyrics,

0:00:21.016,0:00:24.083
I want them all to have that [br]yellow background color.

0:00:24.613,0:00:27.692
How could we do that [br]using what we know so far?

0:00:28.221,0:00:30.374
The first thing we learned how to do

0:00:30.374,0:00:33.002
was to select all tags [br]of a particular type,

0:00:33.002,0:00:34.659
like with the `p` selector.

0:00:34.886,0:00:39.120
But that colored all of the paragraphs, [br]not just the paragraphs with lyrics.

0:00:39.226,0:00:41.290
We need something more specific.

0:00:41.507,0:00:44.898
Then we learned how to select [br]tags with a particular id,

0:00:44.898,0:00:48.140
like selecting the paragraph with the [br]"rabbit-song" id.

0:00:48.368,0:00:50.920
But that only selected [br]the first paragraph.

0:00:51.120,0:00:53.725
We can't add that id [br]to the other paragraphs,

0:00:53.725,0:00:57.657
because we're not allowed [br]to use the same id on multiple tags.

0:00:57.867,0:01:00.202
If we wanted to select [br]the other paragraphs,

0:01:00.202,0:01:02.881
we'd have to give each of them new IDs

0:01:02.881,0:01:05.717
(like "song-lyrics2", [br]and "song-lyrics3"),

0:01:05.717,0:01:07.358
beacuse every ID must be unique.

0:01:07.358,0:01:09.808
And then we'd have to add rules [br]for each of them.

0:01:09.808,0:01:12.398
We could do that. [br]But, wow, that is a lot of work!

0:01:12.398,0:01:14.691
And every time we added [br]a new verse to the song,

0:01:14.691,0:01:17.279
we'd have to remember to add [br]another ID to the HTML,

0:01:17.279,0:01:19.018
and another ID to the CSS rules,

0:01:19.018,0:01:22.830
and if we added hundreds of verses, [br]it would just be exhausting.

0:01:22.980,0:01:24.315
Well, guess what?

0:01:24.492,0:01:27.383
There is a better way, [br]and it's called "classes".

0:01:27.599,0:01:29.009
A class is basically: [br]

0:01:29.009,0:01:32.067
a way of assigning a particular element [br]to a group.

0:01:32.162,0:01:35.150
And you can assign [br]as many elements as you want to a group.

0:01:35.352,0:01:39.928
To add a class, we need to add a [br]class attribute, like we did with IDs.

0:01:40.362,0:01:44.705
First I'll just delete this ID, [br]since I'm going to replace it.

0:01:44.705,0:01:47.915
Now I've got my cursor [br]in the start `` tag.

0:01:47.915,0:01:51.675
I'll add a space, and write: [br]class = "

0:01:53.183,0:01:55.333
Now we need to come up with [br]a class name.

0:01:55.333,0:01:56.792
A nice descriptive one.

0:01:56.927,0:01:59.294
Let's call it, [br]"song-lyrics".

0:01:59.658,0:02:01.449
I've typed that in there.

0:02:01.665,0:02:04.335
What other elements should have [br]this class name?

0:02:04.416,0:02:06.420
Well, all the other lyric paragraphs.

0:02:06.510,0:02:09.154
So we'll just go down the page,

0:02:09.154,0:02:12.777
and add the attribute to each of [br]the paragraph classes.

0:02:13.061,0:02:14.540
("song-lyrics")

0:02:14.836,0:02:18.003
Okay, great. [br]Now we're ready to add the CSS rule.

0:02:18.217,0:02:20.539
So we go back up to our `` tag,

0:02:20.539,0:02:24.574
and delete [br]the id selector that we had before,

0:02:24.574,0:02:25.772
since we're replacing it.

0:02:26.157,0:02:28.594
And now we need to come up with [br]our class selector.

0:02:28.931,0:02:34.039
Well, to start a class selector, [br]we use a period, a dot.

0:02:34.426,0:02:39.027
Then we write the class name after it: [br]song-lyrics,

0:02:39.027,0:02:46.415
and then just like always: [br]curly-braces, property, colon, value.

0:02:46.633,0:02:47.575
Ta-da!

0:02:47.821,0:02:51.007
All of lyrics now have [br]yellow backgrounds.

0:02:51.343,0:02:55.143
What would happen if we [br]capitalize the s here?

0:02:55.240,0:02:56.398
It doesn't work.

0:02:56.491,0:02:58.950
Because class names [br]are also case-sensitive.

0:02:58.966,0:03:01.771
It matters which letters [br]are lowercase and uppercase,

0:03:01.771,0:03:03.558
just like with IDs.

0:03:04.323,0:03:08.295
What would happen if we used [br]a hash sign instead of a period?

0:03:08.542,0:03:09.666
It doesn't work.

0:03:09.774,0:03:13.085
Because then the browser thinks that [br]"song-lyrics" is an ID,

0:03:13.085,0:03:16.411
and when it can't find anything [br]in the id attribute of song lyrics,

0:03:16.411,0:03:17.584
it gives up.

0:03:18.102,0:03:24.512
What would happen if we [br]put spaces in our class names?

0:03:25.248,0:03:27.477
Well, that doesn't work either,

0:03:27.477,0:03:29.997
because classes can't have whitespace.

0:03:30.192,0:03:31.649
And as we'll find out later,

0:03:31.649,0:03:34.972
a space means [br]something very specific in CSS land.

0:03:35.868,0:03:38.776
So, we'll just fix this back.

0:03:39.523,0:03:41.110
So, one more time:

0:03:41.110,0:03:43.387
When we want to add a class,

0:03:43.387,0:03:45.589
we come up with a class name,

0:03:45.589,0:03:49.000
and we add it to our class attribute [br]in the HTML.

0:03:49.248,0:03:51.317
Then we write a style rule,

0:03:51.317,0:03:54.691
starting with a period [br]and then the class name.

0:03:55.216,0:03:58.428
And now your CSS [br]can be classy!