Advanced CSS: Units, variables, Functions, Selector

1. Introduction: I know you are familiar with CSS unit. You are familiar with Pixel Parson DEM Val. But did you familiar with femin Vmax, VH W unit? Do you know how we can use CSS variable in our projects? Are you interested to learn how we can use calf function? And are you interested to learn some other CSS function, minimum function, maximum function, clam function? Do you want to work with very advanced CSS selectors like simple selector, combinator selector, attribute selector, posi Do class and Posido element selectors? Then this course is for you. Hello. My name is John T Shokar. I'm full stack web developer and online instructor. Welcome to my course, Advanced CSS. This is one of the most advanced course in CSS. If you want to enhance your CSS skill, then this course is for. 2. CSS Units Tutorial Part 1: Hello, guys. Good to see you back. This is the first tutorial related advanced CSS, and we're going to start with CSS measurement unit. If you want to assign within height to an object, then you should know how many type of units we have in CS. Here, you can see a list of units that we are going to learn in this tutorial, Pixel percentisEM, REM, viewpoard with et cetera. I know you are already familiar with some units like pixel, percentisEM. Most of the cases we use pixel and percentis. So without these, we have some other most useful units. In this tutorial, we divide units in two parts. First one is absolute units, and second one is relative units. This is the list of absolute unit, centimeter, millimeter, inches, pixel, points, et cetera. Absolute units are fixed units, and most of the time we use pixel unit. It is very popular. It is very popular in CSS. Without that, we have relative units. Tse relative units are depend on other parent objects. EM, REM, VH percents, these are all very popular relative units. So one by one, I'm going to try to explore all of the unit in this tutorial. So let's start the practical. As you can see, side by side, I open my Visual Studio code editor and my browser using live server extension, and I already created an ETL document named index dot HTML. And in this ETL document, inside the body tag, we have a heading tag, and here at t CSS units. Then inside the body tag, we have a deep tag with ID name box. Then I style this body section. First, I assign a font family Area Helvetica. And also I style this box using its ID name. First, I provide a border, a solid border with two pixel. Then I provide a background color. Also, I provide width and height. With 600 pixel and height, 300 pixel. Here we use absolute Unit, and pixel is a fixed absolute unit. Now the question is what that mean? What is the meaning of fixed? If I reduce the browser width, as you can see, our shape doesn't change according to browser week. You can see the scroll bar below the browser. If I move this scroll bar right side, you can see the complete rectangle shape. It is a fixed unit, so it's not going to change the height and weight according to the browser height and wi. That's why we call it absolute unit. So let's get to the previous position of this browser. And now I'm going to use a relative value. So I'm going to use percentage value. So Hemo type 100% with 100%. And I'm going to set this file. Up to set this file, as you can see, here you can see our box take 100% width of this browser. If I extend the browser size, as you can see, according to the browser width, it increases the width. Similarly, if I reduce the browser width, now you can see, it's also reduce the box width according to the browser. It's means it's going to take 100% of browser with. Similarly, if I pass 50% here, and then this file, now you can see it take 50% of browser wing. So this is the example of relative unit. This kind of value depend on paren Die element, otherwise, Window. A the question is how it's work with paren D. Let me show you an example. So inside this box, I'm going to take another DV element, DV and also I'm going to assign an ID, ID box. And I want to move our old box deep inside this deep, so I'm going to change this deep ID name box one. Now, box one is our parent deep and box is child deep. So to style this deep. So copy the ID name and her I'm type has tag our ID name box one. Then inset the colors, I'm going to use similarly the properties. So copy the CSS properties, and I'm going to paste inside this box one. First, I'm going to change the background color. I don't want any background color. And then I want to assign a absolute width to this D. So I'm going to assign 600 pixel and height 300 pixel. If I set this file, now you can see how child p element take 50% width of this parent container. So as I told you, relative value work relatively according to the parent size. So if I reduce the otherwise increase the browser height and width, it's not going to effect to our box because we said absolute value to its parents. So let me show you. So I'm going to reduce the browser we. Sub to reduce the browser width, as you can see, here you can see, we have a scrollbar. But our box do not change the wide. Similarly, if I increase the browser width, also, you can see the same result because now it's work according to parent container. But if I remove the parent container, then this box is going to change its width. But if I remove the parent deep means box one, then it's going to change the shape according to the browser window. Then it's going to take 50% weed of browser window. Here we use 50%. It's mean it's going to take 300 pixel because we say box one with 600 pixel. Similarly, if I pass 20% and then set this file, now you can see, now it's take 20% of 600 pixel. But if I remove the box one, let me show you and this up this file. Now the window become parent to this d. Window means the body tag. And now I'm going to talk about EM and REM ID. EM and REM units basically work with font size. Let me show you how. So at first, I'm going to increase the Op. I'm going to take 80%. Then here I'm going to take a property named font size. Font Size. Font size one EM. And inside this deep tag, here I'm going to add a dummy paragraph. Herm type um 100. And I'm going to set this file. So here we add dummy paragraph of 100 or, and we said font size 1:00 A.M. 1:00 A.M. Value work relatively because it's a relative unit and the parent of box is bony. And as you can see, in our body tag, we do not use any font size. So let's use font size. Font size, and I'm going to use font size 13 Bigel I'm going to set this file. After set this file, now you can see inside the box, our font size is reduced. Now 1:00 A.M. Become 13 pixel. But if I use 2:00 A.M. So I'm going to change the Vin two EM. Then I'm going to set this file. Now you can see it's look to be, and it's also overflown to this container. Let's mean here we use two time value of 13 pixel because in our parent tag, here we use 13 pixel font size, and two time up 13 pixel is 26 pixel. That's why our font become 26 pixel. Similarly, if you want to take half value of this paren D, in that case, just a it to pass 0.5 pixel. 0.5 am. If I set this file, now our fonts become too small because it's hub the value. So our font size become six pixel. But if I comment out, otherwise, remove the parent element font size, and here I use 1:00 A.M. Value and set this file. Now you can see it had a default value for this font. Now the question is, what is the default value of 1:00 A.M. The default value of one M is 16 pixel. If I show you my browser settings and then go to the appearance, you can see the font size. If I open this font size, now you can see, by default, it said 16 pixel. But if I increase the size, suppose I use 28 and back to my window, now you can see now our one M font value become 28 pixel. Similarly, if I reduce the value, it becomes so small. Now, one M value become nine pixel because here we say nine pixel. So it's take the default value of browser font size. And most of the time, browser use 16 pixel. And now let's talk about REM unit. So here I'm going to type REM. And I'm going to stop this file. REM stands for relative EM. It's pretty similar with EM, but it not work according to parent. Now you can see the default font size, which is 16 pixel. But if I assign font size to our body, some type font size, and I'm going to assign eight pixel. And if I set this file, as you can see, it do not reduce the font size. I do not work according to pan. This RMU is related to root. If I increase the browser font size, let me show you appearance font size. So I'm going to use 28 pixel font size, and then back to the window, now you can see, now you can see our one RM Valcal 28 pixel. So now let's fix the default wave, which is 16 pixel. And if I use two RAM and as you know, it's going to take 32 pixel. And there is another way that we can manipulate the RM unit using the root tag. And as you know, our root tag is T Milton. So if I style the HTML sound type TML, then you set the calvss I'm going to use font size property. Font size, and I'm going to set font size ten pixel. This is the default will. And if I set this file, now you can see our fonts has become 20 pixel because here we use two RM. It's mean twice of root font size in. So if I use one RM and then set this file, now you can see our fonts become ten pixel because now our root tech font size is ten Bexl and now I'm going to set EM unit two with. So I'm going to take font size one EM and we with one EM. If I set this file, it's going to take with eight pixel. Also, it's going to take font eight pixel. Let me show you because as I told you, EMV work width according to the parent. So if I set this file, you can see the result. It takes box width eight pixel because Henry set font size eight pixel. Also you take font size eight pixel. So AM value takes the font size of the parent and it apply the font size to the width of the child. And at the similar way, if I use REM Value, REM and REM and set this file, now our font size become ten pixel. Also, our width become ten pixel because it take root well. I hope now it's become so clear that why we use EM and RMW only with fonts, not the height and id. So this is the first part of this tutorial. At the next part of the tutorial, we are going to talk about VH and VW. So thanks for watching this video stay tuned. 3. CSS Units Tutorial Part 2: Hello, guys. Good to see you back. This is another Tutorial related CSS unit. And in this tutorial, we are going to start with view boot height and Viewboard With. So let's start with Viewbard With. Here you can see a browser window on your screen. And we call total width of browser width is Viewboard Weav and viewpot width, divide with to the hundred part. If we use 50 VW then it's going to take hub of this browser. At the same way, we have viewpot height. It is also divided with 100. And if we use 50 VH then it's going to take 50% of this window. So let's start the practical and see how we can use it. So as you can see, we are in vis a studio code editor, and I already create another HTML document name Idextdt TML. So first, I'm going to change the with unit. Here I'm going to use 100 VW, and for height, I'm going to use 100 VH. For now, I don't want font size. So I'm going to remove it. After step this file, as you can see, you can see it completely occupy the browser height and browser. But there is a problem. You can see the scroll word we M bottom. It's a problem. So I'm going to remove the headings d h one. Also, I'm going to say margin zero. And also, I'm going to remove the border border with zero pixel, and I'm going to set this file. If I set this file, up to set this file, you can see it removes the scroll bar from the window and it occupy completely height and width of this window. If I reduce the width, also you can see, there is no scroll bar. And also this unit work for height. And now I'm going to reduce the unit Vale. For that, I'm going to pass 50, 50 VW for height, it remain as it is. After set this file, you can see the result. Now, the width become half of this browser window. As you know, these are all relative units. It's pretty similar with percents, but there is a difference between percentage and viewpod and view height. Percentage value work according to the parent element. If we set parent element width, 600 pixel, and then we use child element width, 50%, then it's going to set with 300 pixel, but viewpod width and viewport height not work like that. It's always work according to the window size. Let me show you. So I'm going to try to put it in a fixed we. Again, I'm going to take a paren container. Deep inside the dip tag, I'm going to assign an ID. ID box one. Then I'm going to move this dip inside this paren dip tag. And now I'm going to style the box one, hashtag, box one, and inside the caliss our first property is border. I'm going to use this same value, wed no pixel, solid border. And then I'm going to say height and we Width, 600 pixel, height 300 pixel. If I set this file, you can see the result. So in the parent tag, we use absolute value, and in a child tag, here we use relative value, but here we use viewport height and viewpot weed. And as I told you, viewpot height and viewpot with not work relatively to the parent container. It works relatively to the window size. So if I reduce the width of this browser, as you can see, it relatively work with the window, not the parent container. But if I use the percentage value there, so here I'm going to use 50%. And then set this file. Now you can see it take 50% with of this parent container. So I hope now you realize what is the difference between viewport value and percentage. Both the units are relative units, but their working method is different. Now let's talk about our last two unit, V max and min. Vmax stands for Vpot maximum and min stands for viewpot minimum. So let's start the practical. But before we start the practical, I want to clear Vmax and Win unit. On your screen, you can see a browser window, and the Droser Window height is 300 pixel and the Browser Window D is 400 pixel and her we created DV inside this browser window. And also we specify a ID to this Dp element, which is 50 Vmax. It means it's going to take 50% ilop browser week, which is 200 pixel. Now you might think it is pretty similar with percentage unit, otherwise, VW unit, but it is not. Vmax unit always going to take maximum value of browser. Now the question is, what is the meaning of that? As you can see, our browser width is greater than browser height, so it's going to take browser width value, and 50 VMX of 400 pixel is 200 pixel. That's why it said D width 200 pixel. But what? If I reduce the browser window width let me show you. At the next example, as you can see, here I reduce the browser with. Now our browser we become 250 pixel and browser height is 300 pixel. Now, browser height is greater than browser weed. So this time, VMx unit going to take this in the height in 300 pixel, and the up up 300 pixel is 150 pixel. It's going to set the object with 150 pixel because Vmax unit always select the maximum value. And at the opposite way, we mean unit work. So let's start the practical and clear the concept. At first, I'm going to remove the paren dip element, box one. I don't need it. Then also, I'm going to remove from this style section. And here, I'm going to change the with 50 Vmax. And here, I'm going to sit this fine. Now the question is, what is the meaning of V max? And also, I'm going to change the height to understand it better. So here I'm going to pass 50 H. VMAX going to take the maximum. It's going to check height and with both and it's going to take the bigger w. I want to say it's going to compare the viewpoint height and viewpo weed and it's chosen the bigger value. And according to the bigger value, it's going to set the weight. Let me show you how. Here you can see how window height is bigger than window. That's why I take hub of this. And according to the hub of this value, it set. Assume that our viewpot width is 200 pixel, but our viewpot height is 300 pixel. Then it's going to take 50 VMX value of this height, not the width, and our height is 300 pixel, so it's going to set with 150 pixel. That's why you can see here we use 50 VMX, but it do not take the 50% of the browser width. It takes 50% of the browser height. But what? If we increase the browser with and make it bigger than browser height, let me show you. Now I'm going to increase the browser weed. Now you can see our browser width is bigger than browser height. So this time is going to take the browser with. And according to the browser with Value, it takes 50 VMX means hub of the browser width. Now you can notice our container width occupy the 50% of browser weed. But if I reduce the browser width, now it do not occupy the 50% of browser width. Because browser height is bigger than browser width. So now it set the with 50% of browser height. So this is the usage of Vmax unit. For responsive layout, it is very useful and at the opposite, we have another unit, which is me. So I'm going to duplicate this line and comment out previous one. Then I'm going to set this file and back to my browser. And now I'm going to change the unit name. 50 mean means view board minimum, and I'm going to set this file again. Then I back to the browser. Now you can see the different result. This unit is completely opposite of Vmax unit. Now you can notice you can see our browser wide is shorter than browser hint. That's why it's going to take browser with Win, and according to the browser with VRU, it's going to set the box wing empty Window W 200 pixel, then it's going to set box width 100 pixel because here we use 50 of viewpot area. But, if I increase the browser width, let me show in. And now I'm going to increase the browser Wi After increase the browser width, now you can see, now the browser height is shorter than browser wid. That's why it said With of this box, 50% of browser height. If I reduce the browser height, as you can see, our box width become so small because now it take 50% of this much height. If the height is 100 pixel, then it set this box width 50 pixel. So this is how Vmax and weaving unit work. So this is it for this tutorial. At the next tutorial, we are going to learn CSS variable. So thanks for watching this video, stay tuned for the next tutorial. 4. Css Variables : Hello, guys, good to see you back. Once again, I'm back with another tutorial related advanced CSS, and in this tutorial, we are going to learn CSS variable. With that, also, we are going to learn where function. At first, let's see without variables, how we can manage our job. Then we're going to learn how we can use variables to easy our job. And we can sip our valuable tie. At the right side on your screen, you can see a browser. In this browser, we have a basic web layout, header, maneuver, footer, sidebar, content, heading, et cetera. Here you can see our header color and the footer color is similar. Also, when I open my car on these navigation items, you can see the background color is also similar. Basically, we reuse the same color three time. If I show you my SDML as you can see, our header background color is gray. Also, our maneuver over background color is gray. With that, our footer background color is gray. Totally we use gray colored three time. Now, suppose we need to change the gray color. I want to replace gray color with green colored. For that, we need to change the color name three time from the intersection from the navigation bar and from the footed, it is a very time consuming process. To resolve the problem, CSS introduce CSS variables, and to create these variables, you need to use a Posidoclass name root. Aperclon you need to type root. Then inside the calices, you need to declare the variables and you can use these variables throughout this website. As you can see, how we create a variable named main color. And in this variable, her we assign a value and our value name is color red. You go to use any type of value, pixel value, string value, color value, color value, et cetera. Then we need to call this variable throughout our website. And if you need to change the color, then we need to change once. We need to change in our variable section. Suppose I want green color. Then I'm going to replace red with green and you're going to apply green color all of this section. Remember, to declare a variable, first, we need to type two hyphens, and then you need to type the variable name, between variable, you can use hyphen otherwise underscsine, but you cannot leave it blank. I create a variable, and now I want to use this variable. Suppose I want to use it in class A. For that, and inside the colors here we declare a property name color. Then we need to call were function. Then inside the round ss, we need to call the variable name to apply the Val then automatically, it's going to place red color at that position. Similarly, I want to apply the same color for background. In class B, I use a property named background color. Then I call the variable function and I apply this cull and I call this variable in main cull. At the same time, we can change the font color and the background color, and we can create multiple variables in our root tag. Remember, this is a pseudo class and we can call this variable as much we want. So without wasting your time, let's start the practical and see how we can use it. So as you can see side by side, I open my Visual Studio code editor and my browser using live server extension, and I already created an estimate document named index dot HTM. And as you can see in my browser, there is a BSI website layout. Here we use gray color three time in header section, in neighbor over section, and at footer section. So for that color, I want to create a variable. So first, I'm going to type a Posito class and our Posito class name is Rob. Rube. Then the carnivorous is and our varim is many colored. Then colon and I would type a V and our um is gray. And semicroon 210 this line. This is our first variable named main color, and I'm going to copy the variable name, main color. Here we successfully define the variable in our root tag. It is a global scope. Now to call this variable. For that, as you know, to use were function. In our header background, I'm going to type were function. Then in the round dresses, we need to pass the variable name and our variable name is main color. The semicron this line. If I set this file, as you can see, it's written the same result. Here you can see it growth change the background call. Similarly, I'm going to copy this function, and now I want to call this variable at our Her section, NebbaHor. In our menu section, here I'm going to call the variable again. We main color. Apres up the file. As you can see, there is no changes if I Ober my casar on these menu items. Then I'm going to call the same variable in our footer section. For background, main color, and up preset this file, you can see the result. Now we need to change this color from the sections. For that, we don't need to do the same job three time. Just want to go to the variable session where we declare the variable and from this section, I'm going to change the color. Here I'm going to type green color. After set this file, you can see the result. At the same time, change the background color and the overground color from the different places. It's about time. Similarly, you can create variable for any value. This time, I'm going to create variable for for famine. So the main color, Imo type hyphen hyphen main form. And I want main font, Georgia. In our body tag, her use font family area. Now I want to change the font family of headtag here inside this head tag, I'm going to use font family, so I'm going to call the variable. Inside the function, I'm going to play as the variable name and our variable name is main font. Then semicon two in this slide. After set the file, you can see the result. It's changed the font family of our header section. This is the usage of variables. And we have to turn two method to create variables. When we use root postitoclass to declare variables, then it's going to set global scope to our variables. It's main, you can use those variables anywhere in your website. But if you want to use variables in limited area, for that, we need to assign local scope to our variable. So let's see how we can create local scope variable. As you can see, in our class A, her create a variable, main color. Then inside the same class, we call the variable using were function. Now, this variable become local scope variable because we cannot use this variable outside the A class. Suppose we need to style the anchor tag inside B class A. For that, also we can use this variable because Hey calls this variable inside B class A. Now the variable scope become local scope. Let's start the practical and see how we can use it. As you can see in our content section, we have paragraph, we have heading two, also we have gut ten. Is that the content section I'm going to declare a variable, and our variable name is T color. T colored and I want to assign to this variable rate. The similar this line. Now our variable become local scope variable, and I want to change the degral now I want to change the color of content font. I want red color. But that here need to call the function where inside the round brass, I want T color. Similarly, I want to change the heading to color, which is inside the content portion. Heald type where I want to use T color. With that, also, I'm going to apply this same color in our nga tag, which is inside the content. In color section, I'm going to call the variable that T color. Uptres up this file, you can see the result. As you can see, it successfully applied red color or of the content part. But if I call this variable outside the content section, let me show you. As you can see, we have sidebar and cut tags. I want to apply this variable in sidebar and cut tags. Here I'm to call the re function, where I said the variable, I want to use T color. Urest up this file, as you can see, it do not change our side bar and cut tech colors. Because here we use local scope variable and T color is content local scope variable. We cannot use it outside content section. But if I call a Glover scope variable, let me show you. Here I want to use main color and I want to set this file. After set this file, as you can see, we successfully change our sidebar ang tech colors. This is how variables work. I hope now it's clear for you how we can use it. Thanks for watching this video. Stay tuned for our next tutorial. 5. Calc() function : So I'm Hello, guys. Good to see you there. This is the first tutorial related CSS function. Actually, it's not. We already cover were function in our previous tutorial. Calf function, physically used for mathematical calculations. Now the question is, why should we use mathematical calculations? Let's see an exam. So as you can see, in class A, her set With 100% minus 18. This is one of the example of calf function, and at the next example, Hero use 100% divided by two. Its main now the width becomes 50%, and at the next example, insert the background position, her declare XX position and YXs position, but we use calf function. Here I use 100% -50 pixel, also 100% -20 pixel for YXs. Also, we can use calf function with colors. Let me show you. As you can see, hero background color in HSL mode, Heid pass hue, saturation and lightning. And for saturation, I use calf function to multiply with 25%. It's meant this value become 50%. So I hope now it's clear how we can use calf function. And now I'm going to show you what kind of arithmetic operators we can use in calf function. So these are all arithmetic operators that we can use in calf function, addition, substruction, multiplication, and division. Let's start the practical and see how we can use it in actual line. As you can see side by side, I open my Visual Studio code editor and my browser using light server extension. And inside this estimate page, here I create a deep. And to this deep, we set with 500 pixel and height 300 pixel. And inside this deep, we have some dummy text. And now I'm going to change with unit. Here I'm going to use percent unit, 100%. Uprasep this file, as you can see, it occupy the 100% width of browser. And now I'm going to add some padding to this. Padding 20 pixel. Up to step this style. As you can see, it increases our width a little bit. And also, you can see the schoolbard we do. Another question is why it's happened. He do not use any fixed in. Harrow use percentage in. Then why we need to use scroll bar to see the whole D? Because Hay use padding. We add padding from every direction. So it's going to add padding from right side. It's going to add padding 20 pixel from the right side and 20 pixel from the left side. That's why we see the scroll bar below. And now we need to and now we need to reduce it. For that, her we need to use calf function. Sono type CALC. Then inside the round presses, first, I'm going to pass the percentage value, which is 100%. Minus from right side, I want to -20 pixel. And from the left side, again, I'm going to -20 pixel. And then, as you can see, here we add border from every direction. So you need to minus one pixel border. From left and from the right one pixel. Ure at this file, now you can see the sm. It remove our scroll bar, and also it take 100% weed. Yes, it take 100% wide and from the 100% weed, Hero -42 pixel. If I show you my whole screen, you can see the th If I increase, otherwise, decrease the browser window, as you can see, there is no scroll bar in our browser. And also you can see up to 100% weed, it had 20 pixel padding from every direction. So this is one of the good uses of calf function. And now I want to vertically and horizontally centered this box. For that, we need to use fixed value. So I'm going to duplicate this line and comment out previous one. And here I'm going to use a fixed value. Fixed value, 500 pixel. And also, I'm going to remove all the data inside this deep tag. So from there, I'm going to remove all the data. Then outside the deep tag, I'm going to take a paragraph tag, P. And inside this paragraph tag, I'm going to type nearly 1,500 dammi text. Win 1,500. And I'm going to set this file. After set this file, you can see the result. Now, let's turn on the full skin to understand it bit. And now I want to make deep position absolute. And also, we need to place it horizontally and vertically centered. For that, let's get to the Viger studio code edit. So here, I'm going to use position absolute. And from the left, I'm going to take 50%. From the top, I'm going to take 50%. Set this file, you might think it going to center of deep, but it is not. If I show you my browser, as you can see, it not center out deep. Because if I draw a line from this position to this position and divide our browser in two part, now you can see our 50% start with at that position. From top and let, it is the center point. It is the 50% position. That's why our deep starting at that position. So to make it horizontally aligned and vertically aligned, we need to minus half of the width of this deep from the 50%. So let's go to the visual studio Here I'm going to use calf function. El 50% minus, as you can see, our width is 500 pixel. So here from here, I'm going to -250 pixel. Similarly from high. So copy the value. So from top, I want to -150 pixel. And also from here, we need to minus the padding -20 pixel. And also, I'm going to minus one pixel botel minus one pixel. And I'm going to do the same thing with our top property. So I'm going to copy this section and I'm going to paste it here. And this time, we need to minus 150 pixel. Because we set height 300 pixel. So after I set this file, if I show you my browser, as you can see, we perfectly make it center. And if I responsive our screen, as you can see, it automatically plays it center. After I resize our window, it automatically vertically and horizontally center our DB element. So this is one of the example of calf function. Now, let me show you another example. And now I'm going to fix a deep without using fixed position. But also, I'm going to make our layout flex. For that, we need to tell three deep almen. Let me sum. So I don't need this paragraph anymore, so I'm going to remove this paragraph. And this is deep number one, and I'm going to set a ID name header. Then I dug this D to type. And this is our second deep, and here I'm going to say it ID content. In our last deep, I'm going to set ID, footer. And I'm going to say this. And also I'm going to comment out this whole section. Here I comment out the whole section of box time. And also, I'm going to type some text. Is this deep element. For header section, I'm going to type header. Header, for content, I'm going to type contin. And for footer, I'm going to type footer. So at first, I'm going to style the header section, Haztag header. Instead the carierss I'm going to add border. Border, one pixel. And I want solid border. Solid and black. Then I'm going to set background colour. Background green. And I'm going to take 100% and height 100 pixel. And similar for the content part, I'm going to duplicate this section and Hemo to pass background color red. And also, I'm going to take 100% we and for height, I'm going to use calf function. So first, I'm going to change the ID name contain. Then I'm going to style the fut as section. Hasta four tag. And I want blue color. So let's set the file and back to the browser. So here you can see three of the deep element, and I'm going to remove this text. So I'm going to comment out this H one tag and set this file. Let's back to the browser, and now I want to assign this content deep element the remaining space. For that, we need to use calf function. So in our content section, here I'm going to tie 100 VH means UPOd height. If I set this file, as you can see, our content section take 100% eBoard height, but it had a scroll bar. I don't want this scroll bar. I want a fixed header and footed. For that, we need to minus header and footer height from this content bar. So let's get to the visa studio C. At first, I'm going to remove all the borders. So I comment out the borders. I don't need. Then I'm going to take Marzin zero. So from body tag, I'm going to type margin zero. After that, here I'm going to type Cal function. Inside the round res is 100 VH minus I want two minus header height, and the header height is 100 pixel. Also, I want to minus footer height, and our footer height is 100 pixel. After step this file, if I show you my browser, oops, I did a silly mistic. If I show you my cod editor, as you can see, here we use cal function in. We need to use the cal function in height. So I'm going to copy this section. Basically, I'm going to cut this section and I'm going to type 100%. I want 100%. So in our height, I'm going to use the calf function. I press at this file, if I show you my browser, you can see the result. Here you can see our content section grab the remaining space, also we don't have any scroll bar. If I make it responsive, as you can see, our header and footer section is fixed, but our content portion going to change height according to the remaining space. So this is one of the good example of cal function. I hope you understand. So thanks for watching this video. Stay tuned for our next video. 6. Min() function : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS function. And in this tutorial, we are going to cover minimum function, max function, clam function. Now let's see what is mean function. The full name of Mint function is minimum well. It's mean the lowest will. Basically, in this function, we pass multiple numeric fill and this function return the lowest will. How can we use this function in our wave projects? Suppose we have a deep and in this deep, I want to add dynamic width and for that, we are not going to use media quad. For that, this function is introduced. Suppose in this deep, I'm going to assign with using the Op mean function, 50% or 500 pixel. Then mean function going to implement the lowest value. Let me explain it with more details. Now, how can we measure the 50%? It's going to use the 50% width of parent deep element. Otherwise, we have a browser and in this browser, we have only a deep, and then we need to count the viewport width of this browser. In that case, browser width is the parent of this deep and then it's going to compare it if the 50% of browser window is greater than 500 pixel or not. If it is greater than 500 pixel, then it's going to choose 500 pixel because Min function always choose lowest value. And otherwise, if 50% is less than 500 pixel, then it's going to take the 50% wide. It is quite similar with Vmax and weaving unit, and we already learn about it in our unit section. Now, let me explain it with more authentic way. Suppose our browser Vs 900 pixel and if we extract the 50% of 900 pixel, then it return 450 pixel. Then main function going to check the less value. As you can see, 450 is less value than 500. Then it's going to assign D width 450 pixel. At the opposite way, if our viewport width is 1,200 pixel, then we extract the 50% of 1,200 pixel. As you can see, it's retune 600 pixel, and as you know, 600 is greater than 500 pixel. In that case, it's going to apply 500 pixel width to this D. So this function always going to return dynamically minimum value, and we can use this function with different type of properties. We can use it with margin, padding, for size, box shadow, et cetera. Also we can use this function whenever we use numeric films. So without wasting your time, let's start the practice. As you can see, side by side, I open my visals to your code editor and my browser using if server extension, and I already create an estimate document named index dot stem inside our estimate page, we have a deep tag. And in this deep tag, we assign a class named element. And also we type it takes inside this deep tag hello world. Then I add some padding to our body tag and set margin zero. Now I want to assign a dynamic we to this element. It's means I want to change the element we whenever we change the shape of browser wind. For that, first, I'm going to select the element, the elemt class, the element class, dot element. Then inside the CalibrassO first property is background. Background, and here I'm going to use light gray. With that, I'm going to use another property, Wheat, and I want to slit dynamic weed. For that, I'm going to use mean function. And as you know, in Min function, we need to pass multiple values. First value, I'm going to take in percentage, 50% and second value, I'm going to take it pixel, which is 500 pixel. It is not mandatory that you can take first one is percents and second one is pixel. You can take any type of value. Here you can take both the value in pixels, otherwise both the value in percents. It is up to you. If I set this file with that, I'm going to assign a little height. Height here I'm going to use 400 pixel. Upper set this file, as you can see, it assign a wide. Now I'm going to open my element section to measure the width of this element. Inspect Element section. Whenever I open my causar on this element, as you can see, it's written 380 by 400. As you know, we set height 400 and our main function assign 380 pixel width because our word browser width is 820 pixel and it take 50% of browser width. Because we at padding, that's why the value is shorter than 50%. It's written 480. But if I remove the padding and then set this file, now I open my Carson on it, and now you can see it's written 410 pixel. It takes 50% of this browser. So minimum function, take the minimum value. But what? If I increase the browser width, let me show you. Now I'm going to increase the browser W. As you can see, after increase the browser width, this time, our function do not take the 50% of browser W. If I over my car on it, as you can see, it at 500 pixel width and 400 pixel height because our total estimated structure width is 1,518 pixel. And if you return the 50% of 1,518, then it would be 759 pixel. 759 pixel is greater than 500 pixel. And as I told you, our main function always take the minimum value. In that case, 500 is minimum value. That's why it said 500 pixel. I hope now you understand. But if I reduce the browser with again, now you can see our viewpot width is 614 pixel and 50% of 640 pixel is 307 pixel. As I told you, this function always take the minimum value. That's why it said element width, 50% of browser window. I hope the main function topic is clear for you. Let's look to the visual studio code. Now I'm going to hook this deep element in another deep element. Here we use this deep in directly in our body tag. I'm going to cut this portion, cut and first, I'm going to assign a ID to this deep Astag and our deep name is paren. Then inside this deep element, I'm going to paste the deep. Now we have parent deep element and childp element. Now I'm going to assign a fixed weight to this parent deep. Here I'm going to type atagParin. Then inside the Cal sis, first, I'm going to assign, we, and I'm going to assign with 600 pixel. To understand this structure, also I'm going to assign border. Border, I want one pixel solid border and I want black color. And I'm going to set this file. If I show you my browser, as you can see, our parent Wi is 600 pixel and the 50% of parent wide is 300 pixel, and minimum function always return the minimum, and 300 is minimum value compared to 500. That's why in our childp element, it said 50% width mean 300 pixel. But what? If I increase the parentip element width, let me show you. This time, I'm going to set parentp element width, 1,200 pixel, and I'm going to sub this file. After set this file, if I show you my browser, now you can see, now it assign 500 pixel weight to this child Dip element. If I show you my console element and over my cazar on this child element, as you can see, it at 500 pixel week because our parentp element width is 1,202. Why it's at 1,202? Because we take one pixel border at right and lift. That's why our total parent is quel hundred and two. If we extract 50% of el hundred and two, it's going to return 601 and 601 is greater than 500. And main function always return minimum value. 500 is minimum value. Now I'm going to reduce the viewport width. Here I said viewport width 718 pixel. If I over my card on this element, as you can see, still it return child element width 500 pixel. Now the quotien is why it's written 500 pixel. Because as I told you, mean function work according to parent element, and this time our parent element is this deep, not the browser window. And Hero say fixed value. And that's why according to the fixed value, it's written 500. And if I try to reduce the window object more and over my cars are on it, still, you can see it's written 500 pixel weed because in our parent tag, herro use fixed weed. So I hope now it's clear 14. How can we use mean function? Thanks for watching this video, stay tuned for the next tutorial. At the next tutorial, I'm going to cover max function. 7. Max () Function : Got to back guys, this is another tutorial, and in this tutorial, we are going to talk about max function. This function works opposite of main function, and the full meaning of the function is maximum el. In this function, we pass multiple numeric value and it's written the maximum waive. Suppose we have a same type of deep in a browser, now I want to say a dynamic ed to this deep element. And similarly, I want to say it the maximum value. And in this, here we use max function. And in this max function, we have to dull two wave, 50% and 500 pixel. So as you know, it's going to take browser 50% width. Suppose our browser width is 900 pixel and if we get 50% of 900, then it's done for 50 pixel. Then next function going to check, which is maximum value 450, otherwise, 500. And as you know, 500 is greater than 450. That's why is going to assign 500 pixel to this D. Similarly, if the browser is 1,200 pixel and we extract 50% of 1,200 pixels going to return 600 pixel. And as you can see this time, 600 is greater than 500. So it's going to assign 600 pixel width to this D. So let's start the practical and try to understand it. So as you can see side by side, I open my Visual Studio code editor and my browser using if server extension, and I already create an estimate document named indextdt HTML. So as you can see in our body tag, we have a deep tag, and here is City class to this deep element. And as you can see, in this element, we say static en. And now I want to say dynamic weed. For that, this time I'm going to use Max function. Max. This function is completely opposite of minimum function. In this function, here I need to pass multiple valves. Our first value is 50% and our second value is 500 pixel. If I set this file, as you can see, there is no changes because our static value was 500 pixel, but as you know, max function always take maximum value. If I show you my elements section, let me show and here you can see our this time our browser width is 958. The 50% of 958 is below then 500 pixel. That's why our max function choose maximum value, which is 500. But if I reduce my browser width, let me show you. Now you can see our browser width is 600 pixel and 50% of 600 pixel is 300. So this time, our maximum function going to choose 500 because 500 is greater than 300. And remember, max and minimum function work according to the parent element size. Let me show you. Here, I'm going to take another deep tag, and I'm going to move this deep tag inside this parent element tag, some type Dev also I'm going to assign a class parent parent. Then I'm going to cut this section and I'm going to paste it inside the parentan I'm going to set this five. Now I'm going to style this parent tag. So I copy this parent tag and HemotypeParnt. Then inside the clivss first, I'm going to use border property, border, and I want one pixel, solid border. With that, I want black color. Then I'm going to set a static W W and Hemo type 700 pixel height, 400 pixel. I'm going to set this file. Now I'm going to set this file and turn on the full screen of the browser. If I reduce the browser width and browser height, it's not going to effect to this deep element because this time we have a parent deep element and the width of this parentip element is 700 pixel and the 50% of 700 pixel is 350 pixel. As you can see, 500 pixel is greater than 300 pixel. That's why it said child element width 500 pixel. It's work according to the parent Deep container, and we already learn about it in our regress studio. Now I'm going to show you another example. Let's to the user's studio code. So first, I'm going to comment out this parent section. And also, I'm going to remove this parent tag from our body. And now I'm going to use minimum function with maximum function. Basically, I want to say, I want to use both the function at once. This time, I want to say 80% value. Our first value is 80%. And in our second value, here I'm going to use minimum function. Then inside the undress, also, I'm going to pass to the two. Our first value is 50% and our second value is 1,000 pixel, and I'm going to set this file. Another question is what kind of value is going to return? At first, it's going to run the minimum function. Suppose our browsers 1,200 pixel, then our minimum function return the minimum value. 50% of 1,200 pixel is 600 pixel. Minimum function going to select 600 pixel, then it set 600 pixel as second parameter of max function. For better understand, I'm going to duplicate this line and comment down and comment out one of the line. This minimum function going to select the minimum value. It's mean if our browser is 1,200 pixel is going to return 600 pixel. And 80% of 1,200 pixel is 960 pixel. I'm going to do this file again and here I'm going to type 960 pixel. As you know, max function always state maximum value, it's going to say our element with 960 pixel. Let's back to the browser and see what it written. As you can see, our browser to hundred pixel. If I turn on my console and over my cursor on this section, if you measure the width of this element, it becomes 960 pixel. But what? If I reduce the first value of maximum function, let me show you. This time, I'm going to pass 20%. Now, 20% of 1,200 pixel is 240 pixel. Here I'm going to type 240 pixel. This time, our maximum function going to select the maximum value, which is 600 pixel. If I show you my browser, as you can see, this time our element is 600 pixel. This is how we can inherit multiple function at once. Here we use max function and minimum function together. Not only that, if you want to pass third value in this function, yes, you can. So here, I'm going to use another function, which we learned in our previous tutorial, and I'm going to use Cal function, CALC. Then inside the round presses, I want to add 500 pixel with 500 pixel. And I'm going to set this file. After set this file and after calculate both V value, it's going to return 1,000 pixel. As you can see, our max value going to choose this time 1,000 pixel because this is the maximum value. After step this file, if I show you my browser, as you can see, now, our element with becomes 1,000 pixel. Basically, in these examples, we use maximum and minimum function to the element weight, but this time, I'm going to use it with padding. I'm going to comment out this line and after height, I'm going to type padding. Padding and I'm going to use max function, Max. Then inside the roundresses, our first value is 30 pixel in our second value here, I'm going to use five viewpot height, V g. We already learn about this unit in our previous tubules. Sorry, not viewport height. I'm going to use viewpot double. So preset this file. If I back to my browser, here you can see if I over my car on this element, you can see a fixed padding to these element, and if I decrease the window size, as you can see, it reduced the padding. And if I increase the window size, now you can see it increase the padding size. But if I reduce it more, then in one point, our padding value become 30 pixel. Because if I show you a code editor, here I set the minimum value 30 pixel. Now, let's try to understand the same thing with percentage. Again, I'm going to get this line, and this time, I'm going to reduce the height to 100 pixel and comment out the previous line. And in our second value, I'm going to take 10% and I'm going to set this file. Suppose our browser is 1,000 pixel. Inside the command, I'm going to type 1,000 pixel. And the 10% of 1,000 pixel is 100 pixel. If our view pot with is 1,000 pixel, then according to the 10%, our second value becomes 100 pixel. Then our max forms are going to take the highest value 100 pixel. With that, also, I'm going to increase our first value. Here I'm going to type 40 pixel. After set this file, as you can see, our 10% value is still bigger than 40 pixel. If I show you my browser, now you can see it had 100 pixel padding in every direction. And if I increase it, it's going to add more padding and if I decrease it, it's going to reduce our padding. But in one point, if I make it below then 400 pixel, now you can see our view boot is below than 400 pixel. 10% of 400 pixel is 40 pixel, but our view board area is 388 and 10% of 88 pixel is 38.8 pixel. 38.8 pixel is less than 40 pixel. That's why if you notice when I over this element, as you can see, our padding is 40 pixel. If I reduce it more, still you can see our pading is 40 pixel. But if I increase the browser width, as you can see, when I over my cars on it, now our padding is not fixed, it continuously growing when I increase my browser size. Now I'm going to use the same value with minimum function. In my visual studio codior, here I'm going to duplicate this line and comment out previous one. This time, I'm going to use Min function. As you know, Min function always going to return the minimum value. Up to step this file, if I show you my browser and open my car on this element, now you can see pad, our padding is fixed, 40 pixel. Because this time we use minimum function and it's written the minimum value. He said, 40 pixel padding to this element. Now I'm going to use this function with shorthand. Let's get to the visual studio code and I'm going to get this line again. This time, I want to use shorthand. So from left and right, I want to use minimum function and from top and bottom, I'm going to use ten pixel. I'm going to step this file. If I back to my browser and over my cur on it, now you can see from top and bottom, it add 40 pixel and for left and right, it add ten pixel. So when we increase, otherwise, decrease the browser window size, and according to the size, it's going to change top and bottom padding, but it's going to fix ten pixel padding at left and right. This is how we can use those function. Thanks to watching this video, stay tuned for our next function. At the next tutorial, we are going to cover Clam function. 8. Clamp() : Hello, guys. Good to see you back. Once again, I'm back with another tutorial related functions. And in this tutorial, I'm going to cover clam function. In KLM function, we can set minimum value and maximum value between them, we can use another wave and we call it refer value. If you want to set a particular range for that, we need to use prefer value. Let me show you an example. Suppose we have a deep inside our web page and I want to set dynamic value to this deep element. As you can see, using glam function, first we set minimum limit and last we set maximum limit. Minimum value stands for, we cannot make deep element width below the 350 pixel and maximum value stands for, we cannot take more than 500 pixel width for this deep. And between them, here we use 50% value and the 50% value comes according to browser viewpod area. So whenever our browser wide 700-1 thousand pixel, in that case, it's going to use prefer win because the 50% of 700 is 350, so we cannot take less than 350 value and the 50% of 1,000 is 500 and we cannot take more than 500 value for this view because here is set limit for that. Let me show you another example. Suppose our browser is 900 pixel and the 50% of 900 pixel is 450 pixel. If our browser ebot is 900 pixel, in that case, it's going to set width 450 pixel to the deep element. Similarly, in our next example, our view booard is 1,200 pixel and 50% of 1,200 pixel is 600 pixel. As you can see, 600 pixel is greater than 500, means it's going to cross the maximum limit. So it's not going to set 600 pixel to this dip element. It's going to set 500 pixel because we set the maximum limit. At the same way, if our browser is 600 pixel and we extract 50% of 600 pixel, it's become 300 pixel. And according to the minimum limit, it's not going to set 300 pixel width to this container because as per minimum limit, it's going to set 350 pixel. Without wasting your time, let's start the practical. So as you can see, side by side, I open my salts to your code editor and my browser using if server extension, and I already created an TML document, indextree dot HTML. And I already create an element. First, I'm going to take D to this element, weed, and for D I'm going to use CAM function. CAM. So inside this clam function, first, I'm going to set the minimum value and our minimum value is 350 pixel. Also, our maximum value is 500 pixel and I want preferred viel. I want preferred value between of these two V. Here I'm going to set 50%, and I'm going to set this file. Let's open the element section. Inspect element. If I over my cursor on it, as you can see, now our browser window is 908 pixel. Now I'm going to make our window full screen. Up to make our windows full screen, as you can see, now our window width is 1,276 and the 50% of 1,276 is above the 600 pixel. If I over my Gara on this element, as you can see, it said element width 500 pixel because we set the maximum limit and here we use Cal function to set the maximum value. We cannot go far than 500 pixel. Similarly, if I reduce my window size below then 1,000 pixel, now you can see it set 50% width to this container. Let's make our window 800 pixel to understand it better. You can see our quindo W is 800 pixel. If I open my cursor on this deep element, as you can see, our deep element with is 400 pixel. I said the preferred value, which is 50%. Again, I'm going to reduce the window weed. I'm going to make it 500 pixel. As you know, 50% of 500 pixel is 250 pixel, but we are using glam function and we set minimum to this element and the minimum wide is 350 pixel. That's why this time our function do not use the preferred value, it used the minimum value and set 350 pixel with to this element. And we can use clam function with different proprieties. We can use it padding, merging, font size, et cetera. But in this example, I'm going to use it with font size. I'm going to comment out this line, next, I'm going to take font size font size, and I'm going to use clam function. Then the down dresses, first, we are going to see the minimum value and our minimum value is 16 pixel. Here I'm going to use 16 pixel minimum font size, and our maximum value is 50 pixel and also I'm going to take preferred value, which is five VW means five port with. Remember, font size not going to less than 15 pixel and not going to beyond then 50 pixel. Let's have the file and back to my browser. If I show you my browser, as you can see, you can see the font size. If I expand with up this browser, as you can see, time to time, it extend our font size. But at certain point of time, it's going to stop our increasing font size. If I hober my car on it, as you can see, now our font size is 50 pixel. Similarly, if I decrease the width of this browser and berm cursor on it, now you can see our font size become 16 pixel. According to viewpot height and width, it's changed the font size, and also we can set upper and lower limit for this font size. Now you can see our viewpot width is 692 pixel. If I berm cursor on it, as you can see, our font size is 34.6 pixel, we can change dynamically font size and also we can set limits. I hope now it's clear for you how we can use clam function. Thanks for watching this video, stay for our next tutorial. 9. CSS Attr() function : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS function. And in this tutorial, we will learn Otter function. ATTR function stands for attribute function. Now let's see how we can use this function practically. As you can see, side by side, I opened my Visual Studio code editor and my browser using live server extension, and I already created an TML document named index TML. As you can see in our body tag Abe, paragraph tag, P, and her type hello word. In our style section, as you can see, our font family, our body font family is L and also I set some padding and in our paragraph tag, here I set font size 35 pixel and set a margin. And now I want to use the attribute function. At first, I'm going to take a attribute in paragraph tag. I'm going to use class attribute, class next, and I'm going to assign a class name which is taste. Now let's show you how we can use it. First, I'm going to select the paragraph. Then I'm going to use a Posido class, which is called after. Then inside this posito class, as you know, when we use after posito plus or before posito class, we use content property. So I'm going to type content. Content is necessary if we use upper positio otherwise before posito element. Here I'm going to call the attribute function ATR, I want to use which attribute I want to use class attribute. Class. If I set this file, as you can see, upper hello world, it print taste. Let's change the font color to better understanding color, and I'm going to print green. Now you can see it print Hover from the paragraph and then it print the class name which I assigned to this paragraph. The help of attribute function, we can print the particular tag attribute in the paragraph. Most of the cases, we use this function with content. Otherwise, we can use it with JavaScript. If I use another attribute, suppose I'm going to assign I ID DM this time, I want to print the ID name. If I pass inside the attribute function, ID, and this up this file, now you can see it print hello word, the ID name Demo. Using attribute function, we can extract the val of any attribute. Now I'm going to show you another example. When I H are my cards that are on this paragraph, then I want to show the attribute name. For that, we need to use Ober positioselector. Let me show you P, colon hover. I'm going to set this file. After set this file, if I over my carsR in this paragraph, you can see the result. This is it for this tutorial. Thanks for watching this video, stay tune for the next tutorial. 10. CSS combinator selector: And from this tutorial, we are going to start CSS advanced selectors. I hope you already know class N IDs are selectors, but CSS come with some more advanced selectors, and we are going to learn about it in our upcoming tutorials. Now, let's talk about CSS selector categories. Here you can see total four type of CSS selector category. First one is simple selector. Then come combinator selector, attribute selector, posito class posito element selector. And in this tutorial, we are going to learn simple selector and combinator selector. Now let's see what kind of symbol selector we have. As you can see, we have to tell four type of symbol selector, type selector, class selector, ID selector, and universal selector. And I know you are already familiar with our first three selector, type selector, class selector, and ID selector. If you are not familiar with these selectors, then you cannot learn advanced selectors. And if you are not familiar with that, then let me show you a little bit about E. You can see, this is the example of type selector. In type selector, we need to use the tag name. In our case, here we use paragraph means P tag. Then at the Cal resist we need to use the property and Val. Similarly for glass selector, we need to use the class name, and to select the class name, we need to use dot sin, dot the class name. Then set the calibraces, we need to pass the property and V. And also, we have a simple selector, which is ID selector. For ID selector, first, we need to type has tag, then we need to take the ID name. In our case, box. Then in the calibraces, we need to use property and V. I know you are already familiar with that, but the main selector I'm going to go is Universal selector. We represent this selector using star sine. This star sign is used to target all the estiML tag in your document. Let's understand with a real example. So as you can see, side by side, I open my Visual Studio code editor and my browser using if several extension, and I already create an estimate document named index dot TML. And in this estimate document, create a basic web layout. We have header section, we have netbur section, we have content section, sidebar section, and the footer section. So here we are going to use our universal selector. So at the top of the style tag, I'm going to use the selector. Star inside the color resist. Here I'm going to use a property named color. Color, y. After sub this coil, as you can see, it convert all the font color in our browser into red color. But accept the side bar because in our side bar, we already use the color property. And now I want to add border to every single element. For that, in our universal selector, I'm going to type border. Border one pixel, and I want solid border, and our border color is green. Uptres up this file, you can see the result. Here you can see it had border every tag in our web page. It had border to our heading tag, paragraph tag, li tags, et cetera. So this is the example of universal tag. And now I'm going to comment out what the line. And I'm going to set this file. And now I want to target all the tag which is inside the content Deep. For that, after content tag, I'm going to tie has tag content. Then here I'm going to use Universal selector, star. Then inside the color resist it's mean all the element inside the content tag, and then I'm going to use CSS property. I want to change the color font color. Color rate. And I want to set this file. After I set this file, you can see the result. So this is the usage of Universal selector. And the real practical usage of this selector is to hide the margin and padding from web page. Let me show you. So I want to comment out this section and set this file and back to the universal selector. And here, I'm going to type margin zero. Also, I'm going to type padding zero, and I'm going to set this file. Basically, it's going to remove all the default margin and padding from our tags. And basically, it save you a lot of time, and you don't need to remove margin and padding from every type. Now I'm going to talk about combinator selectd. But before, I'm going to comment out the lines. We have to four type of combinator selector, descendant selector, direct child selector, adjacent sibling selector, general Sibling selector. So first, we are going to talk about descendant selectors. In this example, as you can see, here we use a combinator selector. First, we use a class, and then we use a tag name P. You can create combination of multiple tags, classes with tags, et cetera. In this example, I want to target the paragraph which is insert the box class. For that, first, we need to select the parentag and we select the parent tag using its class name. Then we select the tag. In the next example, I want to target span tag, which is inside the paragraph tag. So first, we pass the parent tag and the parent tag is paragraph tag. Then after space, we need to pass who tag, I want to select inside the paragraph tag, and I want to select span tag. And now, maybe there are a lot of paragraph in our web page, and also we have a lot of span tag in our paragraphs. So I want to select the particular deep element paragraph. For that, in our third example, here we use a particular deep tag. Then I want to select all the paragraphs. And inside the paragraphs, I want to select all the span tag. Basically, I want to select all the span tag which is inside the paragraph, and also our paragraph come from a particular deep tag. So this is the example of descendant selectors. And remember, here we can take multiple child tag, otherwise, multiple parent tag. So let's start the practical and see how we can use it. So as you can see, again, we are in my visual studio codiator and I already create an estimL page named index two dot TML. And inside the stimal page, we have some paragraph tag and also a deep tag. And inside this deep tag, also we have to paragraph. And here, I'm going to use descendant selectors. First, I'm going to target paragraph tag, P. Then inside the color versus, I'm going to type color. And I want color, read. If I set this file, it apply red color to all the paragraph tag and also which is inside the deep tag, but I want to target those paragraph which is inside the ID box. For that, hero type has tag, our ID name is box. If I set this file, this time you can see it colored those paragraph tags, which is inside the box element. And now I want to assign a color to our span tags. So Hete span inside the cardioss color. Green. After sub this file, as you can see, it color both this pan tag, but I want to color only this particular span tag. For that, we need to select the parent elements. So our first parent element is dip tag, Dev and our second parent element is Paragraptag. P. So I want to target those span tag which is inside the paragraph tag and those paragraph which is inside the Dep tag. If I set this file, as you can see, now it apply to this particular span tag, which is inside the paragraph tag. Our next combinator selector is direct child selector. Sometimes it's known as child selector. This symbol of direct child selector is greater than sin. Here we select all the LI tag which is directly from the UL tag, and also here we select on the paragraph tag, which is directly from the box element. So let's jump into the Visual Studio code and start the practical. So again, I am in my Visual Studio code editor, and I already create an TML document, index three dot HTML. And you can see in my document, we have UL tag, and inside this UL tag, we have another UL tag. So inside this UL tag, we have some direct ALI, and then we have another UL tag. Now, if I target least some type has tag, east and all the LI tags inside the least. Inside the color resis, I want green colored. Color green. Upterse this file, as you can see, it convert all the LI tag into green color, which is inside the least. It applied the color in direct child, also the grand child. So I'm going to duplicate this section, and here I'm going to use a direct child selector, east and all the direct child inside the least tag. Then I want to assign red color. And I want to set this file. After set this file, as you can see, it apply all the LI tags, which is direct child of list element. Let me show you another example of direct child. Here you can see, we have a deep tag, and inside this deep tag, we have a paragraph tag. And inside this box deep, we have another deep named box two. And in this deep, we have another paragraph tag. And now I want to apply font color blue, which is inside the box tag in our paragraphs. For that, Here I'm going to select hash tag, box, and I want to select the paragraphs, which is inside the box tag. And then inside the cliass color. And I want blue color. Up test up this file, you can see the result. As you can see, it apply blue color to all the paragraph, which is inside the box D, and also it applied blue color, which is inside the box two Deep. But I don't want to apply blue color in our box two deep paragraphs. For that, here we need to use direct Child selector. Som type box, greater than P. Upset this file, now you can see the result. Now it select only the child paragraph of box D. So this is the example of direct child selector. Now let's talk about adjacent sibling selectors. Now the question is, what is sibling? Siply is your brother and adjacent mean plus sign. It's mean the next paragraph tag of this deep tag. Similarly, this is the next paragraph tag of this UL tag. So to make it more clear, let's start the practical. So as you can see side by side, I open my visual studio code editor and my browser using light server extension, and I already created an TML document named indexfod dot HTML. In this document, we have UL tag, and up this UL tag, we have a paragraph tag. Not only one paragraph tag, we have multiple paragraph tag. And now I want to select the first paragraph up t UL tag. For that, here I'm to tap UL, and we need to use adjacent sign, which is plus, plus paragraph tag. Then you say the colors, I want to apply colored. Color red. After step this file, you can see the result. It apply red color to our paragraph tag, which is next up UL tag. And if you want to target the other paragraph tags, I want to see the next paragraph tag, then we can call it generalized sibling tags. This is the example of generalized sibling selectors. Here you can see a treadle sign. This stands for general Simons, and you can see the sign on your keyboard above the tab button. This is going to target all the paragraph tag up the deep tag. Similarly, it's going to target all the paragraph tags up the UL tag. Let me show you the example. So I'm going to comment out the first line, and then I'm going to type UL general sibling sign. Then I'm going to target all the paragraphs. Up the UL tag. Then inside the color reces I'm going to apply color. Color red. After I set this file, you can see the result. As you can see, it target all the paragraphs after the UL tag. So this is it for this tutorial. In the next tutorial, we are going to learn at review selectors. Thanks for watching this video. Stay tuned for the next tutorial. 11. Attribute selector: Hello, guys. Good to see you. Once again, I'm back with another tutorial related advanced selector. And in this tutorial, we are going to cover attributes selector. In our previous tutorial, we already learned combinator selector. In our previous tutorial, we talk about we have to tell four type of selector, simple selector, combinator selector, attribute selector, Posidoglass and Posido element selector. And in this tutorial, we are going to learn attributes selector. So these are all attributes selector, and we have to tell seven type of attributes selector. As you can see, her use a tag. If if you want to use any other tag, yes, you can. And now you can see attribute and Val. ATTR stands for attribute, and well stands for value. Here you can see we use a estimate tag, which is tabilag. And in this TV tag, you can see some word in orange color with border collapse spanning, collapse spanning. These are all attributes. And also you can see inside the double course, these are all value. Value of these attributes. Another example you can see on image tag, you can see source or title with, these are all attribute of image tag. So we are going to target this image using their attributes name, not the class or ID name. Another example you can see, we have input tag. We have type ID name value. These are all attribute of input tag. So let's see what we can do to using our first attribute selector. It's mean the element with specify attribute. So let's see how we can use it. So as you can see, side by side, I open my visuals to your code editor and my browser, and I already create an tv document named index dot t. And you can see in my browser, we have to double two image, and between this image, we have a paragraph. And in my paragraph, we put total three lanes. And at last, we have a simple basic from. So here we are going to learn about attribute selector. So let's start our first attribute selector. I want to target image, the image with odd attribute. As you can see, we have to do two image, a image of cat and an image of tiger. In our tiger image, we don't have attribute, but in our cat image, we have the old attribute. So I want to select those image which have this attribute. And to target it, first, we need to pass the tagnyme and the tag name is image IMG, and then we need to use square sis. And inside the square resis, and now I want to select those image which have alt attribute. So I copy the attribute name odd and I'm going to paste inside it. Then inside the C resist here I'm going to add border. Border, I want border, three pixel, and I want solid border. With that, our border color is red. If I set this file and relat my browser, you can see the result. As you can see, it at border to our cat image. But at the next image, we don't have the border. But what? If I use the Al tag in our next image, so I'm going to copy the Al tag, and I'm going to put it in our next image. After it, I'm going to paste it here, and here I'm going to type image of Tiger. After set this file, as you can see, if I dete my browser, now, both the image have the same border, three pixel solid border. And now I want to select those image which have title attribute. As you can see, in our tiger image, we have the title attribute, but in our catimage we don't have title attribute. So I'm going to copy the attribute name, and I'm going to paste it here. I'm going to set this file. If I dete my browser, you can see the result. It a border in our tiger image, not the CAT image. So this is the first example of attribute select. In the next example, I'm going to target those anchor who have the target attribute. So I'm going to type and get tang A. Then inside the square basis, we need to pass the attribute name, and our attribute name is target. So I'll copy the attribute name and I'm going to paste it here. Then inside the color basis, I'm going to use a property and our property name is color. Color y. And I'm going to set this file. After set this file, if I deload my browser, as you can see, in our paragraph, we have a NCat tag, the enga tag with target attribute. So it's changed the color of this text. Now, let's talk about our next attribute selector. In this attribute selector, we need to specify the attribute name. Also we need to specify the value name. If the value and the attribute is matched, then it's going to select this element. So let's start the practical. So first, I'm going to comment out both the selectors. Then as you can see in my input section, we use four input tags, and inside the input tag, we use type attribute. But our input types are different. In our first input, we use text. Then our next input, we use radio button, and in our third input for address, also we use text, and for password, we use password. And now I want to select those input tag which have type attribute. Also, their value is text. So inside the style tag, I'm going to type the element name and the element name is input. Then inside the square recess, our attribute name is type. And inside the double codes, otherwise, you can use single codes. We need to pass the value name. The value is text. Then inside the car recess we need to use the properties. And here I want to type border. Border three pixel, and I want solid border, solid, and I want red background colored. Red border color. After step this file, if I reload my browser, you can see the result. As you can see, it had what are those input section which have type attribute. Also, which value is text. And now I want to target image with their source and source Val. For that, I'm to copy one of the source. I want to target the catimage. So copy the source and the. And then Hamer type image then insert the square ss, I'm going to pass the attribute name and the value. Then inside the Cariss I want to add border. I want to add same border, so I copy the property and value and I'm going to paste it here. I past this file. If I reload my browser, you can see the result. This time we select the image with particular attribute name and the particular value. Also, you can select the image with other attributes like with d title, et cetera. So this is the example of attribute with value selector. So again, I'm going to comment out this section. And now let's talk about our next attribute selector. This is another attribute selector. In this selector, we need to pass the attribute name, then we need to use this sign. You can find this sign after pressing shape, and you need to press six, then equal to, and you need to pass the wave. This attribute begins with the way. Here we need to pass the starting keyword or value. Let me show you. For this example, I'm going to select this code, and I'm going to paste it here. If I set this file and rerote my browser, you can see it a border to our cat image. But if I remove one character from this value, they set this file and relate this browser, now you can see it do not add any border to our cat image because the value is incomplete. But in our image, our value start from cat. This time, I use source attribute, but in our various selection, we pass only the starting keywords, CAT. So if I use this sign, this starting sign for that, we need to praise sheep and sync and then set this file and ret my browser, you can see the result. Again, it adds border to this particular image. Because in our image, we use source attribute and also our image, start with CAT. Now, let's talk about our fourth attribute selector. In this selector, we need to use attribute with operator. Attribute begins with value or is first IA des separated list. This attributes selector or when we have des sine otherwise minus sine begin with value or is first innate des separated list. So let's see the example. At first, I'm going to copy this line and comment out this line. Then I'm going to paste it here. This time, I'm going to use dd. I'm going to use Odd attribute, copy, and paste. If I set this file and reload my browser, it's not going to work because our value attribute is not safe, and now I'm going to use this operators sign. Or if I set this file and reroute my browser, also it's not going to work. But what? If I use the dash sign. So in our old value, here I'm going to use the dash sign, otherwise, minus sign. If I set this file and reroute my browser, now you can see the result. It add boder to our CAT image because we have the dash sign in our value section. First, it matched with our attribute name, here we use old after I use this condition, we pass a text image. Cut that portion. This is not the very widely used selector. Now, let's talk about our next attribute selector. Our next attribute selector with dollar sign, attributes ends with value. So let's start the practical and see how we can use this selector. For that, first, I'm going to duplicate this section and comment out previous one. And here, I'm going to use the dollar sign. And in this image, here we use tag, and our image d value end with Image of CAT. So I'm going to copy the last three character, CAT, copy, and I'm going to paste it here. After set this file, if I deod my browser, you can see the result. There is no changes in this result. Similarly, as you can see in our next image, we have title tag. This time, I'm going to copy this attribute title. So here to type title. Title equal to, and our titles end with GER. So I'm to replace cat with GER. After set this file, and you load my browser, you can see the result. Now it's at Bar to our tied image. Now, this time, I want to select those anchor tag which have the HRF tag and also JPG extension in their well. For that, I'm going to pass HRM. I copy the attribute name and I'm going to paste it here, HD and I want to select those anchor tag, so here I'm going to remove image, and I'm going to pass NCN A. With that, we need to pass the end value and our value ensuite dot JPG. Copy the value, and I'm going to paste it inside the double code. And I want to change the font color of this lead. So I'm going to remove this border, and here, I'm going to type color. Color red. After I set this file, if I reload my browser, you can see the result. Oops, our HRF end with GER, or HRDF end with dot JPG. I'm going to use this extension name dot JPG. If I set this file and reload this browser again, you can see the result. As you can see, it add red color to this gata. So this is the selector of end with W now let's talk about our next attribute selector. This is our six attribute selector. Here we can use star sine. If value occurs anywhere in attribute, then it's going to select this element. So let me show you the example. So first, I'm going to duplicate this section and comment out previous section. And here I'm going to use star sign. And this time, I want to target those NCat tag which have target attribute. So to copy the attribute named target, and I'm going to paste it here. And now I want to pass only two character in this value section, and I want to pass AN and I'm going to set this file. After I set this file, if I reload my browser, now you can see it had red color in our second NGA tag because if our target attribute value contained AN character in their value, then it's going to select this Nga tag. I want to say, if this character is available anywhere in this value, then it's going to select this anchor tag. So this is the usage of star sin. Now, let's tag or last attributes selected. So again, I'm going to duplicate this section and comment out previous one. And in our list attribute selector, we need to use tridLSgeE return value matches attribute in space separated list. It's mean whatever value you pass, the value should have space before and after. So let's jump into the Visual Studio code to make it more clear. Again, I'm in my Visual Studio code, and here I'm going to use the TridLSig. And now I'm going to target image. So I'm going to copy the image tag, and I'm going to paste it here. And from the image, I'm going to select the t attribute. So Hemo type. And here, I'm going to pass a value name. For A. If you notice, you can see before the Op, we have space, and up the Op also we have space. So if I set this file, I reload my browser, Uter set this file, as you can see, it's not working because how we use colored property. We need to use boer Border, and I'm going to type three pixel, and I want solid border. With that, our border color is real. And I'm going to comment out our previous P Barty name Cull. If I set this file and reload my browser again, you can see the result because we have spaces before and after the off. Similarly, if I use the same Al tag in our next image, I copy the All tag, and I'm going to paste it here. And this time, I'm going to type image of tiger. And set this file and load my browser. Also, you can see it add border to our tire image. But what? If I remove space up of upper of character, I want to set this file again. And alert my browser. And after alert my browser, as you can see, it removes boater from the tiger image because we should have space ater and before of character. So this is how we can use those attributes selector. I hope now it's clear for you. So you already learn about simple selector, combinator selector, and attribute selector. From the next tutorial, we are going to start poseido classes and positive elements. So thanks for watching this video. Stay tuned for our next tutorial. 12. CSS Pseudo Classes Selectors Tutorial Part 1: Hello, guys, good to see you back. Once again, I'm back with another tutorial related advanced CSS. And in this tutorial, we are going to learn CSS poseido classes. In our prehest tutorial, we talk about we have to tell what type of selector, simple selector, combinator selector, attribute selector, postuto classes, and posto elements. And we already learn about simple selector, combinator selector, and attribute selector. In this tutorial, I'm going to cover possuo classes. So let's see how many positoglss we have in CSS. Here you can see total 32 poseido glass. It includes our old posto classes, also the advanced posto classes, which is introduced in CSS three. Let's start the tutorial with first child and last child poseido glass. And remember, to use posto class, we need to use the column sign. So without wasting your time, let's start the practical. As you can see, side by side, I open my visual studio code editor and my browser using Lip server extension, and I already create an stable document named index dot M. And in our document, as you can see, first, we have a unorder list, then we have to three paragraph. Then again, we have nodal ist. Also we have two paragraph. From here, we are going to start our first child and last child prositoclass. And now I want to target the first LI tag which is inside the UL tag. I want to target the first child. For that, I'm going to tie LI, then we need to use colon and after colon, remember, we don't need to provide any space after colon. Otherwise, we food the colon. Then we need to pass the Posidocla name, which is first child. Then inside the Cards, here I'm going to use a CSS property named color. Color y. If I set this file, as you can see, we have total to unorder list in our document. This is the first nodal list, and this is the second unorder list. We have total to first child in our unorder list. If I set this file, here you can see, it's changed the background color up to first child of unwaal list. First, it colored the first list item from the list one and then it color the first list item from the list two. If you notice, you can see our LI tag inside the UL tag. I tag is first child of UL tag. Similarly, if I to get this section and comment out the previous line, and now I'm going to change the tag nine. Here I'm going to pass P means paragraph tag. As you can see, we have multiple paragraph tag in our document. If I set this file, there is no changes. I do not change the phone color of paragraph tag, but the question is why? Because our paragraph tag is not the first child. Here we directly use the paragraph tag inside the body tag. We do not use any dip tag otherwise any other time. That's why paragraph is not our first child. But if I move the paragraph tag inside the deep tag, in that case, it's going to work. Let me show you. Here I'm going to type Deep tag. D. I'm going to book this three paragraph inside this deep tag. Up set this file, now you can see the result. Now it colored the first child element of our paragraph tag, which is inside the deep tag. At the opposite way, we have last child element. If I type last child hair, then set this file, now you can see different result. Now it select the last child of this deep element, which is a paragraph. At the same way, if I pass tag here, i and then set this file, now you can see it target lust element from both the unwodal list. Now I want to select the lust element from the last one. As you can see, the last child select the lust element from the unwodal list. But this time, I want to select the last element from the first unodal list. For that, here we need to pass the list ID. So I'm going to duplicate this section and comment out previous lines. Here I'm going to type hashtag, our list one IDNme is list. If I set this file, now you can see the result. Now you can see it target the last LI element from the list one. I hope now it's clear for you what is last child and what is first child. Now, let's talk about in child and Nth last child. From here, I'm going to remove the last child and I'm going to replace last with N child. Then here we need to use the round braces. In the first child selector and the last child selector, we can target only the first one, otherwise, last one. But in our NhLd selector, we can target the specify one. Suppose I want to target the third child. Inside the round recess, you need to pass three. If I set this file, you can see the result. So here we select the particular child using the index number. At the same way, if you want to target the fifth one, yes, we can. Just her to pass five and set this file, and you can see the result. Not only that, in the roundress you can perform some calculation. Suppose I'm going to pass two N. Basically N represent the serial number like one, two, three, four, its mean it going to multiply two into zero, two into one, two into two, this way. Apres this le you can see the result. It target one ater one. First, it's going to multiply two into zero and two into zero equal to zero. That's why you do not select the first one. Then two into one, two into one equal to two. That's why it select the second one. Next, two into two and two into two equal to four. That's why you select the fourth one. So the same way, is going to select the child elements. As you can perform some other basic calculations. If you want to experiment with that, yes, you can. Now, let's talk about last child. I want to get this section and comment out previous one. And I'm going to type in it last child. It is also work like in Gil, but it's going to start from the last of this list. Let me show you. So here I will type two and then set this file. After set this file, as you can see, it select the second last element from our list. Basically, I want to say it's from opposite direction. I hope now it's clear for you what is in child and in it last child. Now I'm going to talk about in it last of type and IO type. Here I'm going to duplicate this section and comment out previous one. I'm going to type least N of Ti. Then inside the roundresses here I pass two. This time, I want to select from the paragraph. Here I'm going to type P. After s up this file, as you can see, as you can see, first it select the second child element, which is from the deep tag. These paragraphs have their parent tag. But what? If I scroll down a little bit, now you can see in our last two paragraph, we do not use any parent tag, but our th of type also select the last paragraph. But our enthrop type selector can select those paragraphs which have no parent element. Basically, I want to say, it can select element from the parent element. Also, it can select those elements which do not have parent element. For better understand, I'm going to remove the deep tag. If I set this file, now, our paragraph tags don't have any parent element. So if I set this pile, as you can see, it select the second paragraph from our tal document. Just you need to remember it can select element without parent. Now, let's talk about it last stop type. Again, I'm going to duplicate this section. And comment out previous section and HemotypeN last. Basically, it's going to select element from the opposite direction. After step this file, you can see the result. I select our second last paragraph from our document. Now, let's talk about another positive class on child. This selector works when you have only one child in your parent element. Let me show you. Again, I'm going to select this section and duplicate this section and comment out previous lines. And I'm going to type on the LI tags, I here I'm going to run our new new positive selector, which is only child. If I set this file, as you can see, it did not select any element from our list because our LI tags are not only child in our UL tags, but what? If I remove all of this. Now you can see we have only one child in our UL tag, and then set this file, you can see the result. Now it's select our element perfectly because we have only one child in at least one. But if I type anything inside this UL tag, suppose hero type is pan tag, and then set this file. Now you can see you do not set the child because it work with only the single child. This is the usage of only child. If there are a sibling of this child, then it's not going to work. I hope now it's clear for you. This is it for this tutorial. I don't want to make this video too much long. So at the next part of this tutorial, I'm going to cover Ono type, first of type, last of type, empty, not lag. So thanks for watching this video, stay tuned for our next tutorial. 13. CSS Pseudo classes Selector part 2: Hello guy it's good to see you back. Once again, I'm back with another tutorial related Css poseido class selector. And we're going to start our tutorial from this selector, only Op type. In our previous tutorial, we already learn about some poseido selectors. Without wasting your type, let's start the practical. As you can see side by side, I open my salts to your codaor and my browser using lip server extension, and I open my previous estimate Dopomin index two dot HTML. We are going to start with only Op type. He type only of type. If I set this file, you can see nothing. Now the question is, what is the meaning of only Op type? Suppose in our list, we have multiple LI tags. I'm going to comment out most of the LI tags. Now we have only one LI tag in that list. After I set this file, you can see the result. It's select the LI tag which is inside our first order list. Now you might think it is pretty similar with only child Selector, but it is not. In only child Selector, if you use any other tag like span tag, span, hemo type P. Then you set this file, it's not going to work. But with only up type, if you set this file, it also worked. As you can see, here we use only Op type with Ali tag, and in our UL tag, we don't have any it tag. We have only one LI tag. But if we get this line and then set this file, now it's not going to work because now we have multiple LI tag. If the LI tag is only O type in this UL, in that case, it's going to select. So if I remove this line again and then set this file, you can see the result. Now it's select our list item. Similarly, if you use it with span tag, let me show you. I want to replace AI with span. Span. Before I set this file, again, I'm going to duplicate this span tag and set this file. Now you can see, we have to do two span tag, but it did not select any of one. But what? If I remove one span tag, if I remove one span tag from this list and then set this file, you can see the result. Now you can see it select the span tag. This is the usage of only type of selector. Now let's talk about first of type and last of type selectors. It's mean the same type of tag first and last. Let's start with practical. At first, I'm going to get this section and comment out previous lines. And here I'm going to type Foptype. If I set this file, as you can see, it select the span tag, but now I want to use it with LI tag. So I'm going to type I. After set this file, now you can see it select the first LI tag in our list at the opposite way, last top type work. If I do this line and comment out previous section and here I want to replace first with last. Then s up this file, you can see the result. Now it's select the last one, and in our list one, we have only one li tag. That's why this one is count as last and first also. Now, let's talk about our next lectter which is empty. It is used to select the empty element. Let me show you. So first, I'm going to uncoven these lines and to beg this section and comment out previous section. And here, I'm going to create a deep element before the list one. D. Not only that, I'm going to create multiple deep. I'm going to duplicate this deep to tine, and in our second deep, here I'm going to type some text. Low rib ten, and I'm going to set this file. But our first DF and last DV is completely empty. This time, I want to target our empty D. How we can target this empty deep? Let me show you. For that, I'm going to type beep colon empty. Then inside the coal resis, here I'm going to use a property name border, border three pixel, and I want solid border. With that, our borer coolor is red. If I sub this file, you can see the result. You can see in my browser, this is our first de border. Then come the deep with content because our second dV is not empty. Then come the third de border because our third div is empty. Our deep was empty. That's why our border stick with each other. But if I add some padding, let me show padding five pixel and then set this file. Now you can see the result. But be careful if you use empty selector, because it is also count space as a character. Let me show you. In our third a, here I'm going to provide a space. You can see our third if is empty, but here I provide a space. If I set this file, now you can see it do not have any border in our third dive because here we use a space. Now let's talk about our next Posido selector naught. If we do not want to target this specify class otherwise specified tag, then we use not selector. It's going to target other elements, but it's not going to target the specified element. Let me show. Now again, I invite visual studio code hit, and here you can see, we have to tell five paragraph tag in our document. I'm going to select all of this paragraph element. For that, I'm going to type P, then at the tali races, I'm going to add color. Color, red, and I'm going to set this file. Up to set this file, as you can see, you select all the paragraph tags. But in our second paragraph tag, as you can see, we have a class named taste. I don't want to select this paragraph tag. For that, we need to use not PosidoClass. Here I want to type P, colon, naught. So inside the class, I'm going to select the particular class named taste, dot, taste. If I set this file, you can see the result. Now you can see it select all the paragraph tag, except the second one because her use not positoCAss and specify the paragraph using its class name. Now, let's talk about our next posito class Lang. Lang stands for language. If you want to target any particular language in your web page, in that case, you need to use this select. For that example, as you can see, we create a different estim page name Langt TML, in our body tag, here you can see 23 different paragraph. First one is English language. Second one is French language, and third one is German language. To declare this language, here we use Lang attribute. Now I want to target this paragraph using their language. For that, we need to use Lang procedure selector. First, I want to target French language. For that, I'm going to tie P, colon, and I'm going to use Lang class. Line. Then inside the round presses, I'm going to type the shot from, which is FR. Inside the Class, I'm going to change the paragraph color. Color read. After I set this file, you can see the result. You can see in my browser, it targeted the French paragraph. Similarly, if you want to target the German, so I'm going to pick this section again, and I want to target German. For that, here you need to pass DE. If I set this file, you can see the result. Now we target the third one because our third paragraph is in German. So this is the usage of language selector. And now I'm going to talk about link posto class over Posidoclass, visited positoClass and active Posidoclass. Basically, the posto plus are used with ange tags. And also you can use over and active with other tags. Let's see how we can use it. Again, I'm in my with the studio code editor, and as you can see, here we create another estable document named ling dot HTML. And as you can see, we have a unwodn list, and inside this unordered list, we have some LI tags. And these LI tags are led a NGA tags. And to style this NGA tags, we can use for pseudo classes. So these are all links. So I want to color all the links. For that, I'm going to target all the ancha tags in UL A, colon link. Then inside the colors is, I want to set color red. And I want to set this file. Up to set this file, as you can see, it convert all link in red color. And now I want to change the color when I over my cursor on this link. For that, I'm going to duplicate this section, and I'm going to tie A colon Her. And when I hover my cursor, I want green color. After set this file, when I Ober my cars on this link, you can see it convert our text color into green and you can use Obert Posito class with any tag. You can use it with paragraph, deep tag, span tag, et cetera. I know you are already familiar with that. Our next Posito selected is visited and you can use visited with only on anchor. I want to duplicate this section, and here I'm going to type at visited here I'm going to use blue color. Visited mean you already click this link one time, and you can see in my browser, all the tags are red because I do not visit any of the link, so I'm going to click Contact TAs. So whenever I click on ContactAS, as you can see, it converts all the NCT tags visited because I hope I did a mistake. As you can see, I am in my link dot TML page, and in our contactus Anctag we redirect our web page, index dot TML page. And I set this file and I open this file without using Live Server and you can see the file location in URL section. Now this time, again, I'm going to click Contacts. I'm going to click this link. After I click this link, as you can see, you reict to our another page. But if I click on Back button, now you can see this contact us page is visitate. I hope now you can understand how we can use VisitatePosdo class. Now, let's talk about another Posidoclass which is active. I'm going to dulgate this section and I'm going to tie a colon actin. Then inside the round processes, I'm going to change the color. Here I'm going to use pink color. I'm going to set this file. I'm going to rewrote this page. Now the question is, what is the usage of active Pozo class? As you can see, whenever I open my Carter on it, you can see our link changed the color, but I do not click on this link. Now I'm going to press click on this link. I'm going to press right click on this link. As you can see, I still hold my right click on this link. It's mean, our link is active. Until I release my right click the link is still acting. It's mean, whenever I click this O link, it's going to active this link and change the text color of this link. This is the usage of active class, and whenever I release my right click button, then it's back to the visited color because I click this link. This is it for this tutorial from the next tutorial, I'm going to start target focus, check, disable enable, required optional et cetera. Thanks for watching this video, stay tuned for our next tutorial. 14. CSS Pseudo classes Selector part 3: Now, Hello guy, it's good to see you back. Once again, I'm back with another Tutorial relatate CSS PosEoClasses, we are going to start our journey from this Posero selector. Target, Target PozioGlas selector. This PosidoGAss is very useful with anchor tag. Let's see how we can use it. As you can see, side by side, I open my visual studio code editor and my browser using light server extension, and I already create an estimate document named index dot HTML. And you can see in our unordered list, we have total three anchor tag, DML CSS JavaScript, and in HDF section, here I use IDs using hashtag. This means I want to target and redirect to particular section of this web page. These are called same page link. Otherwise, we can call it internal linking. And as you can see in our paragraph section, we use the similar ID for these paragraphs. So whenever I click on this TML link, then I want to highlight it the particular paragraph tag related TML. At the same way, whenever I click JavaScript, then I want to highlight in the JavaScript paragraph. For that, we can use target PozioCAs. Let me show you how. Suppose I want to target the P element, P colon and I'm going to use Target PosidoLss. Target. Then inside the car labs, I'm going to change the background color of this particular paragraph. Background and I want red color background. I'm going to set this file. After I set this file, you can see nothing in our browser. But whenever I click on the particular link, suppose I want to click CSS link. I'm going to click on CSS. After I click on CSS, you can see the result. It highlighted the particular paragraph related CSS because this link and the paragraphs link with this ID named CSS. Similarly, if I want to highlight the Javascript portion, yes, I can. Now the question is, what is the process that ing recognize this ID? As you can see in my URL section, after DML, we have an ID, Hazteg JavaScript. Whenever I click on CSS also you can see the ID is changed. Now you can see now the link is hashtag CSS. Similarly for DML. Target method, recognize this ID from this URL bar. I hope now it's clear for you how we can use Target PosidoClass. Now we are going to talk about poseido glass focus. Here you can see all the PosidoGlass in pink colored. These are all work with input forms. I'm going to try all of these in our AtableFm. Let's start the practical and see how we can use it. And we're going to start with focus. So as you can see, side by side, I open my visual studio code editor and my browser using Lifesaver extension, and I already open a HTML document name from dot HTML. In our body tag, as you can see, we have a from. And in our from we have different input type. For first name, we use input type text, and for last name, also use input type text. With that, we said required because we cannot leave it blank. Similarly, at the same we have your H, but its input type is number. In our H section, you need to pass the numbers. Also, I set a limit to this input section, minimum limit, ten years and maximum limit 20 years. So you need to pass Value between them. Our next input section is email section. Here we use input type email. Our next section is hobbies, and these are all check box input type. Next, we use your gender, for your gender, her we use input type radio. These are all radio buttons. L to use CLG box. If you click on this drop down, you can see a lot of country names. This is a Seleg box and these are all option of this select box. By default, we select none, and at last, we have a submit button, input type submin. So let's start with focus p zero class. Inside the style section, here I'm going to type, and I'm going to use focus with input tag. Input. Whenever we focus in input, then inside the colss I want to add border to this particular input section, border to pixel, and I want solid border. With that, our boder color is red. After sep this file, whenever I click on any input section, I want to click on last input section. If I click on this input field, as you can see, it add a border to this input field. But the problem is we cannot see the red border color. I'm going to increase the border width. I want five Pi solid border. If I set this file and click on any input field, you can see the result. It add red colored border to this input field, but it is not going to work on checkbox and radio button. This is the use of focus PozioClass now I'm going to talk about check Pozio class. This posito class work with checkbox and input type radio box. Let's get to the visual studio code. For that, I'm going to get this section and comment out previous line. Here I'm going to use input, check our positoGlass is check. Then inside the round dresses, I'm not going to use border property because borders do not work with checkbox and radio buttons. Here we need to use box shadow box shadow. I want to set box shadow, zero, zero, zero, and I want three pixel. With that, I want red colored. From Ss and Xs, I take zero pixel and for opacity, I take also zero. If I set this file and over my cars up check box and click the check box, you can see the result. It at the box shadow in our at check box. Similarly, if I click on radio buttons, you can see the same result. Whenever I uncheck this button, you can see it removed the box shadow. Now I'm going to show you a beautiful trick. For that, I'm going to use a community selector, and we are already learned about it in our previous tutorials. Here I'm going to use a adjacent selector using plusine. Then I want to add the tag name and our tag name is label. Here I'm going to comment out this line and also I'm going to add another property named color, and I'm going to set color red. I'm going to set this file. So whenever I click on any checkbox, it's going to select the next label. It's going to select the exact next label, which is next to the checks box. Let me show. So if I click on music check box, you can see the result. It apply fun color CSS to our label. So I hope nuts clear 40. What is the usage of check PositoClass? Now, let's talk about our next to PositoClass, which is disabled and enabled. So let's see how we can use it. So as you can see, all inputs are enable. And now I'm going to disable our first name using ATM. So indeed input section, here I want to type disable. After step this file, you can see the result. We cannot type anything in this input field, but we can pass input in our other input tags. So first, I'm going to comment out this section. And there I'm going to add border to this input field. Here input type is text. I'm going to type input, then I'm going to use square *** inside the square sis, I'm going to mention input type, and we already learn about it in our previous tutorials. Here I use attribute selector, type type equal to inst the single codes, I'm going to pass the typename, which is text. Then inside the Cariss I'm going to set a border. Border three pixel, and I want solid border. With that, our boderclor is y. After step this file, you can see the result. But the problem is, it said border to our disable button. Our first input field is disable, but our second input field is enable. Now I don't want to add border to our disable button. For that, I'm going to use a positioglass enable. Let me show you. I want to add boder only the enable input field. After square resis, I'm going to type colon enable. If I set this file, you can see the result. Now you can see it only add the boder in our last name input field because this is the able input field. Similarly, if I duplicate this section and comment out previous one, this time, I want to add boder in our disable input field. He type disable. And set this file. After set this file, you can see the result. Now it's at the border in our disable input field. This is the example of enable and disable Posidoclass. Now, let's talk about two other posito class, which is required and optional. If any input field is required, then you can target this field. And if the input field is optional, also you can target this field. Let me show you the example. As you can see, our first name and last name field is required, but in our email field, I do not use required attribute. So now I want to target this required field. So I'm going to picker this line and comment out previous section. As you know, required field is very important. If you try to submit this form without field required input, there is going to showing masses. Please fill in this field. You cannot submit the form without fill this input field. Before I start my CSS, I'm going to remove the disable attribute, and I'm going to save it again. Here I want to remove this section and I'm going to type input and I want to select the required. Then if the input field is required, then said about this border. Also, I want to add background color. Background, and I want background color green. If I set this file, you can see the result. As you can see, we successfully select the required input fields and we also style these required input fields. Similarly, at the opposite way, we have another Pozio class, which is optional. I'm going to comment out this previous section, and here I'm going to type input optional. If the input field is optional, then you can see it going to apply CSS properties, which input field is optional. Using this poseroGlass, we can target those inputs section which is optional, which is not mandatory to field. Now let's talk about two other Posidoclass, which is in range and out of range. This Posido classes work with only input type number. So here you can see in our H field, here we use input type number, and also you can see in our estimate, input type number. With that, also we set minimum and maximum value for this input field. We cannot take more than 20, also we cannot take less than ten. So if anyone tried to pass 30, in that case, our input section are not going to take this number. So now it's out of range. For that, we have PositoGlass, which is in range and out of range. So let me show you how it works. Here I'm going to type input in range. And I want to use border and background color red, and I'm going to set this file. Whenever I pass value 10-20, then it's not going to show any color because now our input in range. But if I pass a weak value, suppose 60, now you can see our CSIS is gone because this value is not in range which I specified to handle the out of range value, also we can reflect another Csis properties. Let me show you how. For that, we need to use out of range pseudo class. First, I'm going to remove the border section. I don't need it. Then I'm going to get this section. And this time, I'm going to type out of range, and here I'm going to say it background color, red, and I'm going to set this five. By default, as you can see, our H input field is green. So if I pass ten, 11, then it's going to return in range positocls properties. But if I pass nine, now you can see it's changed the background color. Now our number is out of page, you can warn your user if they pass wrong input. So this is it for this tutorial. In the next tutorial, I'm going to cover the remaining Posidoglasses. So thanks for watching this video Stune for the next tutorial. 15. CSS Pseudo classes Selector part 4: Hello, guys, good to see you back. This is another tutorial related CSS poseudoglass selector. In this tutorial, we are going to learn the remaining posto glasses. So we are going to start with Read only and readwrite PosidoGlass. In our estimLPm, if we use read only attribute, then we can just only read this input section. We cannot write anything in this input feed, and readwrite mode is default mode. Let's back to the visual studio code and try to understand what is the usage of the two select. So as you can see, side by side, I open my isalts Studio code editor and my browser using ipserverEtension, and I already create an estimate document name from dot ten. So in our first name input field, if I click on it, as you can see, here we can type the content. But if I use read only attribute, so herald type, read only. This this file, now you can see our first name input field is not isible. But whenever I click on it, and if I try to input, data is not going to work. We cannot fill this input field with data, but also we can pass default value here. Let me show you. He type value, and I want to pass the name at one. I'm going to set this file. After set this file, as you can see, automatically, it had a default value in this field. But whenever I try to remove this default value, I cannot because we have only pernon to read this input field, not right. Now I want to select this input field using PosidogAss. For that, we need to use read only positoglass. Smaltype input. Colon, read only. Then inside the clivrass first, I'm going to say the border. Border, I want one pixel border, and I want solid border and our bottle color is red. If I set this file, you can see the result. We successfully can target read only field using read only Posito class. But if I duplicate this section and comment out previous one and I want to type input, read write. Read and write. Then set this file, you can see different result. Now it's select the other input field because read write is the default mode of input field. Now let's talk about our next to posito class, which is valid and invalid. We use these posito classes if our input type is email phone number. I want to say when input field required a valid value, then we can use these classes. Most of the time we use invalid class. Suppose if someone typed wrong email, in that case, I want to show warning to this input field. Let me show you the demonstration. Here you can see we have input field named your email. We are going to target this input field and apply both the classes. At first, I'm going to duplicate this input section and comment out the previous input section. Then herramuty input, colon invalid. After set this file, as you can see, it add border to our last name input field. But the question is why? Because in this input field, we use required attribute, so we cannot leave it there. For now, I'm going to remove this required attribute and set this file age, and then I'm going to increase the border pixel, five pixel and set this file again. Now you can see whenever I click on this input field and try to add email as you can see, it a red border color. But if I use add the res sign and type a proper email, something like gmail.com. Now you can see it remove the red border because this is now a valid email. It is a valid email format. If we do not pass the valid data in our input field, in that case, it's going to return the invalid properties. If I remove the.com, you can see the result. Again, it adds red colored border to this input field. I hope now it's clear for you how its work. Now I'm going to use valid class. I'm going to begin this section and here I'm going to type input type valid. Here we use valid pasito class, and I'm going to type green color. I'm going to set this file. After set this file, valid class play the opposite role of invalid. If we pass a valid email, something like add one, add the red gmail.com. As you can see, it's still apply green border color. Whenever you use the.com and fills the condition, now you can see it apply red border color. So I hope now it's clear for you. Most of the time we use invalid posto glass. Again, I'm going to comment out both this section, and now let's talk about our next Posido selector. Our next PosidoGlass is default. It's work if the value is already exist and we can use default glass with three things. We can use it with checkbox, otherwise, input type radio and third one is option type, which we use inside the select tank. Let's jump into the isalt studio code and see how we can use it practically. As you can see in our form, our checkbox are unselected. But whenever I relate my prom, otherwise, open first time, then I want to check one of the option. Then we can use the default class. I'm going back to the hobby input field and by default, I want to check travel. Here I'm going to type check. And I'm going to set this file. After set this file, as you can see, when I reload my browser, by default, it checked travel option. Now inside this style section, I'm going to use the default class. Here I'm going to type input, colon, default. Then inside the Cali resis, I'm going to use a property named box shadow box shadow. Box shadow, zero, zero, zero, and I want three pixel. With that, I want red color box shadow. After I set this file, you can see the result. It target the default value, which is already selected, and also you can use the default option with radio buttons. Now I'm going to do this Sen in our select box in Botext section. As you can see in our country, we have to dull four country name, USA, India, UK, and German. In our select tag, by default, herramter slate to one value. After India, I'm going to type select it, and I'm going to set this file. So to set this file, whenever I click on this Dp down section, as you can see, it's not working. No, it's working, but we cannot apply box shadow in our select tags. Let me show. Here, I'm going to add color green. Then set this file. After set this file, if I open this dp down option, still it's not working. Let's use it with particular tag nine. I'm going to be this section and comment out previous one here I'm going to type option. If I set this file and open this dot brown, now you can see the result. Now you can see it's changed the font color of default wel, which is India. Now, let's talk about our us positoclass. Our us posito class is root. We already use root posito class in our previous tutorial. When you says is variable, we use this class. We use this class to declare variable. I'm not going to explain it a if you want to learn about it, go to the variable section and watch this video. Thanks for watching this video, stay tuned for our next tutorial. From the next tutorial, we are going to start pseudo element selector. Stay tuned. 16. CSS3 is() Pseudo Class enhanced: Good to see you back guys. In this tutorial, you are going to learn a new Posito class name is posto class. Suppose we have a deep with ID ABC and inside this deep, we have a paragraph. With the same way, we have another deep ID X Y, and inside this deep, we have another paragraph. And now I want to change both the paragraph color. Both the paragraph are in inside the different p element, but maybe we have some other paragraph in our website, but specially, I want to change the paragraph colors. To select both the paragraph, first we assign the ID, then we select the particular paragraph which is associated with this D. Then we change the color. This is our old method, and to create this method, we need to type multiple lines. But now we have es poseido class to make this multiple lineup code in a single line. Something like that. First, we need to use poseido selector E, then inside the round ress we need to pass both the D ID, and then outside the round ress we need to pass the element, which element I want to target, and which element come on between them. So here we pass P, then inside the colors, we need to use the CSS property. So this kind of code reduce our CSS file size. Also it increased, and also it increased page speed. So without wasting your time, let's start the practical and see how we can use it. And also, I'm going to show you other variants of this poseido class. So as you can see, side by side, I open my results studio code editor and my browser using Lifesaver extension, and I already create an estim document name index dot t. So at first, I'm going to say the est. So inside the body tag, at first, I'm going to take a DV and our deep name is taste one, taste one. Then I'm going to duplicate this Dev and assign a new ID to this deep which is taste two. So inside the taste one Deep, I'm going to assign a heading tag H one. So in our first dhading, I'm going to type section one. And in our CND heading, I'm going to type Section two, Section two. Then I'm going to take another heading in our taste one D, and I'm going to use heading two. And here I'm going to type subheading. Then I'm going to type paragraph tag, P, and here I'm going to pass a dummy paragraph, lower, and I'm going to pass two word. And after this paragraph, I'm going to take another heading tag, which is H three. And here I'm going to pass subheading two. Then I'm going to take another paragraph. P. And in this paragraph, I'm going to pass and herald type, um five. Then inside the test two D, I'm going to add a little paragraph. Low T. I'm going to set this file. After set this file, you can see the content in my browser. And now I want to add a horizontal line between these two D. For that, Healtype HR. As of this file, you can see the result. Now I'm going to show you the old method. I want to change all the heading color inside the taste one. For that, we need to select it multiple time. Let me show you how. First, we need to select the ID and the Dame is taste one. Then we need to select the element, which is H one. Then we need to provide coma and I'm going to duplicate this line to time. To select H two element, we need to pass H two and to select H three element, again, we need to pass H three. Now inside the color ss, I'm going to use CSS property which is colored. Colored red. If I sub this file, you can see the result. It changed all type of heading color from our taste one D. But the problem is, we need to type three line of code, and now I'm going to make it one liner using his Psitoglass selector. Let me show you how. Again, I'm going to type our ID name, taste one. Taste one. Then we need to use is Positro selector. E. Then inside the round verses, we need to select the element name. Our first element is H one. Our second element is H two, and our third element is H three. Then inside the colses, we can select our property, and our property is color. And this time, I'm going to use green color. If I set this file, you can see the result. Basically, it override our old property with new one. If I comment out all of this section and set this file again, you can see the same result. Now, we don't need to type our ID name multiple time. Just we need to use is Po zero selector. Now, let me show you another example. For that, I'm going to add another heading tag outside the deep tag, H one, and I'm going to type outside heading. And I'm going to set this file. As you can see, we have heading tag inside taste one Dev, taste two Dev and outside DD. Now, I decide I want to select this heading tag, which is inside the taste one and taste two. I don't want to select the outside one. For that, I'm going to duplicate this section and this time, I need to tie up es we need to use round dress. Then inside the round dresses, we need to pass the ID name. Hashtag taste one. Taste one comma hashtag taste two. After that, I want to select only heading one tag. I'm going to remove these round dresses and I'm going to type H one. This time I want pink color. After I set this file, you can see the result. This is the second method that we can use is Positroselector. This is how we can select the particular heading which has come from taste one and taste two. But if you're not easy, as you can see, it cannot select the outside heading. Now I'm going to show you another example. Here I'm going to create a complex select. For that, I'm going to use Is Posidoselected to time. Suppose I want to select all the paragraph, which is from taste one and paste two. For that, again, we need to use is Posidoselected. So I'm going to duplicate this section and comment out this section. And here I'm going to tie up tar E. Then in the round resists, I'm going to select the elements, which is H one, comma, and paragraph P. If I set this file, now you can see the result. Now you can see with the heading, it also applied color in our paragraphs. And now I'm going to show you our other example. In this example, I'm going to show you how we can use Over selector with is Positoselector. For that, I'm going to duplicate this section and comment out previous section. And I'm going to remove this one. And here I want to Hober in our paragraph. So first, we need to type the element, which element I want to hover. I'm going to type P. Then Colon, will need to pass the HoberPosito selector, which hober. And I'm going to set this file. After I set this file, if I Her my Carr on this paragraph, you can see it changed the font color. So this is how we can use Her selector with is PozioSelector. So these are four different examples that how we can use is Posido selector. So thanks for watching this video. Stay tuned for our next Tutorial. 17. CSS has Pseudo Class : Hello, guys. Good to see you back. Once again, I'm back with another Positoselector. This time we are going to cover CSS has PosidoClass. It is another new positoclass in CSS. Now let's try to understand what is hash PosidoGAss. To understand it properly, let me show you an example. As you can see, we have put two element. Here we have protolT heading one element. As you can notice both the taste inside this tag, hello world is same. But in our first heading tag, here we use span tag. We move world inside the span tag, and now I want to select the element, which one have this span tag. In our case, our first H one element, this tag because here we use span tag, but in our St. H one element, we do not use this span tag. Using Span tag, we are going to select the parent element of this span tag. In our case, H one tag. It is a parent selector. It's going to select the first heading one element. So how can we use it? Let's talk about its syntax. First, we need to tip H one, the main element I want to select, then we need to type colon, has. Then inside the Rundss we need to pass this child element. In our case, span. Then inside the Calviss you can implement the CSS properties. If there is span tag inside the heading one tag, then it going to select the heading one. Otherwise, it's not going to select the parent element. Here, the target element is H one tag and the such selector is span. Then inside the calivs you can apply any CSS property. In our case, here we apply takes decoration underline. And it's going to add this underline in our first H one tag. So let's start the practical and see how we can apply it. So as you can see side by side, I opened my Visual Studio code editor and my browser using light server extension, and I already created TML document name index dot TML. Now, you can see in our body tag, here we have prot two H one tag, but in our first H one tag, we have Span tag for this word world. And also we have two paragraph tag. And in our first paragraph tag, here we use bold word, B, bold tag, this one. But in our second paragraph tag, here we do not use any child element. Now let's jump into this style section. Here, I'm going to type style tag. Style. Inside this style tag, I want to select only this heading tag which have the child element span. For that, we need to type H one colon. Then we need to use hash p zero class has. Then inside the round resis, here we need to type child element name. In our case, span. Then inside the Cariss we can use CSS property such as if I tie color, so I'm going to change the font color of this heading one and I want to make it red. Then set this file, you can see the result. Using child tag, span, here we select the parent elemate. At the same way, you can select the paragraph tag because in this paragraph tag, her use bool tag inside it, B. I'm going to get this section and this time, I want to select the paragraph tag, P here I'm going to search for B tag, bold, and I'm going to set this file. After I set this file, you can see the result. Not only that, here we can pass multiple tag at once. Suppose with bool tag, I want to search span tag, and here I'm going to add span tag, span. And inside the span tag, I'm going to put this word. If I set this file, then it's going to apply the same CSS in our second paragraph. Let me show you. Suppose set this file, you can see the result. Now the question is why? Because as I told you, here we can pass multiple tag. Now it's going to search those paragraph who have B tag inside it and span tag inside it. That's why it select multiple paragraph tag. Now, let me assign a class to this paragraph tag. Class and HendtyO. In our second paragraph, I'm going to add an ID. ID two. With that, also, I'm going to use class one. I'm going to satisfy. Now, I'm going to select the paragraph, otherwise elements using its class name. Here we target the element using tag name, but this time we are going to target the element using class name. Yes, we can do it using this Posido class. Let me show you how. So here we type one, Colin hash. Inside this PosidoClass selector, I want to target span span tag. Then inside the color recess, I'm going to use property, text, decoration, underline. Also, I'm going to assign the same class in our first H one tag class, and I'm going to pass one. Now if I set this pile, here you can see the result. Now you can see it's those class who have the child span tag. Here you can see here we use same class name in three tag, H one tag or first paragraph tag, and in our second paragraph tag, we use the same class name, one, one, one, but in our first paragraph, we don't have the spend tag inside it. That's why we do not select it. But in our second paragraph, we have this pen tag inside it. That's why it select this paragraph and de underline. At the same way, it select the first H one tag because in this H one tag, we have this pan tag. So this is how we can use this poseido class. And remember, also we can apply advance selection inside it, such as direct child selector, and many more. But I'm not going to show all of it in this tutorial. But let me show you one advanced selector. So here, amtype deep tag, DV inside this deep tag, amotype section. And inside this section, I'm going to put our first deep element. Then here, I'm going to tie another deep tag. Inside this deep tag, here, I'm going to pass our second dip element. I'm going to move this element inside this deep tag. Now I'm going to cont out all of the selection I'm going to save it. After that, here, I'm going to use direct child selectron. Here you can notice in both the deep element, we have the H one tag. But in our first element, here we use section before the H one tag. Now, let's create a has pasito selection. So type D semicolon hash. Inside the round recess, I'm going to type H one. Then inside the Caris here I'm going to change the background color, type background red. Now, as you can see, both deep element had the same H one tag, but I want to select those deep element who have direct child selector, direct child h one tag, such as this one. As you can see, in our first div element, after this dip tag, we have section tag. But in our second div element, we have directly H one tag. So here, I'm going to use dichl Selector, this one, and I'm going to set this file. After I set this file, here you can see the result. Here select this second dip element because inside it, we have direct child selector H one tag, but in our first div element, we have section tag, then we have H one tag. That's why it select this one. So this is how we can use Hash Persio Selector. I think now it's clear for you. Thanks for watching this video Say tuned for our next Tutorial. 18. CSS Pseudo Element Part 1 : Hello, guys, good to see you back. Once again, I'm back with another tutorial related advanced CSS. And in this tutorial, we are going to learn CSS poseto element. In our previous tutorial, we learn CSS poseido glasses. In our previous tutorial, we already know we have to tell what type of CSS selector category. Simple selector, combinator selector, attributes selector, Busudoglasses, and posto element selector. I already cover all of these in our previous tutorial, except posteto element. So today in this tutorial, I'm going to cover posito element. Let's see what type of positive elements we have. As you can see, we have total six type of posito elements up before, first letter, first line, selection, and place folder. And in this tutorial, I'm going to cover only the four selector, first letter, first line, selection, and placeholder. And we are going to learn up and before at the next tutorial. So without wasting your time, let's start the practical. So as you can see, side by side, I open my Visual Studio code editor and my browser using if server extension, and I already create an estimate document named index dot HTML. And our estimate document start with a paragraph and Adalis then again a paragraph. So I'm going to apply first letter and first line in these paragraphs. So let's start it. So I want to select the paragraph son type element name P. Then I'm going to use colon sine, but we need to use colon sine two t. For positive elements, we need to use two t. Then I want to select the first letter, summon type, first letter. Inside the calibraces, I'm going to use a property in colored. Color y. Also, I'm going to increase the font size. Font size. Here I'm going to say it 32 pixel. Up step this file, you can see the result. As you can see in our web page, it applied this CSS first letter of this Panagram. It changed the font color of this letter. As it increase the letter size. At the same way, if you want to select the first letter AI element for that, just you need to replace P with AI and this this file. Up step this file, you can see the result. This is the use of first letter element. Now, let's talk about our second element, which is first line. For that, I'm going to date this section and comment out previous section. And here I'm going to tie, I'm going to select the paragraph P, and also I'm going to tie first line. If I set this file, you can see the result. Here you can see it apply this style, the first line of this paragraph. Now, let's talk about our next element selector, which is selection. This is introduced in CSS three. Let's see how we can use it. First, I'm going to comment out this section and then I noticed this one. If you notice, you can see, whenever I select my paragraph, you can see our text color become white and the background color become blue. This is called selection. If you want to change the background color, otherwise, any property after selection, then you can use this element selector. Let me show you how so first, I'm going to select P element. Then Clal colon, I'm going to type selection. Selection and inside the round presses, our first property is background. Background and the background color is red, and our second property is color. Color, why? If I set this file, upset this file, if I set this paragraph element, as you can see, now our background color become red and text color become white. This is a users of selection element. But if I select the LI tag, then it's not work. I decide to apply the selection CSS to all of this web page. For that, just you need to remove the tag name P, you need to use colon codon selection. Ala this file. If you select paragraph and LI tags, you can see the result. As you can see, it apply red background color and white text color. This is our selection element work. Now, let's talk about our last positive element, which is older. For that, I'm going to duplicate this section. And comment out previous section. I'm going to set this file. Basically, placeholder work with a stable from. That's why I opened my previous stable Dpment which is front dot table, and you are already familiar with this stable from. As you can see in this from, we do not have any placeholder in this fro, here I'm going to add a placeholder. In our first name input section, here I'm going to use a placeholder placeholder, and I'm going to type Enter your name. Similarly, I'm going to add the placeholder in our last name section. So I'm going to copy the placeholder and type it here and place it here and Hemo type enter your last name. Also, I'm going to add a placeholder in our section. So I'm going to type placeholder and here I'm going to pass 15 and I'm going to set this file. After set this file, you can see the placeholder in our input tag. And whenever I try to fill any input, it remove our placeholder. This is the usage of placeholder. Now I want to style this placeholder. For that, we need to type colon colon placeholder, and then inside the calibraces, I'm going to apply the CSS. Color and I want red color. After I step this file, you can see the result. It apply red color all the placeholder text. I hope now it's clear for you, what is the usage of placeholder? In the next tutorial, I'm going to go up and before element selector. Thanks for watching this video, stay tuned for our next tutorial. 19. CSS Before and After Pseudo Elements: If. Hey, guys, good to see you back. This is the second tutorial relatate CSS element selector, and in this tutorial, I'm going to cover CSS upturn before Posidoselectors. In our previous tutorial, we already learn about first letter, first line, selection, and placeholder. In this tutorial, I'm going to cover up and before. But before we need to learn how actually upper and before Posidoelector work. In this document, as you can see, we have a paragraph. Now I'm going to style this paragraph using upturn before. First, I'm going to select the element name paragraph. Then colon colon. I'm going to type before. This is before element selector. Then in the Cali versus our first property is background. Background read. With that, also, I'm going to change the font color. Color and the color is white. I'm going to use the hexavaluHtag FFA. If I set this file, nothing going to happen. Now the quotient is how it actually work. Here you can see a paragraph. Most of the developer think Ara means after the paragraph tag and before means before the paragraph tag. No, it is not like that. Before mean the first child of this paragraph. Up to before, then our paragraph start. Before is the first child of this paragraph. At the same way, atar is the last style of this paragraph. When the paragraph content is over, then come the apta tang. Both the elements are inside the paragraph tag, not outside the paragraph tag. Let's see how we can actually use it. But before we dip dip into it, you should know to use upar and before, we need to use a csus property name content. Without content, we cannot use upturn before Clectron. Inside this before selector, I'm going to use another csus property which is content. Content. Here you can pass any text, any image, any URL, whatever you want. Here I want to type a text. I'm going to use double codes and I'm going to type hello. Now, if I set this file, you can see the result. Before our paragraph start, it add this word hello at the same way, I'm going to create upper selector. I'm going to duplicate this section and I'm going to type upper. Inside the Doble course, I'm going to type world. If I set this file, you can see the result. By the end of this paragraph, it a world. Let's reduce the font size. Here I want to type font size 30 pixel, and I'm going to set this file. Now you can see the result. Now, these are all child element of paragraph tag. Basically, we create two element using before and after selector. And if you want to use it as a D element, yes, you can. You can set high d width to this element, et cetera. I'm going to type this play, display block, and I'm going to use the same property in our upper section. This play blah. After set this file, you can see the result. Now it's at a Demin. Also, if you want to add height and width, yes, you can. I'm going to type height, height, 100 pixel. If I set this file, you can see the result. Now, let me show you another example. For that, I'm going to comment out this section and also I'm going to remove this property. With that, I want to use Over effect. B, C and Over. If I set this file, as you can see, this is just a paragraph. But when I open my cursor on this paragraph, you can see the result. As you can see, now it's appear the upper element world and whenever I remove my cursor, now it's disappeared. This is a good example of upper poco select. Remember, you can use after and before procedures selected with any tag. You can use it with paragraph, anchor tag, deep element, cetera, whatever you want. But there is exception. You cannot use it with image tag. You need to remember that. I hope now it's clear for you. Thanks for watching this video, stay tuned for our next tutorial. 20. Marker Pseudo Element Tutorial : Hello, guys, good to see you back. Once again, I'm back with another tutorial related Advancess and in this tutorial, we are going to learn a new posito element, which is called marker. We are already familiar with these posito elements after before first letter, first line, selection and placeholder. In this list, it had a new positive element, which is marker. At first, let's try to understand what is the meaning of that. Here you can see in order list and we have some foods name in this list. Now I want to change the color of these dots. What do we used to do to change the color of this dot? We just assign a LI tag a new color and we call this process marker, but we cannot separate the text color from the marker color to solve this kind of problem, CSS introduced, Marker Posido class. Let's start the practical and see how we can use this new posito element. As usual, side by side, I open my results studio code editor and my browser using Lip server extension, and I already create an estable document named index dot HTML. As you can see in my browser, we have nwterlist and WADA list. Also, you have War List. Now I want to separate the marker color from the text color. For that, we need to use the Marker Posito selectord. Here I'm going to type colon colon marker. Then inside the color resis, I'm going to say it color. Color and I want to say it red color. If I set this file, you can see the result in my browser. Here you can see in my browser, it's changed the marker colors. Whatever least type we use, is going to apply it all of these. But now I decide I want to change unwaters marker color. For that, here I'm going to tie UL unwaer east AI. Inside the under list all the LI tags, I want to apply the marker poseido selector. If I set this file, you can see the result. Now it apply the marker color, only the under list. Remember, for now, this marker selector only support one CSS property, which is color. You cannot increase the marker size using this selector. Maybe it could support in future. This is it for this tutorial. Thanks for watching this video, stay tuned for the next tutorial.