[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:02.08,Default,,0000,0000,0000,,Let's take a look at our webpage.
Dialogue: 0,0:00:02.28,0:00:04.54,Default,,0000,0000,0000,,It has these top headings,
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,it has this paragraph \Ndescribing rabbits,
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,and now it actually has \Nmultiple paragraphs,
Dialogue: 0,0:00:10.59,0:00:13.42,Default,,0000,0000,0000,,with the lyrics to my favorite song \Nabout rabbits.
Dialogue: 0,0:00:13.54,0:00:17.55,Default,,0000,0000,0000,,Last time, we styled \Nthe first lyrics paragraph using the id.
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,But now that I have \Nmultiple paragraphs of lyrics,
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,I want them all to have that \Nyellow background color.
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,How could we do that \Nusing what we know so far?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,The first thing we learned how to do
Dialogue: 0,0:00:30.37,0:00:33.00,Default,,0000,0000,0000,,was to select all tags \Nof a particular type,
Dialogue: 0,0:00:33.00,0:00:34.66,Default,,0000,0000,0000,,like with the `p` selector.
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,But that colored all of the paragraphs, \Nnot just the paragraphs with lyrics.
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,We need something more specific.
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,Then we learned how to select \Ntags with a particular id,
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,like selecting the paragraph with the \N"rabbit-song" id.
Dialogue: 0,0:00:48.37,0:00:50.92,Default,,0000,0000,0000,,But that only selected \Nthe first paragraph.
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,We can't add that id \Nto the other paragraphs,
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,because we're not allowed \Nto use the same id on multiple tags.
Dialogue: 0,0:00:57.87,0:01:00.20,Default,,0000,0000,0000,,If we wanted to select \Nthe other paragraphs,
Dialogue: 0,0:01:00.20,0:01:02.88,Default,,0000,0000,0000,,we'd have to give each of them new IDs
Dialogue: 0,0:01:02.88,0:01:05.72,Default,,0000,0000,0000,,(like "song-lyrics2", \Nand "song-lyrics3"),
Dialogue: 0,0:01:05.72,0:01:07.36,Default,,0000,0000,0000,,beacuse every ID must be unique.
Dialogue: 0,0:01:07.36,0:01:09.81,Default,,0000,0000,0000,,And then we'd have to add rules \Nfor each of them.
Dialogue: 0,0:01:09.81,0:01:12.40,Default,,0000,0000,0000,,We could do that. \NBut, wow, that is a lot of work!
Dialogue: 0,0:01:12.40,0:01:14.69,Default,,0000,0000,0000,,And every time we added \Na new verse to the song,
Dialogue: 0,0:01:14.69,0:01:17.28,Default,,0000,0000,0000,,we'd have to remember to add \Nanother ID to the HTML,
Dialogue: 0,0:01:17.28,0:01:19.02,Default,,0000,0000,0000,,and another ID to the CSS rules,
Dialogue: 0,0:01:19.02,0:01:22.83,Default,,0000,0000,0000,,and if we added hundreds of verses, \Nit would just be exhausting.
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,Well, guess what?
Dialogue: 0,0:01:24.49,0:01:27.38,Default,,0000,0000,0000,,There is a better way, \Nand it's called "classes".
Dialogue: 0,0:01:27.60,0:01:29.01,Default,,0000,0000,0000,,A class is basically: \N
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,a way of assigning a particular element \Nto a group.
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,And you can assign \Nas many elements as you want to a group.
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,To add a class, we need to add a \Nclass attribute, like we did with IDs.
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,First I'll just delete this ID, \Nsince I'm going to replace it.
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,Now I've got my cursor \Nin the start `` tag.
Dialogue: 0,0:01:47.92,0:01:51.68,Default,,0000,0000,0000,,I'll add a space, and write: \Nclass = "
Dialogue: 0,0:01:53.18,0:01:55.33,Default,,0000,0000,0000,,Now we need to come up with \Na class name.
Dialogue: 0,0:01:55.33,0:01:56.79,Default,,0000,0000,0000,,A nice descriptive one.
Dialogue: 0,0:01:56.93,0:01:59.29,Default,,0000,0000,0000,,Let's call it, \N"song-lyrics".
Dialogue: 0,0:01:59.66,0:02:01.45,Default,,0000,0000,0000,,I've typed that in there.
Dialogue: 0,0:02:01.66,0:02:04.34,Default,,0000,0000,0000,,What other elements should have \Nthis class name?
Dialogue: 0,0:02:04.42,0:02:06.42,Default,,0000,0000,0000,,Well, all the other lyric paragraphs.
Dialogue: 0,0:02:06.51,0:02:09.15,Default,,0000,0000,0000,,So we'll just go down the page,
Dialogue: 0,0:02:09.15,0:02:12.78,Default,,0000,0000,0000,,and add the attribute to each of \Nthe paragraph classes.
Dialogue: 0,0:02:13.06,0:02:14.54,Default,,0000,0000,0000,,("song-lyrics")
Dialogue: 0,0:02:14.84,0:02:18.00,Default,,0000,0000,0000,,Okay, great. \NNow we're ready to add the CSS rule.
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,So we go back up to our `` tag,
Dialogue: 0,0:02:20.54,0:02:24.57,Default,,0000,0000,0000,,and delete \Nthe id selector that we had before,
Dialogue: 0,0:02:24.57,0:02:25.77,Default,,0000,0000,0000,,since we're replacing it.
Dialogue: 0,0:02:26.16,0:02:28.59,Default,,0000,0000,0000,,And now we need to come up with \Nour class selector.
Dialogue: 0,0:02:28.93,0:02:34.04,Default,,0000,0000,0000,,Well, to start a class selector, \Nwe use a period, a dot.
Dialogue: 0,0:02:34.43,0:02:39.03,Default,,0000,0000,0000,,Then we write the class name after it: \Nsong-lyrics,
Dialogue: 0,0:02:39.03,0:02:46.42,Default,,0000,0000,0000,,and then just like always: \Ncurly-braces, property, colon, value.
Dialogue: 0,0:02:46.63,0:02:47.58,Default,,0000,0000,0000,,Ta-da!
Dialogue: 0,0:02:47.82,0:02:51.01,Default,,0000,0000,0000,,All of lyrics now have \Nyellow backgrounds.
Dialogue: 0,0:02:51.34,0:02:55.14,Default,,0000,0000,0000,,What would happen if we \Ncapitalize the s here?
Dialogue: 0,0:02:55.24,0:02:56.40,Default,,0000,0000,0000,,It doesn't work.
Dialogue: 0,0:02:56.49,0:02:58.95,Default,,0000,0000,0000,,Because class names \Nare also case-sensitive.
Dialogue: 0,0:02:58.97,0:03:01.77,Default,,0000,0000,0000,,It matters which letters \Nare lowercase and uppercase,
Dialogue: 0,0:03:01.77,0:03:03.56,Default,,0000,0000,0000,,just like with IDs.
Dialogue: 0,0:03:04.32,0:03:08.30,Default,,0000,0000,0000,,What would happen if we used \Na hash sign instead of a period?
Dialogue: 0,0:03:08.54,0:03:09.67,Default,,0000,0000,0000,,It doesn't work.
Dialogue: 0,0:03:09.77,0:03:13.08,Default,,0000,0000,0000,,Because then the browser thinks that \N"song-lyrics" is an ID,
Dialogue: 0,0:03:13.08,0:03:16.41,Default,,0000,0000,0000,,and when it can't find anything \Nin the id attribute of song lyrics,
Dialogue: 0,0:03:16.41,0:03:17.58,Default,,0000,0000,0000,,it gives up.
Dialogue: 0,0:03:18.10,0:03:24.51,Default,,0000,0000,0000,,What would happen if we \Nput spaces in our class names?
Dialogue: 0,0:03:25.25,0:03:27.48,Default,,0000,0000,0000,,Well, that doesn't work either,
Dialogue: 0,0:03:27.48,0:03:29.100,Default,,0000,0000,0000,,because classes can't have whitespace.
Dialogue: 0,0:03:30.19,0:03:31.65,Default,,0000,0000,0000,,And as we'll find out later,
Dialogue: 0,0:03:31.65,0:03:34.97,Default,,0000,0000,0000,,a space means \Nsomething very specific in CSS land.
Dialogue: 0,0:03:35.87,0:03:38.78,Default,,0000,0000,0000,,So, we'll just fix this back.
Dialogue: 0,0:03:39.52,0:03:41.11,Default,,0000,0000,0000,,So, one more time:
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,When we want to add a class,
Dialogue: 0,0:03:43.39,0:03:45.59,Default,,0000,0000,0000,,we come up with a class name,
Dialogue: 0,0:03:45.59,0:03:49.00,Default,,0000,0000,0000,,and we add it to our class attribute \Nin the HTML.
Dialogue: 0,0:03:49.25,0:03:51.32,Default,,0000,0000,0000,,Then we write a style rule,
Dialogue: 0,0:03:51.32,0:03:54.69,Default,,0000,0000,0000,,starting with a period \Nand then the class name.
Dialogue: 0,0:03:55.22,0:03:58.43,Default,,0000,0000,0000,,And now your CSS \Ncan be classy!