1 00:00:01,470 --> 00:00:08,400 Well, another way of selecting an element is what you call the class selector. 2 00:00:08,460 --> 00:00:15,420 So CSS class selectors are used to select elements based on their class attributes. 3 00:00:15,690 --> 00:00:20,820 And class selectors are ready in using a period for by the class name. 4 00:00:21,090 --> 00:00:27,240 And we can select multiple elements with different class names, and then we can separate them with 5 00:00:27,240 --> 00:00:27,860 space. 6 00:00:27,870 --> 00:00:29,910 So let me show you how we can do that. 7 00:00:30,030 --> 00:00:32,100 Well, with the same. 8 00:00:32,910 --> 00:00:37,560 Polizzi because I want to keep track of everything I'm teaching here. 9 00:00:37,590 --> 00:00:44,700 I want to copy the whole of this project again, and I want to rename it to say I want to rename this 10 00:00:44,700 --> 00:00:47,370 one to say class selector. 11 00:00:47,400 --> 00:00:50,300 The first one is called the element selector. 12 00:00:50,310 --> 00:00:57,320 So rename this one to lesson number two and a select test and a simple select test called Class Selectors. 13 00:00:57,330 --> 00:00:59,540 So I need to open this one instead. 14 00:00:59,550 --> 00:01:02,070 So right click open seven. 15 00:01:02,130 --> 00:01:03,750 So I think it has a pin here. 16 00:01:03,750 --> 00:01:05,640 So let me put it here. 17 00:01:05,880 --> 00:01:13,410 And now I want to change the name to say class selector. 18 00:01:13,620 --> 00:01:15,120 Yes, that's shown here. 19 00:01:15,120 --> 00:01:15,810 Perfect. 20 00:01:15,810 --> 00:01:18,030 So and then let me remove this. 21 00:01:18,030 --> 00:01:18,480 Yes. 22 00:01:18,480 --> 00:01:22,410 Also, because we want to start from scratch because it is elements selector. 23 00:01:22,410 --> 00:01:27,390 So remove that and change this one to class selector. 24 00:01:27,390 --> 00:01:34,860 So how can we style using the class selector and that is what we are going to talk about. 25 00:01:35,340 --> 00:01:37,110 Well, it's pretty simple. 26 00:01:37,620 --> 00:01:47,460 So what it means is that the element name that we want to style, we want to give it a class attribute. 27 00:01:47,670 --> 00:01:55,050 So let's say that this same how to learn CSS, how to style it using a class attribute. 28 00:01:55,050 --> 00:02:03,150 So inside the opening tag, I want to provide a class attribute like that and I will give it a value. 29 00:02:03,180 --> 00:02:07,350 The value would be anything the way I want to name my value. 30 00:02:07,380 --> 00:02:08,850 Okay, so let me see. 31 00:02:08,850 --> 00:02:10,199 This one is going to title. 32 00:02:10,770 --> 00:02:15,570 So this title represent this particular tag here. 33 00:02:16,330 --> 00:02:20,740 So now inside my case, how can I style it? 34 00:02:21,040 --> 00:02:29,500 So the key note here to bear in mind is that to style a class selector, you need to use period not 35 00:02:29,500 --> 00:02:36,100 as dot and the name of the class theme title and then your K basis as before. 36 00:02:36,100 --> 00:02:40,840 And next is you can write any you can write your CSS inside. 37 00:02:41,020 --> 00:02:47,650 So here I have my class code title and I'm selecting it using period the title. 38 00:02:47,650 --> 00:02:53,410 So the same thing colour is equal to red as before. 39 00:02:53,440 --> 00:02:55,390 Now I have red. 40 00:02:55,690 --> 00:03:00,600 I can also add a class to this one tutorial. 41 00:03:00,640 --> 00:03:04,720 So class, let's give this one RS description. 42 00:03:04,720 --> 00:03:07,540 The SC for short for description. 43 00:03:07,540 --> 00:03:09,010 So how can I select it? 44 00:03:09,010 --> 00:03:20,440 Use Dot DSC and then give it a background colour as before as black and then text on it. 45 00:03:20,650 --> 00:03:30,590 The text on it is going to colour is going to be white and then have a pattern around my water wouldn't 46 00:03:30,610 --> 00:03:34,240 be as ten pixels when I save it as before. 47 00:03:34,480 --> 00:03:43,870 So you can post this video and add custom class name to it and style it for this video and then try 48 00:03:43,870 --> 00:03:44,650 your luck. 49 00:03:44,860 --> 00:03:45,490 All right. 50 00:03:46,340 --> 00:03:49,130 Well, let me solve it or let's solve it together. 51 00:03:49,160 --> 00:03:50,860 If you get it, that is fine. 52 00:03:50,870 --> 00:03:59,150 So here on my I can give it a class of say description to the name. 53 00:03:59,150 --> 00:03:59,810 Must be discreet. 54 00:03:59,810 --> 00:04:02,310 Let me say details. 55 00:04:02,330 --> 00:04:02,990 Anything. 56 00:04:02,990 --> 00:04:06,530 Anything you want to give it by the class must be descriptive. 57 00:04:06,650 --> 00:04:10,430 So let's say details here or come up here, Dot. 58 00:04:11,360 --> 00:04:12,530 Details here. 59 00:04:14,630 --> 00:04:25,670 And then my carry is background color of green as before, and then the color on it also white and then 60 00:04:25,670 --> 00:04:29,360 putting as before eyes ten paychecks. 61 00:04:30,470 --> 00:04:31,710 See that I have it. 62 00:04:31,730 --> 00:04:37,530 But let's see that if you are trying to target a class that doesn't exist in your code. 63 00:04:37,550 --> 00:04:39,650 Now, this is details, right? 64 00:04:39,890 --> 00:04:44,450 You mean I change this one to dates something like this? 65 00:04:44,450 --> 00:04:45,140 You see that? 66 00:04:45,260 --> 00:04:46,460 It doesn't affect that. 67 00:04:46,460 --> 00:04:49,850 So you need to know about how you are selecting your element. 68 00:04:49,850 --> 00:04:54,710 And your naming convention is really, really crucial so that we have to. 69 00:04:54,770 --> 00:05:01,580 Now we've got two ways of selecting an element that is the element selector as before this one and now 70 00:05:01,580 --> 00:05:04,580 class selector the next video. 71 00:05:04,700 --> 00:05:10,190 Let's have a look at another way of selecting an element which is called.