1 00:00:00,000 --> 00:00:05,750 Hello again. 2 00:00:05,750 --> 00:00:14,450 We already saw the HTML selectors that are used to represent texts like paragraphs, 3 00:00:14,450 --> 00:00:17,050 and everything's like you saw previously. 4 00:00:17,050 --> 00:00:25,350 But you can also define your own selectors using classes and I d selectors. 5 00:00:25,350 --> 00:00:34,720 The benefits of using classes and I DS is that you can have the same HTML element but 6 00:00:34,720 --> 00:00:40,450 present it differently depending on his class or I D. 7 00:00:40,450 --> 00:00:48,970 So I can have more than one paragraph in a page that can have different styles because they 8 00:00:48,970 --> 00:00:54,870 use different classes or ID's in the CSS. 9 00:00:54,870 --> 00:01:02,750 A class selector is the name preceded by a dot and an I. 10 00:01:02,750 --> 00:01:09,050 D selector is a name preceded by a Nash character, 11 00:01:09,050 --> 00:01:19,320 now more in detail and starting with glasses like I said can be used when you want 12 00:01:19,320 --> 00:01:22,290 different styles of a particular element. 13 00:01:22,290 --> 00:01:25,080 For this example, 14 00:01:25,080 --> 00:01:28,270 I have two paragraphs and then adding, 15 00:01:28,270 --> 00:01:32,690 and I want to style two paragraphs using different text, 16 00:01:32,690 --> 00:01:35,160 color and font sizes. 17 00:01:35,160 --> 00:01:45,750 First paragraph with front size 20 pixels and color blue and second pair riff farting 18 00:01:45,750 --> 00:01:48,050 pixels and color brown. 19 00:01:48,050 --> 00:01:51,860 Within our HTML cold. 20 00:01:51,860 --> 00:02:00,060 We assign a particular class by using the class attributes within our tech for the 21 00:02:00,060 --> 00:02:00,930 situation. 22 00:02:00,930 --> 00:02:05,390 I need to different classes because I want different styles. 23 00:02:05,390 --> 00:02:11,320 Defining first paragraph with name first and second with name. 24 00:02:11,320 --> 00:02:17,830 Second when I defined these two classes in CSS, 25 00:02:17,830 --> 00:02:25,980 always starting with that followed bike Last name I use for class first, 26 00:02:25,980 --> 00:02:38,800 front size with value 20 pixels and color blue and for my class seconds the same properties 27 00:02:38,800 --> 00:02:39,450 front size, 28 00:02:39,450 --> 00:02:45,000 but now with value 14 pixels and color with value brown, 29 00:02:45,000 --> 00:02:52,300 you can distinguish now these different styles in the browser. 30 00:02:52,300 --> 00:02:53,500 As you can see. 31 00:02:53,500 --> 00:03:03,520 Other thing I can make that is a little bit different is affect all elements that I want 32 00:03:03,520 --> 00:03:04,980 with the same style. 33 00:03:04,980 --> 00:03:08,030 For this example, 34 00:03:08,030 --> 00:03:14,130 I just want to have the same style used for first paragraph in my having element, 35 00:03:14,130 --> 00:03:21,860 joining the adding with class first using coma to separate the two texts. 36 00:03:21,860 --> 00:03:26,150 And now the style is similar to both elements. 37 00:03:26,150 --> 00:03:34,810 So the great advantage of using classes is that I can reuse the same styles in multiple 38 00:03:34,810 --> 00:03:36,060 elements. 39 00:03:36,060 --> 00:03:55,390 Next step is I D selectors Debt in CSS allow you to target elements by their I D values. 40 00:03:55,390 --> 00:03:59,620 The big difference when compared with classes, 41 00:03:59,620 --> 00:04:01,540 is that I the selectors, 42 00:04:01,540 --> 00:04:02,680 are unique. 43 00:04:02,680 --> 00:04:07,900 So you can apply on Lee to the content off one element. 44 00:04:07,900 --> 00:04:12,390 If you remember in HTML, 45 00:04:12,390 --> 00:04:19,250 I d can be used to create an anchor tooling to a specific part off the page. 46 00:04:19,250 --> 00:04:23,280 And if you include Martin when I d. 47 00:04:23,280 --> 00:04:29,250 The browser will not know where to go when you make reference to the i D. 48 00:04:29,250 --> 00:04:35,770 Because that I d is used in different parts off the HTML document. 49 00:04:35,770 --> 00:04:44,690 That's what you see in the file own dot html that I create previously, 50 00:04:44,690 --> 00:04:53,110 where I have an anchor defined that makes that stoppage link jumped to the element that as 51 00:04:53,110 --> 00:04:58,870 the i d back top that is my adding one element. 52 00:04:58,870 --> 00:05:03,290 If you have more than one element with these I d. 53 00:05:03,290 --> 00:05:04,870 Name the browser, 54 00:05:04,870 --> 00:05:06,690 don't know where to go. 55 00:05:06,690 --> 00:05:14,660 This is a simple example to understand why I d is only used one time we'd same value. 56 00:05:14,660 --> 00:05:20,820 So using the previous example used in glasses, 57 00:05:20,820 --> 00:05:24,570 I change now class to I D. 58 00:05:24,570 --> 00:05:33,530 And where I defined the styles instead of use a point before die. 59 00:05:33,530 --> 00:05:42,220 The name I used the hash tech for this first situation. 60 00:05:42,220 --> 00:05:46,070 I don't change the style for my adding element. 61 00:05:46,070 --> 00:05:50,130 As expected, 62 00:05:50,130 --> 00:05:50,770 the final. 63 00:05:50,770 --> 00:05:57,060 I'll put a similar like when I used glasses applying different styles to the paragraphs. 64 00:05:57,060 --> 00:06:04,830 If now I want to change the style for the ending to be similar with first paragraph, 65 00:06:04,830 --> 00:06:08,330 you cannot use I d selector because, 66 00:06:08,330 --> 00:06:09,230 like I said, 67 00:06:09,230 --> 00:06:14,510 you cannot use a mighty in different elements in your documents. 68 00:06:14,510 --> 00:06:24,640 So the better way is to use a class to effect paragraph and adding, 69 00:06:24,640 --> 00:06:32,100 We'd same style like ideas before thanks.