1 00:00:00,540 --> 00:00:02,010 Hello, everyone, and welcome back. 2 00:00:02,850 --> 00:00:05,910 In today's video, you learn about Soohoo elements. 3 00:00:07,400 --> 00:00:11,880 A element is used to status specific parts of a.T.M element. 4 00:00:13,300 --> 00:00:16,090 These are all the seedy elements in siestas. 5 00:00:17,230 --> 00:00:20,110 Let's start with the first one, which is FirstLine. 6 00:00:21,230 --> 00:00:25,780 So the first line to the element is used to silence to the first line of text. 7 00:00:26,450 --> 00:00:30,290 It works only for block elements like paragraph and heading dags. 8 00:00:31,010 --> 00:00:33,280 Let's try an example to understand it better. 9 00:00:33,880 --> 00:00:36,350 Tim, you've got this Web page. 10 00:00:36,710 --> 00:00:39,500 You've got these paragraphs and headings. 11 00:00:40,650 --> 00:00:45,920 Let's have you on the first line of each paragraph to have more letter spacing and a different phone 12 00:00:45,920 --> 00:00:46,130 color. 13 00:00:46,800 --> 00:00:47,600 So let's try that. 14 00:00:49,100 --> 00:00:50,640 Let's bring about quote it here. 15 00:00:56,740 --> 00:00:57,020 All right. 16 00:00:57,190 --> 00:00:58,010 So. 17 00:01:01,780 --> 00:01:04,430 I don't think we have a clause for the paragraphs. 18 00:01:05,680 --> 00:01:07,540 So let's try using selectors. 19 00:01:07,840 --> 00:01:14,170 So article all the paragraphs, which I did a change of articles like those. 20 00:01:15,800 --> 00:01:17,530 Let's give them about Onkalo first. 21 00:01:19,430 --> 00:01:21,750 Sorry, like coral. 22 00:01:23,200 --> 00:01:23,730 Let's save it. 23 00:01:24,880 --> 00:01:29,140 As you can see, all these photographs are Dellec children of these articles. 24 00:01:30,230 --> 00:01:37,400 Now, what we want is we want to use this pseudo everyman to select all the FirstLine talked about ruffs 25 00:01:37,430 --> 00:01:38,780 and give them some styling. 26 00:01:39,500 --> 00:01:46,160 So let's say the first line on what you wanted to do was you wanted to increase some lateral spacing. 27 00:01:46,730 --> 00:01:47,600 So that's that. 28 00:01:47,890 --> 00:01:48,290 See? 29 00:01:49,960 --> 00:01:50,770 Kubic says. 30 00:01:53,350 --> 00:01:55,010 And we also wanted to change the phone. 31 00:01:55,570 --> 00:01:56,710 So let's do that. 32 00:01:57,530 --> 00:02:01,570 Let's go to let's say, like the TV. 33 00:02:02,820 --> 00:02:08,440 As you could see, the first line is like green in color, all these selected paragraphs. 34 00:02:09,040 --> 00:02:10,060 And there is a bit more. 35 00:02:10,340 --> 00:02:11,270 Let us reason. 36 00:02:11,950 --> 00:02:12,210 All right. 37 00:02:12,370 --> 00:02:15,890 So let's wait a second to tell me which is first later. 38 00:02:16,510 --> 00:02:20,940 So as the name suggests, it is used to act status to the first letter of X. 39 00:02:21,750 --> 00:02:27,160 And even this element just works only for block elements like paragraph and heading Darden's. 40 00:02:27,880 --> 00:02:30,000 Let's try an example to understand it, too. 41 00:02:30,780 --> 00:02:31,010 All right. 42 00:02:31,150 --> 00:02:34,130 So that's just copy this comment. 43 00:02:34,730 --> 00:02:37,150 Is this here some sort of first line? 44 00:02:37,810 --> 00:02:38,370 Let's see first. 45 00:02:38,440 --> 00:02:43,300 Later on, let's increase the font size C. 46 00:02:44,470 --> 00:02:47,690 Thirty six pixels on, let's change the color do. 47 00:02:51,240 --> 00:02:54,780 Let's see if there's a like like we can just go with Guru. 48 00:02:55,260 --> 00:02:57,960 So let's say it was you can see. 49 00:02:59,260 --> 00:03:01,790 All these boats that just are starting. 50 00:03:01,840 --> 00:03:04,600 So they've got a bigger font size and the water doesn't go. 51 00:03:06,190 --> 00:03:09,110 No, if I uncommon this, I see. 52 00:03:10,150 --> 00:03:13,880 As you can see, both these sides are looking together. 53 00:03:15,020 --> 00:03:17,400 So we can use multiple Tsugaru elements on the scene. 54 00:03:18,480 --> 00:03:24,150 All right, so moving on to the third one, which is selection, so it is used to add science to the 55 00:03:24,150 --> 00:03:25,350 selected text. 56 00:03:25,770 --> 00:03:30,720 So when I select this text, as you can see right now, though, there's a highlight of this blue color 57 00:03:30,780 --> 00:03:32,190 on the form that it is like. 58 00:03:33,150 --> 00:03:35,670 So it is used to change this, these stadiums. 59 00:03:36,150 --> 00:03:37,420 So let's write an example. 60 00:03:37,480 --> 00:03:38,410 When the sun is better. 61 00:03:39,270 --> 00:03:40,920 So let's bingo barcoded do. 62 00:03:43,060 --> 00:03:50,470 So article all the paragraphs which are Varrick child of this paragraph that are pseudo element, which 63 00:03:50,470 --> 00:03:53,140 is selective selection. 64 00:03:53,180 --> 00:03:53,590 Sorry. 65 00:03:56,170 --> 00:03:59,220 Let's say a background color. 66 00:04:01,230 --> 00:04:06,530 Like go road and color us black. 67 00:04:07,280 --> 00:04:07,670 Let's say. 68 00:04:08,750 --> 00:04:10,400 Let's try selecting these elements. 69 00:04:10,610 --> 00:04:12,070 So now as you can see. 70 00:04:14,050 --> 00:04:19,510 All these elements, they're getting highlighted with this light blue color on the front, coteries 71 00:04:19,630 --> 00:04:21,640 black, except for this one. 72 00:04:22,510 --> 00:04:26,070 This is happening because the formula is already like a loop. 73 00:04:26,280 --> 00:04:29,750 Now, moving on to the next two SUDA elements, which are before and after. 74 00:04:30,250 --> 00:04:35,110 So these are used to add some extra content before and after the content of the extremist element. 75 00:04:36,480 --> 00:04:40,670 This extra content could be text, image or blank. 76 00:04:41,810 --> 00:04:44,010 Let's try an example to understand it better. 77 00:04:45,690 --> 00:04:47,280 Let's just call mental lisbona. 78 00:04:49,270 --> 00:04:51,590 So, again, let's select all these articles. 79 00:04:52,850 --> 00:04:57,020 All the photographs which eidetic child legislated before. 80 00:04:57,950 --> 00:04:58,700 What did you want? 81 00:05:00,910 --> 00:05:01,260 Good. 82 00:05:01,330 --> 00:05:09,790 Before all this text, so we can use this attribute contained inside double codes. 83 00:05:09,910 --> 00:05:12,560 We can just we were single, could achieve it. 84 00:05:13,250 --> 00:05:14,350 And as you can see. 85 00:05:16,120 --> 00:05:20,830 This paragraph has a good before it, similarly, all these paragraphs. 86 00:05:23,500 --> 00:05:30,100 Similarly, try adding something after the contents of a paragraph and let's say of the. 87 00:05:32,570 --> 00:05:35,960 So constant, double goads, and that's the single good. 88 00:05:37,180 --> 00:05:41,120 The, too, and now, as you can see, there's a signal called before and after. 89 00:05:41,720 --> 00:05:48,980 Also, let's give it a background color to all these so articles on all these paragraphs. 90 00:05:49,010 --> 00:05:50,780 Let's give them background color. 91 00:05:51,180 --> 00:05:52,750 So we like to go Gaudreau. 92 00:05:52,790 --> 00:05:54,040 Let's do it here. 93 00:05:54,490 --> 00:06:00,160 And now, as you can see, all these highlighted ones have this good in the beginning and at the end. 94 00:06:01,680 --> 00:06:05,930 Similarly, we got an image so of got this small image here. 95 00:06:08,760 --> 00:06:10,110 Let's put it back in a good. 96 00:06:11,560 --> 00:06:14,170 So to add an image, you can do something like this. 97 00:06:14,350 --> 00:06:15,370 So you have to use this. 98 00:06:15,380 --> 00:06:21,050 You are on the inside that just given that you are on the table. 99 00:06:22,290 --> 00:06:24,160 Let's do this late Google. 100 00:06:25,570 --> 00:06:26,430 Let's see, we. 101 00:06:29,830 --> 00:06:30,320 Save it. 102 00:06:31,300 --> 00:06:36,700 And as you can see, there is this small smiley hue before all these elements. 103 00:06:37,180 --> 00:06:40,270 Similarly, if I wanted to add this mighty afterwards as well. 104 00:06:40,300 --> 00:06:46,550 So I can simply use this, you are the method and bust the location as a barometer. 105 00:06:47,610 --> 00:06:50,570 Now, as you can see, we've got the same image at the end. 106 00:06:51,860 --> 00:06:53,270 There's just one thing to remember. 107 00:06:53,330 --> 00:06:57,150 So when you used image in before and after, you cannot change that within you. 108 00:06:58,160 --> 00:07:04,250 So just ensure that we're dealing with height, require the images of the same dimensions. 109 00:07:04,970 --> 00:07:07,370 Similarly, as I mentioned, this could be ended also. 110 00:07:07,760 --> 00:07:09,500 So let's just try that. 111 00:07:09,950 --> 00:07:10,530 Let's see. 112 00:07:10,620 --> 00:07:10,960 Indeed. 113 00:07:12,140 --> 00:07:13,090 Similarly, we're here. 114 00:07:13,370 --> 00:07:15,180 Empty the toilet. 115 00:07:16,100 --> 00:07:19,580 As you can see, there's nothing before and after these elements. 116 00:07:20,850 --> 00:07:21,840 That's all for today, guys. 117 00:07:21,930 --> 00:07:24,180 If there's something that you did not understand. 118 00:07:24,240 --> 00:07:26,640 Feel free to drop a comment and we will discuss it. 119 00:07:27,330 --> 00:07:29,560 See you in the next video by Undig.