Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,847 --> 00:00:03,701 line:15% Now that we're familiar with colors, 2 2 00:00:03,701 --> 00:00:06,886 line:15% we are going to talk about two new selectors, 3 3 00:00:06,886 --> 00:00:08,219 line:15% classes and IDs. 4 4 00:00:10,427 --> 00:00:15,294 In the last lecture, we used H1, H2, P, and buddy selectors, 5 5 00:00:15,294 --> 00:00:18,986 to select the corresponding HTML elements. 6 6 00:00:18,986 --> 00:00:22,398 But now, suppose you wanted to style only one 7 7 00:00:22,398 --> 00:00:25,046 of the paragraphs, not all of them. 8 8 00:00:25,046 --> 00:00:27,963 That's why we have classes and IDs. 9 9 00:00:29,202 --> 00:00:32,826 We can attribute class or ID names to elements 10 10 00:00:32,826 --> 00:00:36,470 and then use these classes or IDs to select them 11 11 00:00:36,470 --> 00:00:38,606 in the CSS code. 12 12 00:00:38,606 --> 00:00:40,357 So let's do that. 13 13 00:00:40,357 --> 00:00:44,237 First, I need to tell you that the same class can 14 14 00:00:44,237 --> 00:00:47,649 be attributed to as many elements as you like, 15 15 00:00:47,649 --> 00:00:51,816 while an ID can be used only once inside each HTML document. 16 16 00:00:54,037 --> 00:00:56,787 So let's see what we can do here. 17 17 00:00:57,868 --> 00:01:02,035 So, we have three paragraph elements, if you remember. 18 18 00:01:03,787 --> 00:01:07,943 It's this paragraph, this paragraph here, and also 19 19 00:01:07,943 --> 00:01:11,543 the author name is also a paragraph. 20 20 00:01:11,543 --> 00:01:15,559 So now let's say we want the author paragraph to be bigger 21 21 00:01:15,559 --> 00:01:17,142 than the main text. 22 22 00:01:19,439 --> 00:01:22,875 So we have two text paragraphs, and we can use classes 23 23 00:01:22,875 --> 00:01:23,708 for that. 24 24 00:01:23,708 --> 00:01:27,041 So let's go back to our index HTML file. 25 25 00:01:30,789 --> 00:01:32,122 Just close this. 26 26 00:01:36,040 --> 00:01:40,123 And so, here in the P tag, just add class, class, 27 27 00:01:43,772 --> 00:01:46,072 and then choose a name. 28 28 00:01:46,072 --> 00:01:48,348 It can be anything. 29 29 00:01:48,348 --> 00:01:50,765 I will call this "main text". 30 30 00:01:53,340 --> 00:01:56,660 And then, the same thing with the second paragraph. 31 31 00:01:56,660 --> 00:01:59,327 This is also "main text," right? 32 32 00:02:02,420 --> 00:02:03,753 So, "main text." 33 33 00:02:05,880 --> 00:02:10,312 Now, there's only one paragraph for the author name, 34 34 00:02:10,312 --> 00:02:12,395 so we can use an ID here. 35 35 00:02:14,724 --> 00:02:18,891 So it's just, as you can imagine, "ID", and I will call it 36 36 00:02:20,856 --> 00:02:22,106 "author texts". 37 37 00:02:27,080 --> 00:02:30,888 And now, let's go back to our CSS file. 38 38 00:02:30,888 --> 00:02:35,055 And here, down here, we can now add the new selectors. 39 39 00:02:36,344 --> 00:02:39,804 So, style the paragraphs with the "main text" class. 40 40 00:02:39,804 --> 00:02:40,971 We'll add dot, 41 41 00:02:42,904 --> 00:02:43,737 main text. 42 42 00:02:48,247 --> 00:02:51,948 And you see, on the right page, with the live connection, 43 43 00:02:51,948 --> 00:02:56,128 two brackets, that there's a blue square around 44 44 00:02:56,128 --> 00:02:59,192 this paragraph, and the other one too, 45 45 00:02:59,192 --> 00:03:02,560 but not the author paragraph, which means that we 46 46 00:03:02,560 --> 00:03:04,893 selected these two elements. 47 47 00:03:07,983 --> 00:03:12,646 What I can do here is to say that we want these paragraphs 48 48 00:03:12,646 --> 00:03:15,229 to have a justified text align. 49 49 00:03:16,894 --> 00:03:18,644 Text, align, justify. 50 50 00:03:23,773 --> 00:03:27,856 And now, down here, we have the author paragraph, 51 51 00:03:28,789 --> 00:03:31,456 if you remember, and it's an ID. 52 52 00:03:33,938 --> 00:03:38,467 And to select that ID, we use the hash symbol and say, 53 53 00:03:38,467 --> 00:03:39,300 "author 54 54 00:03:41,439 --> 00:03:42,272 text." 55 55 00:03:46,233 --> 00:03:50,393 All right, and as we said, we want this to have a larger 56 56 00:03:50,393 --> 00:03:53,143 font size, like 22 pixels, maybe. 57 57 00:03:55,245 --> 00:03:59,412 Font size, we'll set it to 22 pixels, and you see, 58 58 00:04:00,493 --> 00:04:04,660 it's bigger now, and, yeah, 22 pixels looks just right. 59 59 00:04:09,586 --> 00:04:11,169 So, nice, it works. 60 60 00:04:12,450 --> 00:04:14,702 We actually don't need this one anymore, 61 61 00:04:14,702 --> 00:04:18,090 it's kind of redundant, because, in this rule, 62 62 00:04:18,090 --> 00:04:21,690 I already said that I want these two paragraphs 63 63 00:04:21,690 --> 00:04:25,314 to be justified, and since this one doesn't need 64 64 00:04:25,314 --> 00:04:28,866 to be justified, I can just delete this, 65 65 00:04:28,866 --> 00:04:30,866 and nothing will happen. 66 66 00:04:31,882 --> 00:04:34,486 Let's clear some lines, save it, 67 67 00:04:34,486 --> 00:04:36,236 never forget to save. 68 68 00:04:37,416 --> 00:04:41,035 And yeah, I think that's it for the coding. 69 69 00:04:41,035 --> 00:04:45,003 Now using IDs is actually not a good practice, 70 70 00:04:45,003 --> 00:04:47,327 because, I said, they can only be used once. 71 71 00:04:47,327 --> 00:04:51,643 So, usually, we use classes for all our styling, 72 72 00:04:51,643 --> 00:04:55,291 even if we have only one class with a specific name, 73 73 00:04:55,291 --> 00:04:58,495 because we will never know what will happen to our code 74 74 00:04:58,495 --> 00:04:59,662 down the road. 75 75 00:05:01,071 --> 00:05:05,238 So let's just quickly change from ID to class right here 76 76 00:05:06,643 --> 00:05:08,131 first. 77 77 00:05:08,131 --> 00:05:12,298 I want this to be a class, and then I will also change it 78 78 00:05:14,283 --> 00:05:18,450 in the CSS, and now it's back to normal as we want it. 79 79 00:05:21,014 --> 00:05:21,923 Great! 80 80 00:05:21,923 --> 00:05:24,479 This was an important lecture because we'll be using 81 81 00:05:24,479 --> 00:05:26,823 classes all the time. 82 82 00:05:26,823 --> 00:05:30,119 Next up, I will teach you another very important 83 83 00:05:30,119 --> 00:05:31,651 thing in CSS: 84 84 00:05:31,651 --> 00:05:33,535 the so-called Vox Model. 85 85 00:05:33,535 --> 00:05:34,702 See you there. 7166