WEBVTT

00:00:00.326 --> 00:00:02.079
Let's take a look at our webpage.

00:00:02.284 --> 00:00:04.540
It has these top headings,

00:00:04.540 --> 00:00:07.581
it has this paragraph 
describing rabbits,

00:00:07.581 --> 00:00:10.588
and now it actually has 
multiple paragraphs,

00:00:10.588 --> 00:00:13.416
with the lyrics to my favorite song 
about rabbits.

00:00:13.543 --> 00:00:17.554
Last time, we styled 
the first lyrics paragraph using the id.

00:00:17.857 --> 00:00:21.016
But now that I have 
multiple paragraphs of lyrics,

00:00:21.016 --> 00:00:24.083
I want them all to have that 
yellow background color.

00:00:24.613 --> 00:00:27.692
How could we do that 
using what we know so far?

00:00:28.221 --> 00:00:30.374
The first thing we learned how to do

00:00:30.374 --> 00:00:33.002
was to select all tags 
of a particular type,

00:00:33.002 --> 00:00:34.659
like with the `p` selector.

00:00:34.886 --> 00:00:39.120
But that colored all of the paragraphs, 
not just the paragraphs with lyrics.

00:00:39.226 --> 00:00:41.290
We need something more specific.

00:00:41.507 --> 00:00:44.898
Then we learned how to select 
tags with a particular id,

00:00:44.898 --> 00:00:48.140
like selecting the paragraph with the 
"rabbit-song" id.

00:00:48.368 --> 00:00:50.920
But that only selected 
the first paragraph.

00:00:51.120 --> 00:00:53.725
We can't add that id 
to the other paragraphs,

00:00:53.725 --> 00:00:57.657
because we're not allowed 
to use the same id on multiple tags.

00:00:57.867 --> 00:01:00.202
If we wanted to select 
the other paragraphs,

00:01:00.202 --> 00:01:02.881
we'd have to give each of them new IDs

00:01:02.881 --> 00:01:05.717
(like "song-lyrics2", 
and "song-lyrics3"),

00:01:05.717 --> 00:01:07.358
beacuse every ID must be unique.

00:01:07.358 --> 00:01:09.808
And then we'd have to add rules 
for each of them.

00:01:09.808 --> 00:01:12.398
We could do that. 
But, wow, that is a lot of work!

00:01:12.398 --> 00:01:14.691
And every time we added 
a new verse to the song,

00:01:14.691 --> 00:01:17.279
we'd have to remember to add 
another ID to the HTML,

00:01:17.279 --> 00:01:19.018
and another ID to the CSS rules,

00:01:19.018 --> 00:01:22.830
and if we added hundreds of verses, 
it would just be exhausting.

00:01:22.980 --> 00:01:24.315
Well, guess what?

00:01:24.492 --> 00:01:27.383
There is a better way, 
and it's called "classes".

00:01:27.599 --> 00:01:29.009
A class is basically: 


00:01:29.009 --> 00:01:32.067
a way of assigning a particular element 
to a group.

00:01:32.162 --> 00:01:35.150
And you can assign 
as many elements as you want to a group.

00:01:35.352 --> 00:01:39.928
To add a class, we need to add a 
class attribute, like we did with IDs.

00:01:40.362 --> 00:01:44.705
First I'll just delete this ID, 
since I'm going to replace it.

00:01:44.705 --> 00:01:47.915
Now I've got my cursor 
in the start `` tag.

00:01:47.915 --> 00:01:51.675
I'll add a space, and write: 
class = "

00:01:53.183 --> 00:01:55.333
Now we need to come up with 
a class name.

00:01:55.333 --> 00:01:56.792
A nice descriptive one.

00:01:56.927 --> 00:01:59.294
Let's call it, 
"song-lyrics".

00:01:59.658 --> 00:02:01.449
I've typed that in there.

00:02:01.665 --> 00:02:04.335
What other elements should have 
this class name?

00:02:04.416 --> 00:02:06.420
Well, all the other lyric paragraphs.

00:02:06.510 --> 00:02:09.154
So we'll just go down the page,

00:02:09.154 --> 00:02:12.777
and add the attribute to each of 
the paragraph classes.

00:02:13.061 --> 00:02:14.540
("song-lyrics")

00:02:14.836 --> 00:02:18.003
Okay, great. 
Now we're ready to add the CSS rule.

00:02:18.217 --> 00:02:20.539
So we go back up to our `` tag,

00:02:20.539 --> 00:02:24.574
and delete 
the id selector that we had before,

00:02:24.574 --> 00:02:25.772
since we're replacing it.

00:02:26.157 --> 00:02:28.594
And now we need to come up with 
our class selector.

00:02:28.931 --> 00:02:34.039
Well, to start a class selector, 
we use a period, a dot.

00:02:34.426 --> 00:02:39.027
Then we write the class name after it: 
song-lyrics,

00:02:39.027 --> 00:02:46.415
and then just like always: 
curly-braces, property, colon, value.

00:02:46.633 --> 00:02:47.575
Ta-da!

00:02:47.821 --> 00:02:51.007
All of lyrics now have 
yellow backgrounds.

00:02:51.343 --> 00:02:55.143
What would happen if we 
capitalize the s here?

00:02:55.240 --> 00:02:56.398
It doesn't work.

00:02:56.491 --> 00:02:58.950
Because class names 
are also case-sensitive.

00:02:58.966 --> 00:03:01.771
It matters which letters 
are lowercase and uppercase,

00:03:01.771 --> 00:03:03.558
just like with IDs.

00:03:04.323 --> 00:03:08.295
What would happen if we used 
a hash sign instead of a period?

00:03:08.542 --> 00:03:09.666
It doesn't work.

00:03:09.774 --> 00:03:13.085
Because then the browser thinks that 
"song-lyrics" is an ID,

00:03:13.085 --> 00:03:16.411
and when it can't find anything 
in the id attribute of song lyrics,

00:03:16.411 --> 00:03:17.584
it gives up.

00:03:18.102 --> 00:03:24.512
What would happen if we 
put spaces in our class names?

00:03:25.248 --> 00:03:27.477
Well, that doesn't work either,

00:03:27.477 --> 00:03:29.997
because classes can't have whitespace.

00:03:30.192 --> 00:03:31.649
And as we'll find out later,

00:03:31.649 --> 00:03:34.972
a space means 
something very specific in CSS land.

00:03:35.868 --> 00:03:38.776
So, we'll just fix this back.

00:03:39.523 --> 00:03:41.110
So, one more time:

00:03:41.110 --> 00:03:43.387
When we want to add a class,

00:03:43.387 --> 00:03:45.589
we come up with a class name,

00:03:45.589 --> 00:03:49.000
and we add it to our class attribute 
in the HTML.

00:03:49.248 --> 00:03:51.317
Then we write a style rule,

00:03:51.317 --> 00:03:54.691
starting with a period 
and then the class name.

00:03:55.216 --> 00:03:58.428
And now your CSS 
can be classy!