CSS Complete Guide (incl. Animation, Flexbox, Grid & Sass)

1. Class Intro: Hello, and welcome. My name is Jet Shokar. I am Full Stack Web Developer, freelancher and online instructor. And welcome to Webcourse CSS Complete Guide. This is the most complete, well organized and beginner friendly course for web developers who want to learn CSS. I'm not going to explain you why CSS is important. Because you are here, you already know about it. So this is one of the most complete courses about CSS. Here you can learn about CSS animation, flexbox, greed, and SAS. Till today, I already upload 19 hour plus content. Also, it's come with 171 video List. We are going to start with basics about CSS, such as background color, border, outline, padding, et cetera. Next, we are going to learn all the text properties, all type of background properties. We are going to learn about CSS layout such as display property, visuality, Z index, position, media queries, stable, et cetera. Also, we are going to learn about CSS units, functions, variables, and many more. After that, we are going to jump into the advanced selector section. Yes, we are going to learn CSS advance selector, such as combinator selector, attribute selector, positoselector, and many more. And then I cover some advanced CSS topics, such as input rule, scroll behavior, aspect ratio, ascent color. Next, we are going to learn CSS animation. Then we are going to jump into the CSS grid, CSS ex box, and at last, we are going to cover CSS preprocessor. We are going to learn CS. As I told you, this is the most complete course about CSS. And if you want to interested to learn CSS in details, then we can start our journey from the next lesson. Thank you so much. 2. What is CSS: Hello, friends, welcome. From this tutorial, we are going to start CSS three. This is the first tutorial related CSS, and in this tutorial, I'm going to give you the introduction of CSS. The full name of CSS is Cascading Style Sheet. And we use cascading style sheet we DML. Without TML, it is not so useful. First, you need to create TML structure, then you need to use CSS to style the structures. Now you might have quotien why we learn CSS. The basic use of CSS is styling the TML tags. Suppose you take any paragraph tag, otherwise, you create Davil otherwise, any deep tag, and now you want to feel color to these tags, otherwise, giving padding, merging, border, et cetera, we can do with CSS. We can do all type of styling in our ATML tag with CSS. We just creates structure using ASTML and we handle this styling part using CSS. And next we use CSS for responsive website. Responsive website introducing CSS three. Now you might have ion, what is responsive website? Suppose you create a website layout for desktop resolution, and then you want to open the same website in your tablet and mobile. In that case, CSS going to play the key role. It's going to change your layout design according to device resolution. And the third most important use of CSS is animation on web page. Using CSS three, you can animate any TMS structure, and the fourth important usage of CSS two D and three D transformation of AT elements. You can rotate the element, you can change the perspective. Also you can play with Z index, et cetera. And the fourth important point is, it's make our web development process very fast. Now you might have tied how it made our website very fast. Let me show you. So here you can see, we have a CSS file at the center, and around the CSS file, we have total seeks Stable document, as like homepage Outer page, contact page, gallery, et cetera. So now we can style all the TML document, otherwise, all the estimate files from the single CSS file. If you notice any website, their header, their footer, their sidebar, everything is remained exactly same. Just to change the content inside the page. Suppose you want to change background color of your website. You want to use red background color in your web pages. For that, just you need to change one time in your CSS file. Once you change the background color in CSS file, it's going to reflect on every TML document. But if you want to do it without CSS, for that, you need to use BG color in your TML tags, and you need to do the same thing in your ETML file for six time. One by one, you need to open all the TML document and you need to change the background color. And it is very lengthy and irritating process. Now, let's talk about what kind of software we need to learn CSS. Basically, we need to t two software, a CSS editor, and a browser. For that, you can use any TML editor, like Note plus plus, Visa studio code, atom, et cetera. Basically for this tutorial, I'm going to use Vs code Editor. But it is up to you what editor you are going to choose. So this is it for this tutorial. So thanks for watching this video, stay tuned for the next tutorial. 3. CSS Implementation Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS three. And in this tutorial, we are going to learn how we can implement CSS in our stbL document. Basically, we have total three way to implement CSS with a stable. The first and easiest way is inline style. Using inline style, you can directly use CSS in your stable tags. Just you need to assign style attribute in your stable tag. And the second method is Impage style tag. Inside your table document, you can use style tag to implement the CSS. And at the third way, you can create external style sheet for your CSS code. This is the most popular and effective method. Here, we need to create a separate CSS file, and we link this file with stable tags. Now let's try to understand what is Inland style method, how we can use Inland styling method. As you can see in this example, we have heading one tag, and inside this heading one tag, we have a text. Welcome. And now I want to change the font color of this text. For that, we are going to use Inland styling method. First, we need to use style attribute inside this heading one tag. Then we need to assign CSS property, in our case, color, and then we need to provide the value and the value is green. And if you notice, as you can see, we separate property and value using colon sine, and we end our line with semicolon. At the same way, if you want to add another property, yes, you can, something like that. Suppose you want to increase the font size. For that, you need to use this property, font size, colon, and you need to provide the value, which is 15 pixel. So this is the inline styling method. We use CSS code directly in our estamL tag. Now you might think this is the good process, but it is not. It's worth when you have little amount of estamL tag because when you have lots of estable tag, then it's not possible to style all the tag one by one. Yes, you can, but it is not a good habit. Because whenever you need to change any property or a value, then it's very difficult to find out the property. Also, it creates our page very lengthy and heavier. And to resolve this problem, you can use Impage style tag. As you can see in this example, this is the basic structure of table. If you like to go in Impage style tag, then you need to use style tag inside the head tag. Now we can use all the CSS property inside the style tag. And one important thing you need to remember, you can use style tag on the inside the head tag, not anywhere else. Then inside this style tag, we need to take a selector, something like that. Suppose you want to select this heading tag and you want to change the font color. In that case, you need to target this heading tag using its tag name, H one. Then inside the Caliss you can use property and value. Now it's going to apply green color to all the heading one tag. If you have multiple heading one tag, it's going to select all of it. For now, in our body tag, we have only one heading one tag, but this method also come with a disadvantage. Suppose you have ten a stable file, then you need to do the same thing in your every stable file. So this is not the best way to implement CSS. Now, let's talk about the most popular method, which is external style sheet. In this method, we need to create a separate CSS file. Then to create this CSS file, we need to define property and value using the LPOp selector. Suppose here we create a CSS file, style dot CSS. To create the CSS file, we need to use this extension dot CSS, and then need to link the CSS file with our Tamil document. Inside the head tag, here we need to use Link tag. Link tag is specially used for this purpose. It is used to link CSS document. Inside the link tag, we need to use some attribute. Our first attribute is RL. RL stands for relation style sheet. Then we need to declare the type of this file, which is text CSS. It's means the file format is text and style is CSS. And this is the most important attribute, which is HRF. In this attribute, we need to provide the file path. HREF stands for hyperlink reference. And here you need to provide the exact filename, otherwise, file path. So this is the best method to use CSS. Using this method, we can connect one CSS file with multiple estimL documents. So this is it for this tutorial. In our upcoming tutorial, we are going to learn about it practically. So thanks for watching this video, Statue. 4. CSS Color & Background Color Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS three. And in this tutorial, we are going to learn about CSS color property and background color. We use color property to change text color, and to change the background color of any element, we use background color. It could be any tamale tag. It would be a paragraph, deep tag, table, et cetera. So without wasting your time, let's start the practical. As you can see, side by side, I opened my Visual Studio code editor and my browser using Lip server extension, and I already created TM document named index dot TML. As you can see in our body tag, we have a heading tag. And in this heading tag, here we type, hello world. If you notice, you can see in my browser, by default, the color is black. Now I want to change the foreign color. For that, here I'm going to use inline CSS method. So here I'm going to type style, style attribute, then I want to use this CSS property named gull. Color, and I want to assign red color red. If I set this file and learn my browser, you can see the result. Now you can see it changed the font color of this text. Here you can take any color name. Suppose you want green color, to type color name. And then you just set this file, and you can see the result in my browser. And remember, we can use different formatted color Vdo. We can use hexavalu argv value, argv value et cetera. If you search for websp color, let me show you and open any page. Here you can see the xa value of this color. With that, also it provides RGV value. This is called xA Value and this is called argv value. If I copy this value and rip this green with with this xa number and then set this file and back to document, now you can see the result. It turn our font color into light green color and it's barely visible. So let's change the color. This time, I'm going to use this pink shade color. So I'm going to copy this hexa value. And I'm going to replace this hexa value with it. After I replace the set the file and back to the document, now you can see the color. Remember, hexavalu come with always says digit code, but it start with a tag sine. As I told you, CSS support multiple color format. It support Hixadcimal colors, ixa decimals colors with transparency, RGB colors, RGBA colors, HSL colors, HSLA colors. We're going to learn about it all in our upcoming tutorials. But for this tutorial, I'm going to use hexa Valu otherwise color name. Next, I'm going to create a paragraph, P. And inside this paragraph, I'm going to add some dummy text. So I'm going to type Loren. 20. Basically, it's going to add 20 word of paragraph with dummy text. And I'm going to set this file. After I set this file, you can see the paragraph in my browser, but I'm going to duplicate this paragraph. So I'm going to select this paragraph and I dubigating. At first, I'm going to set this file, and then I'm going to change the paragraph font color. So this is our first paragraph. So to change the paragraph font color, here I'm going to use Ilenss method. So to type style attribute, and I want to apply color. Color and I want green color. Step this file, you can see the result. And also, I want to add a background color to this paragraph. For that, after semicolor here you need to type background color. And I want background color lou and I'm going to set this file. Ustep this file, as you can see, it add a background color to our first paragraph, and I'm going to do the same thing to our second paragraph. So I copy the attribute with value and property. And also, I'm going to paste it in our second paragraph. And this time, I'm going to use another color. This time for background, I'm going to use red color. And for fond color, I want to use white colour. After I set this file, you can see the result. Using background color property, we can change any element background color, and using color property, we can change only the font color, and you need to remember that. And now you decide you want to highlight this constructor word from the first paragraph. For that, you need to use Span tag. You need to move this word inside the span tag. Let me show you how. So here, you need to use span tag. Spat. And inside the span tag, you need to move this word, otherwise the sentence. And then you need to sify and to highlight this word, you decide you are going to change the background color of this word. For that, again, you need to take style attribute. Style and again, you need to use background color property. Background color, and this time you want green background. Green. If I set this file, you can see the result. But there is a problem. You font color and your background color is same. That's why now your font is not visible. For that, you decide you are going to change the font color now. You are going to change the font color of this portion, constructor. So here, you can use the color property. Color, and you decide you are going to use white color. Why? After step this file, now you can see the result. So this is how you can use colored properties and background color properties. Basically, in this tutorial, we use in Lenses method. In the next tutorial, we are going to learn about basic selectors. So thanks for watching this video, Statute for the next tutorial. 5. CSS Basic Selectors Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS three. And in this tutorial, we are going to learn CSS basic selectors. When we work with impage method, otherwise external CSS file, then basic selectors are very useful and it is not useful for inline styling methods. So let's see how many types of basic selectors we have. We have total three types of basic selector. We can select element by tag name, by class name, and by ID name. Now, let's see how we can select element by tag name. This is the example of tag name selector. We can select the element using a stable tag name. Suppose I want to select all the heading tags in our webpage. For that, just on to type H one, then we need to use Cariass. It's going to select all the heading tag in your web page. Similarly, if you want to select the table tag, otherwise, deep tag, just you need to put the name and then you need to use Cariss. Then inside the calices, you can pass your property and will. Suppose you want to assign red font color to your heading one tag with that you want to set the font size, 15 pixel. Then we need to pass this property and value inside the class. This method is called tagNem selector because here we use the estabal tags to target the selector. But there is a little problem with this selector. If you have multiple table tag, otherwise, multiple deep tag in your web page, in that case, it's going to apply all the properties to all of this deep tag. Now let's talk about our next basic selector, which is class selector. As I told you, suppose we have multiple H one tag, but you don't want to apply this property all op. That case, you can use class name selector. For that, class name selector is very effective. So how we can use it, let me show you. So as you can see here we select a class name header. To select the class, you need to use dot sign. Up a dot sign, you need to pass the class name. In our case, header. Then inside the calres you can use your CSS properties. And to assign this class in your TML tag, you need to use class attribute. Suppose here you use a deep tag, then inside the Dip tag, you need to use class attribute. Equal to inside the double course, you need to pass the class name. You can choose your own class name anything. Now, whatever CSS you use is going to apply on only this deep element because this deep element assigned header class. Now, let's talk about class selector name specification. We have some limitation to use Classes. Let me show you. This is the first method that you can use class. And this is another example that you can use class. Here you can see up to dot, we use total two word, least hyphen menu. Yes, you can use hyphen sine. Also, you can use asco sine. With that, also you can use camel case. But one most important thing you need to remember, you cannot assign, otherwise provide any space between two words. If you use space between these two words, then in that case, it's not going to work. So you need to remember this important thing. Now, let's talk about another selector, which is ID selector. It is pretty similar with class selectro. Just want to use HTAgSign before the ID name. In our case, Hateg mean. Using hastag our CS is going to identify it's an ID. And this is the example that how we can use ID selector. As you can see, we have an nor list, and in this unorder list, we assign an ID. ID equal to mid to assign this ID, we need to use ID attribute. So now you might have question. What is the difference between ID and CLS selector? ID should be Q. You can use ID selector one time in one web page. You cannot use same ID multiple time, but you can use same class selector multiple times. If you want to use thousands of times, yes, you can. Now the question is, why is that? Because some elements are created for only one time. In a webpage, we do not create a header section multiple time. We create it only for one time. That's why we use ID for that. Basically ID assign this element a unique identity. So that's the basic difference between them. Now, let's talk about some descendant selectors. It is pretty advanced and next level selector. Suppose you have hundreds of Anca tag in your website. It could be anywhere in your header section, content section, sidebar section, footer section, nebr section, et cetera, but you want to target those cat tags which is inside the header section. Otherwise header element. In that case, we need to use this kind of ads selector. This is the parent select header, and as you can see, it's an ID. Then I want to target all of this anchor tag, which is inside this header section. So I provide a space and target and target the anchor element. At the same way, if you want to target all of this paragraph, which is inside the list item, for that, you can use this one. As you can see, this is a class, least space, I want to target all the paragraph which is inside the list element. And in our last selector, we target this particular UL tag, which have menu ID. Then I provide a space and target all the LI tag which is inside this particular UL tag. I know it sounds confusing. Don't worry about it. This is just beginning. I already created particular chapters for these advanced selectors. Now just forgot about it. You don't need to remember anything. Even I do not try to remember all of these things. When we work with it, then we search for it. This is just basic introduction video of CSS selector. So thanks for watching this video. Stay tuned for the next tutorial. 6. CSS Border Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we're going to learn about CSS border property. Why we need to use border property? CS's border have some properties. Our first property name is border with our second property name is border style, and our third property name is border color. Using CS's border with property, we can control the border with. We can make it two pixel, one pixel, otherwise 100 pixel also. And using border style property, we can change the border style. It could be dotted, dashed, we have total ten different border style, and we are going to learn about it in this tutorial. And using our third property, we can assign any color to our border. Let me show you an example of this bottle. As you can see, we have a deep element. And in this deep element, we have a paragraph. But outside the paragraph, we have a red border. This is the example of border. If you want to create this kind of border, then you need to set border with two pixel. With that, you need to type border style solid. This is a solid border. Solid border provide you the straight line, and our third property is border color. As you can see, our border is red color. So this is how we can use this property and create an border. Now, let's talk about border style. As I told you, we have to ten different style of border. CSS provide total ten border. First border is solid. Second border is dotted. Then come das, then double. Next, grove. Then we have raised border. Next, we have inset, then outside, none and mix. So these are the border style that we are going to learn in this tutorial. Now let's talk about border shorthand. As you can see in this example, here we use total three different property of border with style and color, but I don't want to use three different line. I want to do it all the things in a single line. For that, Cs border have shorthand, and this is the example of shorthand. Just you need to type border property, and then you need to provide the values. First, you need to provide the border width. Then you need to provide the border style, and last, you need to provide the border color. Now you don't need to type three different line for this job. Now, let's talk about a different topic. Suppose you want to assign a border only to right side. In that case, you need to use border right property. And if you want to use only bottom, otherwise only left, then you can use these properties. So these are all border related properties that I'm going to cover in this tutorial. So without wasting your time, let's start the practical. As you can see, side by side, I opened my Visual Studio code editor and my browser using lip server extension, and I already created an TML document named index dot HTML. As you can see in this page, I will create a H one tag, heading tag, and also you have total two paragraph. Now I decide I want to give a border to this heading tag. For that, I'm going to use Impage styling method. So inside the head tag, I'm going to use style tag style. And inside this style tag, first, we need to select the heading one tag. In our previous tutorial, we already learn about some basic selector. We learn about tax selector. So here, I'm going to use a Stimaltax selector, which is H one. Then inside the oliver says, I'm going to use border properties. First, I'm going to assign border with property. Border We border with, and I want to assign two pixel border. Two pixel. Our next property is border style. Border style. Border style, and I want solid border. Solid. And our last property is border color, border color, and I want to assign red border. Right. After set this file, you can see the result. Here you can see it add a red border to the heading one tag. We can use border property in any Astb tag. It could be table, paragraph, LI tag, whatever. Now, let's do some experiment with this value. Suppose I want to increase the border we Some type five pixel. If I set this file, you can see the result. It increased the border with up to five pixel. Now it's very visible. And now I'm going to show you different border style. First, I'm going to show you dotted border style, some remove solid and type dotted. After step this file, you can see the result. This is the example of dotted border style. Now our border made with dots. Now, let's talk about another border style, which is dash. So I'm going to remove dotted and type dash and set this file. After step this file, you can see the result. Now our border made with dash. Next border I'm going to apply, which is double. It's going to provide double borders. Double and set this file. Let's zoom the pace in little bit. I hope now it's clear for you. Now it provide double border style. Next border style that I'm going to apply, which is groove. If I set this file, you can see the result. Let's zoom the fine little bit. So this is called group border style. If you notice you can see it looks like a picture frame. Basically, it provides little three D view, and next border that I'm going to apply, which is raised. Raised and set this file, you can see the result. It's quite similar with Group. Just it opposite the light direction. Next border that I'm going to apply, which is inset. If I set this file, you can see the result. Basically, grouped, raised, inset, outset, both the border style provide three D view. These effects are depend on the border color value. Now, let's talk about another border style which is none. As you can see, there is no border. None value define no borders. Our next and last border style is mix. For mix we do not type the name. Just to provide the values. Let me show you how. Here, first, we need to provide the top value, then right value, then button, then lift. So at top, I want dotted border, dotted. At right, then I provide space, and at right, I want dashed border dashed. And at bottom, I want solid bottle, solid. And at left, I want double bottle. Double. If I set this file, you can see the different result. Now this border made with mixed border style. At top, we have dotted border. At right, we have dashed border. At late we have double border, and at bottom, we have solid border. So this is how mixed border style works. Now, let's talk about shorthand method, how we can use shorthand method and type all the things in one single line. So first, I'm going to comment out all the lines, then I'm going to type border property, border. As I told you, at first, we need to assign the border with. So I'm going to assign to pixel border. Then we need to provide border style, which is solid. With that, we need to provide the border color. And up to space, I'm going to use boercolor green. And I'm going to set this file. After step this file, you can see the result. Now we don't need to type three line to achieve this result. We can do it with a single line. Now you decide I don't want border all the direction. I want to border at bottom position. For that, you need to use different border probity. I'm going to comment out this line, and here, I'm going to type border bottom border bottom. And I want three pixel border. With that, I want solid border, solid, and our border color is ray. If I set this file, now you can see, now it assigned border on the at bottom position. Similarly, if you want to assign border at right position, yes, you can, you need to change in property. Now into type, border, rack. If I set this file, you can see the result. Now it assigned border at right position. And one most important thing that I forgot to talk about, which is border radius. Suppose I committed this line and I want this border. So I uncomment this line. Now, as you can see, we have solid border. But if you notice, edges are very sharp. I don't want sharp edge in my border. I want to make it smooth. For that, we have border radius purpert Somer tight, border radius, here I'm going to pass, five pixel. If I set this pile, now you can see now our border edges are curved, and you can control the carboness of this border if you increase and otherwise decrease the value. Suppose this time I'm going to pass 50 pixel, border radius, 50 pixel and set this file. Now you can see the different shape of this border. So using border radius property, we can control the border ages. So this is it for this tutorial. In the next tutorial, we are going to talk about outline. So thanks for watching this video, stay tuned for the next tutorial. 7. CSS Outline Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn about CSS outline. What is the usage of outline property? But before we need to learn how many properties we have in outline. We have total for outline property, outline with outline style, outline color, and outline opposite. As like border, we have ten different outline style. Let me show you an example. Here you can see a deep element. And in this deep element, we have a paragraph, and this is the bottom of this deep element. If I say offset value, and if I assign Oset outline to this dip element, let me show you then it's going to look something like that. Here you can see another border outside the red border, and we call it outline. Basically, we use outline to create two different border. Now, if you notice you can see, we have a space between border and outline, and we can assign this space using outline oposite property. And if I talk about outline styles, we have nearly similar styles that we have in border, solid dotted dash double groped raised inset outset nun. Now, let's talk about outline shorthand. Similar to CSS border property, CS's outline also have shorthand. We don't need to use this three line to create outline, only to type one line, but before, just on to use this property outline. After use outline property, we need to pass toro three value. First, we need to pass outline wing, then we need to pass outline style and color. So this is how we can use shorthand. So without wasting your time, let's study practical and see how we can use outline. As usual, side by side, I open my visual studio code editor and my browser using lip server extension, and I already create an estimate document named index dot DML. So as you can see inside this estival page, we have a heading one tag. Also, we have to paragraph tag. Now, at first, I'm going to assign a border to our paragraph tag. For that, I'm going to use style tag inside the head tag style style inside the style tag. First, I'm going to select the paragraph using P tag. Then inside the CarlssO first property nav is border. Border, and I want three pixel border, three pixel. With that, I want solid bot solid. Also, I want to use red color. If I set this file, you can see the result in my browser. Now I'm going to create outline to this paragraph. For that, as I told you, first, we need to use Outline With property. Outline with Outline With, and I'm going to use three pixel. Our next property name is outline style. Outline, style, outline style, I'm going to use solid. And our last property is outline colored. Outline, color, outline colored green. And I'm going to set this file. Upper set this file, here you can see the result. Here you create a outline outside the border, outside the border area. And if you want to change the outline style as you can, if you want to use dotted outline, dot it then you can see the result. So this is how you can use outline and border together. And if you want to provide gap between outline and border, in that case, you need to use a property name outline opposite. Let me show you some type outline opposite, and I'm going to pass three pixel value, three pixel. Up to set this file, you can see the result. It provides little gap between outline and border. If I increase the value, so I'm going to pass eight pixel and set this file, now you can see the result. Now the gap between outline and border is eight pixel. Now, let me show you how can we use the shorthand to achieve the same result. For that, I'm going to remove all of this line. And this time, we need to use only outline probability. Outline. Our first value is outline width, which is three pixel. Our next value is outline style, and I'm going to use solid, and our outline color is green. If I set this file, you can see the result. So this is how we can use outline shorten property. And remember, we can use outline property in Atmel tag. So this is it for this tutorial. In the next tutorial, we are going to talk about padding. 8. CSS Padding Tutorial: Welcome back, guys, once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about CSS padding. Why is padding is most important part in CSS? Now, let's talk about how many propereties we have in CSS padding. We have total four property related CSS padding, padding top, padding right, padding bottom, padding let. But before we need to understand how padding basically work. As you can see in this example, inside this deep element, we have a paragraph. But if you notice, you can see, we have a space between this paragraph and the border. Basically, I talk about this gap, and we call this gap padding. According to this example, the gap between border and paragraph is called paddy. We can control the padding each of the side. Suppose if you want to add same padding in every direction, in that case, you can use the same value. Also, you can use shorthand for that, adding ten pixel. In that case, you don't need to type four line for that. If I provide padding ten pixel, then it's going to assign ten pixel padding each of the side. But what if you use different padding in different site for padding top, you use ten pixel. For right, you use 20 pixel. For bottom, you use 15 pixel and for left, you use 25 pixel. For that, also, you can use shorthand. Just you need to provide total four different value. First, you need to provide the top value, then you need to provide the right value, then bottom, and then libbed value. So without wasting your time and to create this topic, let's study practicum. 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 create an TML document name index dot TML as you can see inside our body tag, we have a heading one tag. At first, I'm going to create a Dip tag inside the body tag. So I'm going to type DIV, D. And inside this dip tag, I'm going to assign a paragraph tag, P. And for paragraph, I'm going to type Loren and I want to add total 20 word. And I'm going to set this file. And now I want to assign a class to this dip. To assign a class, we need to use class attribute class, and I'm going to assign, and our class name is taste, and I'm going to set this file. And now I want to style this deb Element using its class name. For that, I'm going to tie dot taste. There is the liver says, first, I'm going to assign border to this paragraph, border. And I want to add two pixel border. And our boer style is solid. With that, I want black color bored. And I'm going to set this file. For now, you can see in this paragraph, we have a little gap in top side and bottom side. We called it margin, not padding. And we are going to learn about margin and the next tutorial. Now, right back to the topping. So for now, I'm going to remove this paragraph tag. I don't need this paragraph tag and set this file again. Now you can see Bdfaul did not provide any margin to these text. Now let's add some padding, padding, and I want padding ten pixel at every direction. If I set this file, you can see the result. Now, from every direction, it add ten pixel padding. If I increase it, so I'm going to make it 30 pixel and save it again. Now you can see the result. The distance between border and text is 30 pixel now at every direction. Remember, padding, do not spread outside the border. It's spread inside the border. If I set a background color to this div, let me show you some type background color, background color, y. With that, I want to use font color. Color white. And if I set this file, now it's more clear for you, which is the padding area. If I comment out this padding and set this file again, now you can see this is the exact area that our text occupied. But if I use padding and then set this file, now you can see now it adds extra space outside the text area. And now you decide you want to keep different padding in different site. Suppose for top, you want to keep 50 pixel padding. And for right, you want to give 30 pixel patty, otherwise, ten pixel patty. And for bottom, you want to give 100 pixel patty. And for left, you want to assign five pixel patty. If I set this file, you can see the result. From the top side, it provide 50 pixel padding. And from the right side, it assigned ten pixel padding. From the bottom side, it assigned 100 pixel padding and from the left side, it assigned five pixel padding. So this is how paddings work. Now, let me show you another shortened method how you can use padding. For that, I'm going to comment out this line and set it again. Now I want to assign padding. So first, I'm going to type padding, padding and from top and bottom, I want to assign 100 pixel padding. And from left and right, I want to assign ten pixel padding. If I set this file, you can see the result. So this is another shortened method. Here at the first value, we need to provide top and bottom value, and at the second value, we need to provide left and right value. So this is about padding property. In the next tutorial, we are going to talk about margin property. So thanks for watching this video, stay tuned for the next tutorial. 9. CSS Margin Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS three. And in this tutorial, I'm going to talk about CSS margin. It is one of the most useful propriety in CSS. Now, let me show you how it's worked. As you can see in this example, we have a deep tag, and inside this deep tag, we have a paragraph. In our previous tutorial, we'll learn about pad. We already know padding work from inside, but margin is opposite. It is work from outside. I add space outside the border area. Now the question is why we need to use margin? Suppose you want to add another deep below this deep element. In that case, you need to provide space between these two deep. Let me show you how. So this is the example of another deep. And between these two deep, as you can see, we have a space, and we can assign this space using margin. This is one of the most useful property in CSS. If we do not use margin, then both the element overlapping with each other. Now, let's talk about margin properties. How many properties we have in margin? We have to tow four properties, margin top, margin right, margin bottom, and margin lift. It is pretty similar with padding. And if I talk about the short end of this property, then you can use only margin property. If you want to add same margin from all of the direction, in that case, you can use margin, and then you can use the do. Then you don't need to type this four line for that. I reduce your coal. But what? If you need to use different value for all of this direction, yes, you can. Also, you can use short and for that. First, you need to provide to value, then right, then bottom, then lift. Basically, it follow clockwise direction. F stop, then right, then bottom, then lit. Now, margin come with another value, which is auto. We use auto Value when you need to center a deep element in our web page. If you make Auto from lift and right direction and set some to this deep element, then automatically you dip element align in center. 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, we open my salt studio coordinator and my browser using light server extension, and I already create an estimate document named index dot stem. And as you can see in this tamal page, we have a one heading tag and two Deep tag. And inside this dip tag, we have some text. And if you notice, you can see in our first Dip tag, we assign a class name first, and in our second Dip tag, we assign a class named second. Now using this class, I'm going to select this dip element. So inside this style tag, I'm going to select the first class, I'm going to type dot first. Then Madi caribra says, first, I'm going to use border property, border. And I'm going to assign two pixel border, and our border style is solent and our border color is red. Then I'm going to duplicate this section. And rip this first with second. And also, I'm going to change the color name, which is green. If I set this file, you can see the result. Now, if you notice you can see, there is no space between these two D. If you want to provide space, using padding is not going to work. Let me show you. Suppose in our first tag, I want to add padding bottom, padding bottom, ten pixel. And set this file. Now you can see it adds up space from the inside, not the outside. So if you want to add space between these two de element, you need to use margin property. So if you use margin, margin bottom, and then set this file, now you can see it add a little space between these two delement. Basically, it adds ten pixel space, and if you make it 100 and then set this file, now you can see the distance. Similarly, I want to add margin in our second debilment. This time, I'm going to use margin top, I to pass 50 pixel, and I'm going to set this file, margin top 500 pixel. If I set this file, now you can see the distance between deep one and deep two element is total 600 because at our first dip element, we use margin bottom property, and we provide 100 pixel. And in our second dip element, we use margin top probability. Margin top property, 500 pixel. So the distance between first dip element and second element is 600 pixel. For now, I'm going to remove this margin top property. I don't want it and set this file again. Now I want to assign margin lip property in our second DB element. So Hemo type margin, lip, margin lap, and I'm going to assign 150 pixel. If I set this file, you can see our second deep element move right side because at left side, we use 150 pixel margin. And if you want to use shorthand and assign margin from the direction for that, just you need to use margin property. And if you set this file, now you can see the result. From both the direction, it had 150 pixel margin. Now, if I create another deep element below this second deep element, let me show you DIV Dev and inside this deep element, I'm going to type some paragraph Lowm and I want to add 30 word. If I set this file, now you can see the distance between second and 30 element is 150 pixel because her use margin property. Basically, it add margin to our second element from all of the direction. And if you want to add different margin from different direction, yes, you can. Let me show you how. So from top side, I want 70 pixel margin. And from right side, I want 50 pixel margin. And from bottom side, I want ten pixel margin. And from left side, I want 200 pixel margin. If I set this pile, now you can see the result. From top side, we have 70 pixel margin. If I comment out this line and set it again, now it's more clear for you. From top, we have 70 pixel margin. From right, we have 50 pixel margin. From bottom, we have ten pixel margin, and from P, we have 200 pixel margin. Now let me show you another shorthand how we can use margin. So I'm going to do p this line and comment out previous one. This time, I want to assign margin from top and bottom and right and late. So from top and bottom, I want 200 pixel. And from left and right, I want 20 pixel. If I set this file, you can see the result. Now, from top and bottom, we have 200 pixel, and from left and right, we have 20 pixel. Now, let me show you another shot so I'm going to duplicate this line and comment out previous one. This time, from upside, I'm going to assign zero value. And from the left and right, also I'm going to assign zero value. And from bottom, I want to assign 100 pixel. If I set this file, you can see the result. From left and right and top, we have zero value, but from the bottom, we have 100 pixel. So this is our basically merging work. Now let me talk about another property, which is margin auto. Let me show you the example how we can use auto value. So I'm going to comment out this line, and first, I'm going to assign wed to this container because by default, D doesn't have within height. So I'm going to assign N V to this container with 500 pixel. I'm going to set this file. And also, I'm going to increase the pase size and zoom out the content little bit. Now our second D element with is 500 pixel. But if you notice, you can see this DP element not align in middle. I align in lep side. I want to assign equal space at right and lift. For that, we need to use margin autopperty. So type margin from top and bottom, I want 50 pixel, and from left and right, I want or if I set this file, you can see the result. Now from top and bottom, it used 50 pixel margin and from left and right, it use Auto and make it center. Now it becomes pretty responsive. Now you can see also it aligning center. I hope now it's clear for you how we can use margin property. In the next tutorial, we are going to learn about this property, width and height. Thanks for watching this video Sy tune for the next tutorial. 10. CSS Height & Width Tutorial: Hey, guys, good to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we're going to learn about two most important property about CSS, which is height and Wi. As you can see, this is the D, and this is called with property. If you want to increase your deep size, according to the horizontal position, in that case, you need to use with property. And if you want to increase it vertical direction, in that case, you need to use height property. You can use with probability and height property with percentage value, also pixel value. If you want to go with fixed value, then you need to use pixel value. And if you want to go with adjustable with height, in that case, you need to use percentage value. We are going to learn about units in our upcoming tutorial. This method is more clear if we start the practical. So let's start the practical. As you can see, side by side, I open my Visual Studio code editor and my browser using lp server extension, and I already create an TML document named index dot TML. Inside the body tag, as you can see, we have a Deptag with ID name first. So at first, I'm going to select this DP using its ID name. And to select the D with ID, we use HTAgSinHTAg ID Name is first. Then set the ClrasF property I'm going to use, which is WI. With, and I'm going to use fixed weight 300 pix, and I'm going to set this file. If I set this file, you can see nothing in my page. So I decide I'm going to add background color. Background color, red, and set this file. Also, you can see there is nothing in this page because we just set wed, not the height. So I'm going to decide I'm going to assign height to this devilment. Height, 200 pixel. And I'm going to set this file. Now you can see the deep element in my web page. Pixel units are static unit. If I increase, otherwise, decrease the browser height and window, then it's not going to reflect this element because these are all fixed unit. And now I decide I want to assign 50% of browser width to this element. For that, we need to use dynamic unit, which is percentage value. So here, I'm going to remove this static unit, and I'm going to replace with 50%. Don't worry. We are going to learn about this unit in our upcoming tutorial. Now you can see this deep element take 50% of browser we. If I right click on our browser and inspect the element, and change the browser window size. As you can see, according to the browser window size, it's changed the element width because here we take 50% of browser width. At the same way, if you want to increase the width of this element up to 80%, yes, you can just to change the percentage value. And I'm going to replace 50 width 80. And I'm going to set this file. After set this file, you can see the result. But what if we use static value and then change the size, let me show you. So this time, I'm going to use 500 pixel. Now here we use static value. Now we cannot change it dynamically. So if I reduce the browser into size, now you can see our width is not changing according to the browser size because her we use fixed size, and now I'm going to put some dummy takes in this deep element. So her will type Loren, 300, what? If I set this file, now you can see in my browser, our text content overflown from this deep element. If you notice in our style section, here you can see for either height, both the cases we use static value, but our text adjust according to the deep wind. If I increase the Doi, 500 pixel and the set this file, as you can see, again, it adjusts the text, but it is not work pretty well for height, and this is the big issue with height property. You need to use height property when you know your content not going to overflow to this DB element. And if you want to resolve this problem, you need to use minimum height and maximum height property. So this is it for this tutorial. And the next tutorial, I'm going to talk about minimum height and maximum height. So thanks for watching this video. 11. CSS Min height & Max height Tutorial: Hello, guys. Nice to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we are going to learn minimum height and maximum height propriety. Why we need to use minimum height and maximum height probability. So let's study practical. So as you can see, here I open my previous estim document and browser. And you already know that if we use fixed height, then our content get overflow from this container. To resolve this problem, we do not use height property. Without using height property, we would like to go with maximum height and minimum height probability. Let me show you the example. Suppose you have less content. So I'm going to remove some content from this paragraph. Then I will set this file. Now our content is perfectly organized in our deep element, and also we have some space in this container. So for this deep element, our minimum height requirement is 200 pixel. So I'm going to remove height property, and I'm going to replace with minimum height. Minimum height, minimum height 200 pixel. After set this file, as you can see, there is no changes in our shape. But what? If I increase the content little bit, let me show you. Again, I'm going to add more content. Lowm 200. And then set this file. Now you can see the different sul. Now the height increase according to the content size. So we can increase the height as much we want, but we cannot decrease it less than 200 because here we use minimum height property. We say minimum height 200 pixel. So that's the usage of minimum height property. Now let's talk about maximum height property. But before, I'm going to remove all the content from this paragraph. For now I'm going to add some less content, Lowm 50. That's it. Now I decide I don't want to increase the height more than 600 pixel. In that case, we need to use maximum height propriety. So here I'm going to type max height, maximum height, 600 pixel. I'm going to set this file. Up to set this file, as you can see, there is no changes. Basically, I want to say I don't want to increase the height more than 600 pixel. Now I'm going to increase the content size. So here I'm going to type wim 200. Up set this file. As you can see, our deep container height still not reach 600 pixel, so I'm going to add more content. Lower. Here I'm going to add another 300 word paragraph. If I set this file, now you can see the result. Because of maximum height property, our container cannot reach more than 600 pixel. That's why this time our paragraph overflown from this container. So this is the usage of minimum height and maximum height property. I hope now the topic is clear 42. Thanks for watching this video Stay tuned for the next two too dim. 12. CSS Min Width & Max Width Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, you are going to learn two new CSS property, minimum width and maximum width. So without wasting your time, let's study practical. So 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 HTML document named index dot HTML. Inside the body tag we have a heading one tag and a deep tag, and we set an ID to this div element first. Now, we are going to use this ID to style this DV element. So here inside the style tag, I'm going to select the ID. Hashtag first. Then inside the Cirass. So at first, I'm going to assign a border to this deep container. So I'm going to use border property. Border, and I want three pixel border, and I want solid border. With that, I want red color border, y. Upset this file. Oops, it's not working. I think I did some mistakes. Yes. Our ID name first spelling is wrong. First, and save it again. Upset this file, you can see the result. Now I'm going to assign a fixed weight to this DV element. So I'm going to use with ppty We 300 pixel, and I'm going to save it again. Now, let me show you the problem. As you can see in my current working directory, there is an image name Amita dot JPG. So inside this deep element, I'm going to use image tag IMG. With that, we need to provide the image source in our source attribute. And our image name is Amita Amita dot JH. If I set this file, here you can see the result. This is the issue. Here you can see our image width is much more larger than Deid. As you can see, our deep With is 300 pixel, but our image is much more larger. That's why the image overflown from this container. And then I'm going to use image tag. IMG, and inside the image tag, I'm going to set width with 100%. And I'm going to set this file. After set this file, as you can see, it is fixed to this container. But in this tutorial, we are going to learn about minimum width and maximum width. This time, I'm going to use minimum width property. Minimum width and maximum width work together. Let me show you how. So here, I'm going to set minimum width. Minimum wid, I'm going to set 300 pixel. Then I'm going to use maximum width, maximum width, maximum width, I'm going to use 500 pixel. And I want to set this file. After set this file, as you can see, now our deep element becomes 500 pixel wheel. If I inspect this element, let me show you and open my cards on this image, as you can see, image width is 500 pixel and height is 357 pixel because Here we set maximum width 500 pixel. So we cannot expand this deep element width more than 500 pixel. And if I try to reduce the deep element width, we cannot reduce it below the 300 pixel because Hear set minimum width 300 pixel. It is pretty similar with minimum height and maximum height properity. Basically, with this property, we can set upper limit and lower limit. So this is it for this tutorial. In the next tutorial, we are going to learn about CSS box sizing pprity. So thanks for watching this video. 13. CSS Box Sizing Tutorial: Hello, guys. Good to see you back. Once again I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about box sizing. Before I talk about why we use box sizing, let me show you a problem. Here you can see a deep element, and we set with 200 pixel. But this deep come with ten pixel border. After using border, it increased the deep weed. If we use boded ten pixel at left and right, then the total we become 220 pixel. Not only that, if we add padding at left and right, suppose at left, we use ten pixel padding. Also at right, we use ten pixel padding. Now total width becomes 240 pixel, but the actual width is 200 pixel. Because we use padding of ten pixel of each of direction, also use ten pixel border. That's why total width becomes 240 pixel. To resolve this problem, box sizing going to help us. If we use box sizing, then our deep element width become always 200. It's not going to increase the deep element wing. Ultimately, to resolve this issue, box sizing introducing CSS. After using box sizing, the total with would be 200 pixel. And to apply this box sizing, we need to use box sizing propriety, box sizing and Value is border box. Basically, box sizing property came with two value, border box and content box. If we use border box, then we cannot increase the width, whatever we use. If we use padding margin border, also it's not going to increase the with, but if we use content box, then it's going to work as it is. In that case, it can increase the Oi. So without wasting your time, let's start the practical and see how we can use it. 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 Tim document name index dot HTML. And inside this estimate document, we have a deep tag. And inside this deep tag, we have some dummy text. At first, I'm going to assign an ID to this deep element. Dev ID, ID equal to box. Then inside this tile tag, I'm going to select this deep element using its ID name. Has tag, box. Then you set the calices, our first property is we W, and I'm going to say 500 pixel. I want to set this file, and then I'm going to add boder to devaluate. So I'm going to use border property. BderT pixel. And I want solid powder. With that, border color is red. I'm going to set this file. And now I'm going to use padding. After using padding, it increases our width. Let me show you. Padding from each of the direction I want ten pixel. And set this file. After I set this file, you notice it increase the element width. If I inspect this element and how my cards are on this deep element, now you can see our deep width become 524 pixel because 500 is actual width of this deep. And then we have two pixel border of each of this side, so it's become 504. With that, also we have ten pixel padding at left and right. That's why it becomes 524. So this is one of the big issue. If we use border padding margin, it increases the deep width. But after using box sizing property, it's not going to increase the deep element width. Box sizing remain the deep width, what we assign. Let me show you. So here, I'm going to type box sizing, box sizing, and I'm going to use border box probability. I'm going to set this file. After set this file, as you can see, it reduced the deep element weight. Now, if I use padding, 50 pixel, and also I use border, five pixel and set this file. And if I inspect this element and over my car on this element, now you can see it still written 500 pixel weed because we use box sizing Pubert After using padding and border, it do not increase the deep weed. But if you use different value for that, if we use box sizing, content box and then set this file. Now you can see if I open my azar on this element, our width become 610 pixel because A we do not use box sizing property. Basically box sizing property shrink the content size which is inside this box. That's why it maintained the actual. So content box is the default value of this property. So we need to use border box. And after set this file, you can see the result. Again, it becomes 500 pixel. So this is it for this tutorial. In the next tutorial, we are going to learn about CSS overflow property. So thanks for watching this video. Stay tuned for the next tutorial. 14. CSS Overflow Tutorial: Hey, guys, nice to see you back. What's going to come back with a new tutorial related CSS? And in this tutorial, we are going to learn about CSS overflow propriety. As you can see in this example, we have a deep element, and our text overflow from this deep element, and that's the problem. This kind of problem appears when we use fixed height to this deep element. Suppose we use 200 pixel height for this deep element, and whenever we try to insert more than 200 pixel data, in that case, in good overflow from this container. And to handle this situation, CSS introduce overflow properity and it come with four different value. First value that we can use is hidden. We can hide overflow data using this value. Next value is scroll. We can use scrollbar inside this deep element to scroll the overflow data. We can read the data after scroll. It could be horizontally, otherwise vertically. Our next value is auto, and there is minor difference between scroll and auto. The difference between scroll and auto is if we use scroll value, then you can see this scrollbar in this deep element. If there is no overflow data. But if we use autovalu then it show the scroll or when our data is overflow. IB data is vertically overflow, then auto Valu provide vertical scroll word and IP data horizontally overflow, then auto Value provide horizontal scroll word. And the last value is visible. It is the default value. It's going to show the overflow data as it is, and we have to tell three type of overflow properties. First one is overflow and second one is overflow X, and third one is overflow Y. Our first property overflow works in every direction. It works for vertically and horizontally in both. Our next property is overflow X. If you want to control the overflow data at horizontal position, then you need to use overflow X. And particularly if you want to control the vertically overflow data, in that case, you need to use overflow Y property. So without talking too much, let's start the practical and see how it's work. So finally, we are in my visa studio codiitor and as usual, here I create a estimate document named index dot DM. And in this estimate page, we have a deep tag with ID name box. And inside this deep element, we have a paragraph. And now I'm going to select this deep element using its ID name. So inside the style tag, I'm going to use has tag, and ID name is box. Then inside the Cali says, first, I'm going to use with Cupertin with 250 pixel, height 250 pixel. So harrow use same within height. And if you notice, you can see Harrow use fixed height, and with that, I want to assign a border. Border, two pixel and I want solid border with that, our border color is red. And I'm going to satisfy. After satisfile you can see the result. Now you can see our content overflown from this deviliment. And to resolve this problem, CSS introduce overflow property. So first, I'm going to type property name overflow. And first value I'm going to use, which is hidden. If I save this file, now you cannot see the overflow data outside the container. Basically, it hide all the overflow content, but I don't want to hide this data. I want to read this data inside this deep element. For that, we have another value, which is scroll. If I set this file, now you can see inside this dip element, we have a scroll bar. Here we have horizontal scroll bar. Also we have vertical scroll bar. Now you can read all the paragraph inside this dip element. You can scroll up and scroll down the paragraph. If you notice you can see only the vertical scrollbar is active, not horizontally because our content is text. If we insert an image to this deep element, then our horizontal scrollbar also active. And now I'm going to reduce the paragraph size. So I'm going to remove some data. And I'm going to set this file. After I set this file, now you can see our content not going to overflow from this container, but we still have horizontal and vertical scrollbar. To resolve this problem, we have another value, which is Auto. So to remove scroll value and replace with auto. If I set this file, you can see the result. Now we don't have scroll bar in this deb element. But if I add more word to this paragraph, let me show you low M 150 word and then set this file again. Now you can see our scrollbar is a paired again. This time, you can see only the vertical scrollbar, not the horizontal scrollbar. So if we use AutopperT, we can see this scrollbar if our data overflow from this container. Otherwise, it's not going to show the scrollbar. So most of the cases we use overflow auto value. Now, let's talk about the loss property, which is visible. So I'm going to remove auto and type visible. If I set this file, you can see the result. Basically, it is the default value, and it's going to show the overflow data as it is. Now let's talk about other overflow properties. So here I'm going to use overflow. Y? And here I'm going to use hidden value. If I set this file, you can see the result. Now you can see it hide vertically overflow data. But if I pass scroll value, scroll overflow Y, scroll and set this file. Now you can see vertical scrollbar. If you remember, when you use only overflow property, then our scroll value provide scrollbar in both the direction, vertical and horizontal also. But if we use particularly overflow Y and then use scroll value, in that case, it's going to show only the vertical scroll bar. And if I use the data and set this file again, still, you can see the vertical scrollbar. To resolve this problem, if you want to show the scrollbar whenever we have overflow data, in that case, we need to use Auto propriety Auto. Up to set this file, you can see there is no scrollbar. But if I increase the data, smiltp M 150 word and set this file again, now you can see the scrollbar. Now let's talk about another property which is overflow X. So I'm going to remove y and type X. After step this file, as you can see, there is no horizontal scroll bar in this deep element because in this deep element, her use takes data. We don't have data that could overflow at XX direction. And now I decide I'm going to create a deep element inside this inside this box dip element. So HemotypeTV and here I'm going to use inland styling method. So I'm going to use style attribute style. First property is height. For height, I'm going to use 100 pixel. For Wi, I'm going to use 400 pixel. And for background color, background color, I'm going to use red. If I set this file, you can see the result. Now we have horizontal scullr in this dip element because now we have the content that overflow at horizontal direction. So this is how we can use this important CSS property, overflow. So this is it for this tutorial. Thanks for watching this video. Stay tuned for our next tutorial. 15. CSS Border Radius Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we are going to learn about CSS border radius property. We already learn about it in our previous tutorials. But in this tutorial, we are going to learn about it in details. So as you can see, we have a deep element, and inside this deep element, we have some content. By default, this deep element come with sharp corner. But in this example, you can see the curve at the corner, and we can control the curve using border radius property. Border radius come with total four property, border top lip radius, border top right radius, border bottom right radius, border bottom lip radius. And if you want to do the same thing in a single line for that, we have a shorthand, and the shorthand is border radius property. Here you can use all the four value at once. In this example, we have total four different corner. First, second, third and fourth. And if you want to use this shorthand property, then you need to type something like that. For our first corner, we use 20 Bixel border radius. For the second, we use 30 pixel border radius, and for the third one, we use 50 Bixel border radius. And for the last corner, we use ten pixel boerradius. This is just an example. Let's start the practical and 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 ETML document named index dot TML. And in this table page, we have a deep tag with ID name box. At first, I'm going to style this deep element using its ID name. So here I'm going to type style tag, style, and inside this style tag, I'm going to select the box element, has tag box. Then inside the calibrssO first properties with with, and I'm going to say 300 pixel width. Our second property name is padding, and I want to provide 25 pixel pading. Also, I'm going to say the border. Border, and I want pupixl border, and our border is solid. With that, I want black color border. Black. And I want to set this file. After set this file, and you will see the result. And if you notice, you can see all the corners are very sharp, but I don't want sharp corner for the border. So at first, I want to assign border radius top lip corner. For that, we need to use border Top left radius. Border top left radius, I'm going to use ten pixel, and I'm going to set this file. After I set this file, if I zone this page a little bit, you can see the result. At the same way, I want to change the radius of top right corner. For that, we need to use border top, right, radius. 50 pixel. I want to set this file. Up to set this file, you can see the result. And next, I'm going to change bottom right corner radius. For that, we need to use border bottom right radius probability, sum to type, border bottom, right, radius property. And I'm going to pass 50 pixel. I want to set this file. Up set this file, you can see the result. And our last property name is border bottom lip radius. So to duplicate this section, and I'm going to replace right with it. And hemo to say ten pixel. If I save this file, you can see the result. So corner to corner, you can change radius using these properties. But what? If you want equal radius in every corner for that, you can use the shorthand. So I'm going to comment out this line and hero to use another property name border radius, border radius, 30 Pixel. Now it's going to provide 30 pixel radius at every corner. If I set this file, you can see the result. And if you want to assign different radius for different corner, yes, you can. Suppose for top left corner, I want to use 30 pixel, and for top right corner, I want to use 50 pixel, sound pass 50 pixel. And for bottom right corner, I want to use ten pixel. And for bottom lip corner, I want to use 20 pixel. If I set this bile, you can see the result. Now, we don't need to type this four line for that. Also, we have another shorthand. Let me show you how. I'm going to get this line and comment out previous one. Here I'm going to pass ten pixel, 50 pixel. Now you might have cushion. What does that mean? Here we pass total two value. The first botter radius will going to apply, top lip corner and bottom right corner. And the second will going to apply bottom lip corner and top right corner. If I set this file, you can see the result. It's con opposite direction. Not only that, we can use percentage value with border radius. Let me show you how some duplicate this line and comment out previous one. And this time, I'm going to use 20% border radius. If I set this file, you can see the result. And if you want to achieve over shape of any rectangle, for that, you need to use 50% border radius. If I set this file, you can see the result. We can achieve perfect oval shape using this value. And if you want to make a circle using border radius for that, you need to use equal height tenoid so if I use height, 300 pixel and then set this file, and our border radius is 50%, then it's going to create a circle. So this is the detailed tutorial about border radius property. So this is it for this tutorial. Thanks for watching this video. Stay tuned for our next tutorial. 16. CSS Box Shadow Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we're going to learn about CSS, box shadow. So let's see what is box shadow and how we can use box shadow. Here you can see a deep element, and inside this deep element, we have some text. And if you notice you can see, there is no shadow to this deep element. And if we add shadow to this deep element, then it look like that. Here you can see, after using box shadow, here you can see a shadow at bottom and right, and we can create this shadow using box shadow property. Now, let's see how we can use box shadow property. To use box shadow property, total would need to use five value. Every value have their different purpose. The first value stands for horizontal opposite. Using this value, you can define left and right. Basically, it works at Xxs direction. Our next value stands for V opposite, meaning vertically opposite. You can compare it with YXs direction. Using this value, you can control top and bottom side. Our next value stands for blur. You can control the shadow blurriness using this value. If you don't want to use shut shadow, then you can use this value. And the fourth value stands for spread. How much area you want to spread your shadow? You can control with this value, and the fifth and last value is colored. Using this Vu, you can control the shadow color. 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 light server extension, and I already create an estim document name index dot TM. And as you can see, inside this estim code, we have a deep tag with ID name box, and now I'm going to style this element. So I'm going to select this deep using its ID name. So I'm going to use someone to use has tag boobs. Then inside the color resis, first, I'm going to use with property. With 300 pixel. Our next property is height, height, 200 pixel. With that, I want to add some margin. Margin, left, 200 pixel. If I set this file, you can see nothing here because we do not use any background color. So I'm going to add background color, red. If I set this file, you can see the result. And now I want to add box shadow to this deep element. For that, we need to use box shadow property, box shadow, box shadow, first, we need to use XS Valu. So I'm going to pass two pixel, and then we need to pass Y XS Value. Also, I'm going to use two pixel. For horizontal and vertical shadow, we use two pixel. And remember, also, you can use minus values to move the shadow. And then I want to use blur value. For blur, I'm going to use five pixel. And for now, I don't want to use spread value. So directly, I want to jump into the color value. For color, I'm going to use black color. If I set this file, here you can see V result. Basically, after using shadow, it looked like a three D object. And now I want to move the shadow at XXS direction, so I'm going to increase the XXS value. So here I'm going to pass eight, eight pixel. After set this file, here you can see the result. And the same way, if you want to move it downward, then you need to increase XS V but I decide I want to move it upward. So as I told you, we can use minus value here. So I'm going to use minus eight pixel. I'm going to set this file. Up to set this file, now you can see, we move our shadow upward. So this is how we can place our shadow any direction. If I use minus value four exists, now you can see we successfully change the shadow direction. And one most important thing you need to remember blur value, color value, and spread value are optional. If you do not provide, also it going to work. Let me show you. If I remove both the value and save the file, you can see the result. But if you notice, you can see this time, we have a solid shadow because we remove the blur value. So without blur, our shadow is do not look so pretty. So I'm going to add some blur. Three, pixel. And I want to send this file. And if you want to make this shadow sharp again, just to pass zero pixel. That's it. Now, let's talk about spread Value and I want to spread it up to ten pixel. So here, after blood property, after blood Value, I'm going to tie ten pixel, and I'm going to set this file again. After set this file, as you can see, now our shadow spread up to ten pixel. And if I add little blurriness, something ten pixel blur and set this file. Now you can see result. Spread Vallow, spread the shadow at every direction. And if you want to change the color, yes, you can. Suppose you want to use blue color. I know it look very disgusting, but for the example, I'm going to use it. And I want to sub this file. So this is how shadow work. Now, you want to add another box shadow to this element. Yes, you can. Just you need to use coma and you need to provide same values. This time, I want eight pixel box shadow at diction. Also, for YX diction, I'm going to use five pixel. And for blood, again, I'm going to use ten pixel. And for spread value, I'm going to use five pixel. No, I'm don't going to use spread value for this example. So directly I'm going to use color, and for color, I'm going to use black colored. And I'm going to set this file. Up to set this file, here you can see we have another shadow. Here we add another black color shadow. If I increase the value, something 15 pixel, 15 pixel and set this file again, now you can see the shadow very clearly. So this is how we can use multiple shadow at multiple duction. Here you can use multiple shadow as much you want. So this is how you can use shadow property. For now, I'm going to remove this way too. Basically, I'm going to comment out this line. Now let's talk about another value, which is inset. Here you can see this shadow outside the box, but now I want to use the shadow inside the box. So how is it possible? Yes, it is possible if we use inset Vd. So after color property, I'm going to type inset. If I set this file, you can see the result. Now, you can see this shadow from the inside. So this is it for this tutorial. In the next tutorial, we are going to learn about float propriety. So thanks for watching this video. Stay tuned. 17. CSS Float Tutorial: Hewis good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about CSS float property. It is the most useful property in CSS. Basically, without this property, we cannot imagine a website. So let's understand float value with images. Here you can see a deep element. And if I create another deep element, something like that, then it's going to place it below this previous dip element. But if you notice, you can see at the right side, we have a lot of blank space, but by default, it's going to place the D below the previous de element. So we need to move this deep element, this side. I want to place the new de lament, right side of the previous delement. Basically, the first dip element occupy the whole browser wind. That's why we don't have any place for our second dip element to place it aside this deep element. To resolve this problem, CSS introduce float property. Using float property, we can adjust this second dip element right side of this previous deep element, and our float property come with total two value, left and right. For blue deep, we need to use float leaf and for red deep, we need to use float right. And also, we have a default value for float, which is none. So without wasting your time, let's start the practice 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 create an estimL document named index dot TML. And as you can see in this estimate page, we have bit total two deep element, one and two. And I already style this deep element. Our first deep element with is 300 pixel, and our second Deep element with is 200 pixel. But after I create this deep element, as you can see, we have a lot of space at the right side, but by default, CSS this our second dip element below the db one element. By default, our deep elements take complete width of this page, and now we need to remove the unused space using float property. So at our first dip element, I'm going to use float property, float LP. After step this file, as you can see, now you can see our second deep element going background up debo one element. But if I use float value to our first deep right, if I set this file, as you can see, our first element move to the right side, and our second deep element occupy the blank space. But I don't want this structure. I want to place our first deep element at first position, then I want to move our second deep element right side. So here I want to use float, P, and for the second deep element, I'm going to use float right. If I set this file, now you can see the resin, and if I increase the browser width, still, you can see it places our elements ep ten right. Now we have another problem. If you notice, you can see, we have a big space between these two deep element. I don't want any space. I want to move second deep element eb sit next to the Deb one element. For that, we need to use float value t. In our second deep element. If I set this file, you can see the result. Now, we don't have space between these two deep element. Also, they are stick with each other. And now I'm going to give you another example. So I'm going to create another deep element, and this time, its ID is three. Also, I'm going to write the text three. And I'm going to duplicate this section, and I'm going to replace our ID two with three. And I'm going to set background colored bloom. For now, I'm going to remove the float property. I don't need it. And I'm going to set it with 500 pixel, and I'm going to set this file. After set this file, as you can see, by default, it places it behind the DB one and deep two element because this is the third dB element. And if I use float property, float, right, and this this file, now you can see it place it below then deep two because we don't have nup space at the right side to place this deep element because it's with 500 pixel. But if we increase the browser width, then what happened? After I increase the browser width, now you can see, now it places our deep element, right side of this deep two element because now we have enough space to place it here. But what if you want to place it below the one and two deep element, let me show you how want to use float lip property, float led. If you use float lap and set this file and reduce the browser width, now you can see, now it perfectly placed that lip side of this browser because we don't have enough space up to dip to element. Basically using food property, we place Dep Elements right side was lip side, and it makes our website pretty responsive. So this is it for this tutorial. In the next tutorial, we are going to learn about tier property. So thanks for watching this video. Stay tuned for the next tutorial. 18. CSS Clear Tutorial: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related thesis. And in this tutorial, we are going to learn about clear property. Now, let's see how many value we have in clear property. We have to tell three clear property, left, right, and both. Now, let's try to understand why we need to use this property. As you can see in this example, we have to dip element side by side, and we have some text below the two dip element. And for this two dip element, we use minimum height property. And for the footer element, we do not use any float value. But for this two deep element, we use float right and left value. But the problem is, suppose we have lot of content in our Dp one element. In that case, this deep element going to overflow from the Puta deep element, and that's the big problem if we use float value. But to resolve this problem, CSS introduce clear property. To resolve this property, we need to use tear property to our last dip element, and here we need to use car P. But you might have question. Why we need to use lift value? Because we have overflow data in our lab dip element. If we have overflow data in our right deep element, in that case, we need to use right. But what? If we have dynamic data and we don't know which deep element going to overflow. In that case, we use tear both. If we use both value, it got to clear it from both the side. So without wasting your time, let's study the practical and see how we can use it. As you can see, side by side, I open my Visu studio code editor and my browser using p server extension, and I already create an TML document name index dot TML. And here you can see in this estim page, we have total three deep element, and we say three ID for that, one, two, and three. If you notice, you can see in our first Deep element one, and in our second Dep element two, we use for probity, left and right. That's why first dip element places at left side and second dip element places at right side. But what about third dip element? Here we do not use any float property. That's why our third dip element go behind one and two dip element, and I don't want to use float property for the third dip element. So I'm going to use clear property for that. So to type clear both. If I set this file, now you can see the result. For now, I'm going to use 100% with 100%. I'm going to set this file. After I use 100% width, still it work as it is. Now, again, I'm going to comment out this slide, and I'm going to increase deep to height. I'm going to type 400 pixel. And I'm going to set this file. After I set this file, now you can see, now we have facing the same problem. But this time, I'm not going to use clear both property. This time, I'm going to use clear right because our right side deep container height is much more than left side one. So if I set this file, now you can see the result. Now it works perfectly again. But what? If I increase the deep one element height. So here I'm going to pass 600 pixel. If I make it 600 pixel height and then set this file, now you can see the problem. Our deep container one overflow and height deep three container. To resolve this problem, we need to use lap property because we place our deep container one lap side. So if I pass lap tear vulate and set this file, you can see, again, we resolve our prob. But if we use both property, tear both and set this file, now you can see there is no changes. Now it adjust according to the overflow element. If our second div element is overflow, it's going to place it according to deep two element. So this is it for this tutorial. Thanks for watching this video. Stay tuned for our next tutorial. 19. CSS Font Tutorial: Hello, guys. Good to see you back. 1 second. I'm back with another tutorial related CSS. And in this tutorial, we are going to learn about CSS fonts. So let's see what type of form property we are going to learn in this tutorial. So these are all font property that we are going to learn in this tutorial. Our first property is font size. Using this property, we can define font size. Our next property is font family. Using this property, we can define which font we are going to use. Then we have font weight. We can control the boldness of font using this property. Also we have another property named font style. Using font style property, we can make our font italic. Then we have font variant and line height, and we are going to learn about it in our tutorial. Our font size property come with some predefined value extra extra small, extra small, small, smaller, medium large, extra large, extra extra large, et cetera. Now, let's talk about font size probity. In font size probity, we can provide value in different units. We can use pixel unit, percentage unit, EM unit, ER EM unit, et cetera. And we are going to learn all about it in this tutorial. Now let's talk about another property which is font family. Using font family property, you can define which font you are going to use, and you can use multiple font family at once. Suppose you use font family Arial, Heldica and Vardana In case Areal is not available in your system. In that case, it's going to use Heltica. And if Arial and Heltica both the fonts are not available in your system, then it's going to jump into the Verdana. So in our font family, we can pass one value, otherwise, we can pass multiple value. And remember, if any of the font family not available in your system, in that case, it's going to use the default font, default font of your browser. Now, let's talk about another property which is line height. As you can see in this paragraph, we have multiple lines. But if we use line height property, it's going to provide space between lines, something like that. We can control the space between lines using line height property. So without wasting a lot of time, let's start the practical and see how we can use these properties. So 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 ETML document, named index dot TML. You can see in our body tag, we have a heading tag, and also we have a deep tag, and inside this deep tag, we have a big paragram. And now I'm going to style this box using its class name. So inside the head tag, I'm going to use style tag. Style. Inside this tile tag, first, I'm going to selt this deep element using its ID type dot box. Then inside the car resist, our first property is with. First, I'm going to assign a wet to this container with 400 pixel. Then I'm going to assign padding. Padding 25 pixel. Our next property is border, border, and I want two pixel border. With that, I want solid border. And our border color is y. And I want to set this file. After set this file, here you can see the result. First property that I'm going to use, which is font size font size, and I'm going to take font size, 15 pixel. If I set this file, here you can see the result. It's reduce our font size. And if you want to reduce it more, then you need to reduce the value. Suppose I type eight pixel. And set this file. Now you can see our paragraph font is very small, and it's very difficult to read this text. So I decide I'm going to increase the font size. I'm going to make it 20 pixel. If I set this file, now you can see the result. So here we use static value. And now I'm going to show you another example where we are going to use dynamic value. For that, I'm going to reduce some line from this paragraph. And I'm going to duplicate this section. And here, I'm going to use another class, which is box two, and I'm going to set this file. With that, also, we need to style box two section. So I'm going to duplicate this section and hemotype box two. But this time had I use font size ten pixel. If I set the file, you can see the difference between the font size. But as I told you, we are going to use dynamic zero. So for now, I'm going to comment out both the lines and here I'm going to style the body tag. Yes. So I'm going to type body, and then inside the car ss, I'm going to use font size property. Font size 30 pixel. If I set this file, now you can see it make our on the fonts 30 pixel, which is inside the body tag. Now you might have quotien. Again, I use static value, but I promise you, we are going to use dynamic value. Basically, we are going to use percentage value. Now I'm going to use the percentage value, so I'm going to use font size and I'm going to pass 25%. It is called relative value. If I set this file, now you can see the different. To use dynamic value, otherwise, percent is value, we should have to compare it with parent tag. And as you can see, our box one and box two are of the deep element inside the body tag. So here we use body tag font size 30 pixel. So when we use 25% of 30 pixel, it make our font size 7.5 pixel. And if we increase the value, suppose 50 pixel and then set the file. Now you can see now our phone size is 15 pixel. And if we use 100% and then set the file, now you can see both the phone size are sale. Now it make our phone size 30 pixel because in our parent, we use 30 pixel. The next unit we are going to use for our fourth size, which is EM. Let me show you. Font size, and I'm going to use one EN. This unit also work according to the parent value. And as you can see, our parent value is 30 pixel. If we use 1:00 A.M. And then set this file, as you can see, there is no different of their font size. But if we make it 2:00 A.M. And then set the file, now you can see our second dive element font size is twice then our first dive element. As you can see in our parent tag, here we use 30 pixel. So one M stars for 30 pixel, and if we make it two, basically, it double the value. And as I told you, EM will also work according to the parent container value. At the same way, if you want to reduce the font size, just need to pass below the one v. Suppose I'm going to pass 0.5 am and then at the file, and here you can see the result. Now it's written 15 pixel. So this is how this type of value work together. Without this, we have another units ERM and many mole. So we're going to learn about it in our upcoming tutorials. For now, I'm going to talk about another property which is line height. So I'm going to comment out both the lines. And I'm going to set this file. And also, I'm going to rebook the default font size for the body tag. And in our first box, I'm going to use line height property line height, line height. Here I'm going to use 15 pixel. If I set this file, basically we reduce our first element line height. If I reduce it more, five pixel and then set this file, now you can see our line overlap with each other. And the same way, if you want to increase the line gap, suppose I'm going to pass 50 pixel and then set this file, now you can see the difference. Now we increase the space between these lines. Not only that, also we can use EM unit. Let me show you. Suppose one EM is default unit. One EM is default size. If I set this file, as you can see, C there is no difference. And if I want to increase the gap size between these two lines from the existing gap, I want two time gap. For that, we need to pass two EM value. If I set this file, you can see the result. Basically, this tutorial is for fonts, not for the units, and I already create another different section for units. So don't worry about it. Now, let's talk about our another property, which is font weight. We can control font thickness and boldness using this property. So I'm going to type font Wait, font to eight, and we can use some predefined ve. We have bold, bolder, lighter. Suppose I'm going to use bolder, and then I'm going to set this file. After set this file, you can see the result. As you can see, it increase our font to it. I know my font is rarely visible, so I'm going to increase the font size. Font size 18 pixel. And I'm going to set this file. Now you can see our font look very bold. Font to eight property come with some predefined value. We have value 100-900. If we use 100 and then set this file, you can see our fonts look much more thinner. At the same way, if we use 900, this is the highest point and set this file, now you can see, again, it makes our font bolder. Now let's use another property, which is font family. Font family, and I'm going to use ARL font. ARIEL. For now, I'm going to use only one font aerial, and I'm going to set this file. After step this file, now you can see the result. Here we use font to 8900, so it make our Aerial font bolder. But if I use 100 now and then set this file, you can see our fonts look much more thinner than previous version. And now you can increase the font weight one by one. If we use 700 and this is this file, now you can see it make our font bolder again. For now, I'm going to make font to eight normal. And I want to set this file. The next property I'm going to use, which is font style font style. BdfaultFont style come with three value, normal italic and obliqu. If you want to italic your font and without using I tag for that, just into tie fonttyle Italy. If I set this file, you can see the result. Now it make our font italic style. And the next value we have, which is oblique Basically italic and oblique looks very similar. Just they have minor difference between them. Let me tell you the difference. Suppose we use aerial font, and this al font come with italic variant. But what I any font don't have any italic version, in that case, we need to use obligu value. This oblique value make this font italic. Now, let's talk about next property, which is font variant, some type font variant. And our font variant property Cai total two value, normal and small caps. If we use small caps and then set this file, you can see the result. Basically, it makes all the character in capital letters. Also, if you notice after full stop, it makes the second character little bit larger. Not only that, you can use shorthand for all of this property. Let me show you how. So in our second div element, I'm going to use a property name font. At first, we need to provide font style value, and I'm going to use Obliq. Next, we need to provide font variant, and I'm going to use small caps. And third, we need to provide font weight, and I'm going to use normal font. Then we need to provide line height. And here I'm going to provide two E. And also, we need to provide font signs. So I'm going to use Slash, and I'm going to pass 18 pixel. Next, we need to pass the font family. Here you can pass multiple font name at once. Also you can use one fourth name. For now, I'm going to use AL font. Aerial. If I set this file, now you can see the rest. Sorry, this value stands for font size, and this value tests for line height. So font size, I'm going to use one will do. And for line height, I'm going to use two EM. And if I set this file, you can see the result. First, we need to provide font size, then you need to provide line height, and you need to remember this order to use it in a one liner. So these are the most important property about font. So this is it for this tutorial. In the next tutorial, we are going to learn about CSS, text formatting, text decoration, and many more. So thanks for watching this video, stay tuned for the next tutorial. 20. CSS Text Formatting Properties: Hello, guys. Good to see you back. Once again, I'm back with the new tutorial related CSS. And in this tutorial, we are going to learn basic text property related CSS. So these are all text related property in CSS. Text align, text align last, text transform, text indent, word spacing, letter spacing. And we are going to learn all about it in this tutorial. 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 Lip server extension, and I already create an estimL document named index dot TML. And in this estimL document, we have a Deep and inside this deep element, we have a paragraph. And as you can see, here we assign an ID name box, and we style this box. He is it with padding, border and use for family aerial. At first, I'm going to use a property named text align text Align. BitifulO paragraph text align is left. But if I use right, and then set this file, now you can see the result. Now our paragraph text aligned from the right side. Not only that, we have another value for this property, which is center. And I'm going to sub this file. Now our paragraph aligned from the center. With that, we have another value, which is justify. So if I use justify and then set this file, now you can see the result. Now you can see from both the side, we have equal space. Now our text align from lip side also from right side. So this is our justify align work with text. And remember, text align default value is late. Now let's talk about another property which is text align last. So here, I'm going to type text align last. This text align property is used for our last line. You can control, why do you want to align your last line. Suppose if you want to align it right side, right, and then set this file, now you can see the result. Basically, it target the last line and it align right side. And if I make it center centeral and dense is fine, and dens at this file, you can see the result. Also, we have other value for this propriety. We have starred value. Also we have lust value. If I use star value, it's like lift align. And if you use lust value, then what like write align. Now, let's talk about our next property which is text transform, some type text, transform. And first value I'm going to use, which is uppercase. If I make it uppercase and zip this file, now you can see it convert all the character in uppercase. These are all in now capital letters. At the opposite way, we have another value called lower case. Uterset this file, as you can see, it convert all the character in lower case. Next value I'm going to use, which is capitalize. If I use this value and the set this file, now you can see it convert all the first character of any word capital. All the word you can see in this paragraph start with capital later. Also, we have another property which is none. It is work as default value. So for now, I'm going to use uppercase. And I'm going to set this fine. Next property I'm going to use, which is text indent. So I'm going to type text indent. This property, particularly work on first line. Using this property, you can move the first line. Suppose you don't want to start your first line from that position. You want to start it up to 100 pixel. So you can pass to pass 100 pixel. And if I set this file, you can see the result. Now our first line provide 100 pixel margin at t. To clear this topic, for now, I'm going to comment out this line. And if I set it again, now it's more clear for you how it's work. Next property I'm going to use, which is word spacing, sound type, word spacing. Using this property, we can provide space between words. Suppose I add 30 pixel space between our words. If I set this file, you can see the result. Now, so as you can see, the gap between word is 30 pixel. If you want to increase it, just to pass a bigger value and since this file, you can see the result. For now, I'm going to comment out this line. Next, I'm going to use another property, which is letter spacing. Letter spacing, I want 20 pixel. If I set this file, now you can see the different result. Using Watts spacing propriety, we can create space between two words. But using letter spacing property, we can create space between letters. That's why you can see the gap between these letters. For now, I'm going to use five pixel because 20 pixel is used in number for letters. And I'm going to set this file. So these are the most useful text formatting properties in CSS. So this is it for this tutorial. In the next tutorial, we are going to talk about CSS takes decoration property. So thanks for watching this video. Stay tuned. 21. CSS Text Decoration Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related thesis. And in this tutorial, we are going to learn about take decoration properties. Here you can see, we have total three takes decoration property, takes decoration line, takes decoration color, takes decoration style. If you use tax decoration line property, then you have four value underline, over line line through and none. And these are all take decoration style property values, solid dotted, double wave, and also takes decoration property come with shorthand. You don't need to type this three line for property and VDO. You can use this shorthand. Takes decoration under line rate WV. First, you need to use Taste degreonPperty, then you need to pass Takes decoration line value, which is underline. And next, you need to pass take degreon color value. And at last, you need to pass takes decoration style value. So without wasting your time, let's start the practical and see how we can use these properties. So as you can see side by side, I open my Visual Studio Cditor and my browser using Lip server extension, and I open my previous estimate document. So let's use tax DecoronPperty. But first, I'm going to use this property in our heading tag. So here, I'm going to select the heading tag, H one, then the list. I'm going to type takes decoration in. Taxes decoration line, and I'm going to use underline property. Underline value. If I set this file, here you can see the result. As you can see, it had a underline in our heading one tag. And if you don't want to use underline, just need to type another value. Oval line and set this file. You can see the result. You can use Tex decoration line in any text. It could be paragraph, heading tag, UL tag, et cetera. Now let me show you another ad about text decoration line, which is line through. If I use this value and then set this file, as you can see, it is work like strike tag in our table. It had a line middle of this text. For now, I'm going to use underline value. Underline. Takes decoration color, takes decoration color. Takes decoration color, I'm going to use red colour. If I set this file, you can see the result. And our last property is take decoration style. So I'm going to type text decoration, style. If I use dash and then set this file, you can see the result. As like dst border, it adds underline to this text. Similarly, you can use other values. If you want to use dotate, you can see the result. Also, you can use Dowel ilm. You're going to add double underline, o this test and we have another value, which is wave. If I use this view and then set this file, as you can see, now our underline follow the pattern style, and now I'm going to show you the short and how can you use shorten property. So Hemo type takes decoration. Takes decoration, first we need to pass line value, which is underline, and then we need to pass color value, which is red. Then we need to pass decoration style velo, which is way. And if I comment out this line and set this file, you can see the same result. I always prefer shorthand without using multiple line. So this is it for this tutorial. In our next tutorial, we are going to learn about what wrap and what break property. So thanks for watching this video. Stay tuned for the next tutorial. 22. CSS Word Wrap & Word Break Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. In this tutorial, we are going to learn two new property, Word wrap and word break. Let's see why we need to use WordAp property. As you can see in this example, we have a deep container and also we have a non breakable word. As you can see, the word is very long. So if you use this kind of big word and you already say Dev weed, then in that case, it's going to overflow to this container. To resolve this problem, CSS introduce WordAp and this Wadrap property come with two value, break word and normal. If we use breakword and epi file, then then you're going to break the word according to the deep size. Now, let's talk about our another property which is art break. This artbrek property come with total two value, break all and keep all. Keep all value is the default value. We need to use break all value. Let me show you an example. As you can see, we have a DB element and inside this deve element, you can see a paragraph. In this paragraph, we have a lot of words. If we use what break and break value, then it going to break our word by characters. Basically, it's going to break all the words. If we do not use break property, then our word Hindi start from the next line. I hope now it's clear for you how we can use what break property. Without wasting your time, let's start the practical and see how we can use it 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 create an estimate document named index dot HTML. In this estimate page, as you can see, we have a deep element with ID, box. Also, we have a heading tag. At first, I'm going to style this D box. He to type has tag, and our deep ID is box. Then inside the arises, first property I'm going to use with W 400 Pixel. Also, I'm going to use border, and I want one pixel border. With that, I want solid border and our border color is red. I'm going to set this file. Let's make it two pixel. Now it's more visible. Now I'm going to add in word, which going to take more than 400 pixel width. Let me show you. I'm going to increase Lorem O R E M. If I set this file, you can see the problem. Now our word overflow from this deep element. Now we need to break the word according to the deep size. For that, we need to use a property and the property called Wordrap. Here I'm going to type word rap and we need to use a value called breakword. If I use this value and then sub this file, you can see the result. Now it break the word according to the deep width. If I zoom this page a little bit, now it's more clear for you. This is the usage of Wadrap property, and it's come with another value which is normal and it's the default will. So I'm not going to use this view. Basically, Wadap used to break long words, but now I'm going to increase this word length a little bit. I'm going to type some D after that and I'm going to slip this file. If I set this file, now you can see the different result. It did not break the word. Basically, it move it to the next line. As I told you, Wadrap is only used to break long words, not the medium sized orbs. To resolve this problem, we need to use another property which is Word break. I'm going to comment out this line in the next line, I'm going to use Word break. Word Break property, we need to use break all value. If we set this file, you can see the result. It successfully break the long word and also it successfully break the small word. This is the usage of both the properties. This is it for this tutorial. Thanks for watching this video, Stay tuned for the next tutorial. 23. CSS Text Shadow Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related thesis. In this tutorial, we are going to learn about a new property, which is text shadow. Now let's see what is text shadow. Here is a word called hello word and it don't have any shadow. But if I use te shadow to this word, now it's look like that. Now you can see shadow behind all the characters and to create this take shadow, we need to use te shadow property. As you can see, first we pass two pixel two pixel, five pixel, and orange. Our first value two pixel stands for H shadow. H shadow stands for horizontal shadow. And our next value stands for vertical shadow, V shadow, and our third value stands for blur radius. Horizontal shadow work on left and right direction, and vertical shadow work on top and bottom direction. Using blur value, you can control the sharpness of this shadow and our last value stands for color. Here you can use color name, hexadecimal value, argv value, et cetera. Now let's try to understand horizontal and vertical shadow with graphical interface. Here you can see we have X xs direction and YXs direction. XXstnds for horizontal shadow and YXStnds for vertical shadow. If you want to move your shadow horizontally right side, then you need to pass 1234 value and if you want to move it let side, then you need to pass minus value minus 1234. At the same way, vertical shadow work. If you move your shadow downside, then you need to pass one, two, three, four value. If you want to move your shadow upward, then you need to use minus value minus one minus two minus three minus four. I hope now it's clear for you what is H shadow and what is V shadow. So without wasting your time, let's start the practical and see how we can use it. As you can see, side by side, I open my visual studio code editor and my browser using Live Server extension and I already create an estimL document name index dot HTML. And as you can see, in our body tag, we have a heading one tag. At first, I'm going to style this heading tag. I'm going to select this heading tag using its tag name H one. Then inside the ClirasF property, I'm going to use colored colored black. Second property I'm going to use, which is text shadow, text, Shadow. First, I'm going to provide the horizontal horizontal value to pixel. Then we need to provide the vertical axis value to pixel. If you notice you can see her use positive horizontal value, it's going to move our shadow right side and also use positive vertical value. It means it's going to move the shadow downward. Then we need to pass blur value. For blur value, I'm going to pass five pixel and we need to pass color. For color, I'm going to use green. If I set this file, you can see the result. If I remove the blur value and then set this file, now you can see our shadow looking very sharp and if I want to move it lip side, so I'm going to pass minus value minus two pixel at horizontal direction. If I set this file, you can see the result and also if you want to move it upward, then you need to use minus vertical value. If I set this file, you can see the result. Now, again, I'm going to use blur value, but this time, I'm going to use two pixel blur value. After set this file, as you can see it at two pixel bloodiness to this shadow. And if you remove the color and then set this file, then by default, it's going to add black color as a shadow. This is how we can use take shadow propriety. It is one of the most useful property in CSS. This is it for this tutorial. Thanks for watching this video statue. 24. CSS White Space Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn about CSS white space property. This property came with total five value, normal, no AP, pre line, pre dap. Normal is the default value. Now I'm going to explain you what is white space and why we need to use this property. As you can see in this example, we have a deep element and inside this deep element, we have a dummy paragraph. If you notice you can see here we fixed with to this container, 200 pixel, then I use the default value, white space, normal. As I told you, normal is the default value, so it is work as it is. But if you use white space, nod up value, then you can see the difference. Now you can see the whole paragraph in a single line. You can see our content are overflow from this container, and if you want to hide overflow content, yes, you can, you need to use overflow hidden. Sometimes we need to show in a single line. That's why we need to use Nodev VD this property come with another value, which is pre tag in our Atmel. If you know how pre tag work in Atmel, then you can understand. Here you can provide Asma space you want. You can provide a lot of white space in your text and it is also similar with nob value. Let me explain the topic with example. As you can see, here we use pre tag. In this deep element we have total three line, but we do not use any break tag to break the line. But if you notice the output, here you can see it print as it is to our TMA structure. It print both the lines separately. Suppose if I provide space between Dlo and set, here you can see the example. Also it provides the space in our output section inside this development. That's the usage of pre wave. By default, TML tag, do not take this space, but hero use pre value. That's why it take this space. It provides the same space, what we provide in our estimL structure. Now, let's talk about another value which is preline. It is pretty similar with pre value, but it do not take more than one single space. It's only count the single space. That's the difference between preline and pre value. And if I talk about our next value, which is pre Ap, it is also work like pre tag. It take white space as it is, enter tag as it is, but no AP do not work on it. You cannot show everything in a single line here. Without wasting your time, let's start the practical and see how we can use it. As you can see, side by side, I open my result studio code editor and my browser using Live Server extension and I already create an TML document named index dot DM. So as usual in this estimate page, we have a deep tag with ID name box, and we style this dip tag. Here we said 300 pixel fixed to it and set a border to pixel solid black. At first, I'm going to zoom this page a little bit that you can see it clearly. At first, I'm going to make it one liner, so I'm going to use no Rb Val. I'm going to type white white space, no RAD. If I set this file, here you can see the result. Now it make our paragraph one liner. As you can see horizontal scroll bar at bottom. I I break the paragraph in our estimate tag using Enter, still you can see it print our paragraph in a single line. Also, if I provide multiple space and then set the file, still you can see the same result. If you want to hide this overflow data, then you can use overflow hidden property. Overflow hidden. And set this file. For now, I don't want this, so I'm going to use, so I'm going to comment out this line and this time I'm going to show you prevail. White space, pre. If I set this file, now you can see the result. Now you can see the white space before this world. If I pass more white space and set this file, still you can see the result. Also you can notice you can see from here, we break our line. If I break this line again and then set this file, still, you can see the result. Pre value support nodAp. That's why our content can overflow from this container. Also it support white space. Not only that, also it support line breaks. If you notice you can see our last line overflow from this container because there is not enough space for this line in this container. That's why it overflow and print all the content in a single line. Now let's talk about another value which is pre line. If we use pre line, and then set this file, here you can see the difference. I do not support no rap, but it support the new line. If I split this line and then set this file, here you can see the result. If we use preline value, then you do not print our paragraph in a single line. Now let's talk about the last value, which is pre rap, some type, pre rap. I'm going to sub this file. After I sub this file, now you can see the result. Pre rap also do not support no RAP, but it support white space and line breaks. That's the difference between all of this value, and it also come with another value called normal and it is the default value, so I'm not going to use it here. This is it for this tutorial. In the next tutorial, we are going to learn about text overflow. Thanks for watching this video. Stay tuned for the next tutorial. 25. CSS Text Overflow Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related SSIs and in this tutorial, we are going to learn about a new property related CSIS and our property name is overflow. These are the values that come with CSS text overflow property. Clip clip is the default value, ellipsis and string. Now let's see why we need to use text overflow property. In the previous tutorial, we'll learn about noAP we know if we use norab value white space, no RAP, then it's going to make our whole paragraph in a single line and it overflow from our container. If we use overflow hidden property, then it hideo text. But now I want to tell our user, this text is not over. I want to show her triple dots, otherwise, ETC, et cetera. If we use directly hidden property, as you can see, sometimes it can cut our text and it's not look so professional to resolve this problem, you can use text overflow property. If we use text overflow value ellipsis, then it's going to add triple dot after this sentence, and it's come with another value string. Here we can specify the exact string what I want to print. Suppose inside the squares we pass double dot, you're going to print the same string as it is after this line. Let's start the practical and see how we can use it. As you can see side by side, I open my Visual Studio code editor and my browser using live server extension and I already create an TML document named index dot HTML. And as you can see inside the body tag, we have a deep tag and here we set an ID box, and also we style our ID. Here we say 300 pixel width two pixel border and whitespace, norab. After using Whitespace No AB, as you can see, our content overflow from this container. If I just use overflow and use hidden and set this file, here you can see it doesn't look great. It cut our text. A user cannot understand is this end or not, but I want to show to the user there is more word left in this paragraph. For that, we need to use text overflow. So to comment out this line and here I'm going to type text overflow, and I'm going to use ellipsis. If I set this file, oops, I think there is a problem. We need to use text overflow value with overflow value. We need to make it overflow hidden and then set this file, now you can see the result. It add three dot last of this line. I mean we have more content in the Sparagram. This is the first value. Also we have another value. So to duplicate this line and comment out previous one. This time, I'm going to use another value which is stream. We don't need to type the Value name, we need to pass inside the double codes, I'm going to pass the exact string what I want to print. I want to print square ss and then inside the square sis I want to print two dots. After I set this file, as you can see, it's not working, I think there is a problem with the browser. Maybe chrome doesn't support this feature. I'm going to copy my URDL and I'm going to open Firefox. As you can see, here I open my Firefox browser and if I pass this URL and then press Enter, now you can see the result. Here you can see it at the exact string, what we type in our CSS section. This is how you can use text overflow property. Here you can pass any string, whatever you want to print. This is it for this tutorial. Thanks for watching this video. Stay tuned. 26. CSS Writing Mode Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn another new property, which is writing move. So let's see what kind of value we have in this property. So these are all value that we are going to use in this property. Our first value is horizontal hyphen TV, and it's a default value. TV stands for top and bottom. Our next value is vertical RL. RL stands for right to lift. Then we have vertical R. R stands for lip to right. Then we have sideways RL and sideways R. So as you can see, we have a deep element, and in this deep element, we have a dammi paragraph. And if you use writing mode property, then you can write your paragraph like this. You can vertically rotate your paragraph. Using this property, we can particularly rotate the text content, not the deep element. 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 p server extension, and I already create an estimate document named index dot HTML. And if you notice, you can see in this estal page, we have a deep tag, and here we set an ID name box. And also, we have a paragraph in this deep tag. And if you notice in our style section, we already set in fixed width to this development, and also we use border. So at first, I'm going to use our property, which is writing mode. Writing mode. First value I'm going to use, which is vertical RM. Up to step this file, here you can see the result. If you notice, now you can see our D is still 400 pixel, but is routed the paragraph, and we rotate this paragraph vertically right to left. If I increase the paragraph size, so hemotype low m 100 and then at this file, now you can see the result. It start from right, then it go to the lip side. And if I make it opposite lip to right. So first to type L, then I'm going to type R and the set this file. Also you can see the result. Now you can see now our ties start from lip side and going to right side. Now, let me show you another property which is sideway RL. So I'm going to remove vertical R and I'm going to type sideways RL. If I set this file, After sub this file, as you can see, it's not working because Chrome browser doesn't submit this feature. So I'm going to open this file in Firefrogs Browser. If I page this URL and open this file, you can see the result. So some features are not supported by Chrome browser. That's why we need to use Firebog browser. Now, let's talk about the last value, which is horizontal TV. I want to use horizontal TV. If I set this file, as you can see, it print the result as it is. Also, if I open my Firefox browser and then reload this browser, also, you can see it print as it is because it is the default value. So this is all about writing mode property in CSS. Thanks for watching this video. Stay tuned for the next tutorial. 27. CSS Column Count Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS tree. And in this tutorial, we're going to learn a new property related CSS, and our property name is Colm count. It is one of the most useful property. So let's see why it is useful. So as you can see, we have a deep element, and in this deep element, we have a paragraph. This is a normal paragraph, and it's boring. It's not look very interesting. But if you notice on newspaper and other magazines, you can see our paragraphs, the paragraph divided in columns. Sometimes it look like that. It provides space between the column. We can create this part using column count. And these are all column count related property, column count, ClumGap, colum rule, colum rule with, colum rule style, colum rule color, colum with, colum fin, column span, and colum. We already know about column count, and let's see how column gap work. Using column count property, we can divide the paragraph into three part, but using column gap property, we can provide space between these partitions. You can increase the gap size, otherwise, you can decrease the gap size. Our next property is also important property, which is column rule. Using this property, you can provide lines between these partitions, and also you can control the thickness using this property. Next property, we have column width. Using this property, you can increase the column width, otherwise, decrease the column width. Our paragraph divided into three columns, but using this property, you can control the size. 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 Visals studio code editor and my browser using live server extension, and I already created an TML document named index dot ASTML. And in this tML page, we have a deep tag, and we assign an ID to this deep, which is box. And if you notice, her style this box. Hero use fixed with 600 pixel, and also we say border. So first property that I'm going to use, column count. Column count, column count, and I want to part this paragraph into three column three. And I'm going to set this file. After set this file, here you can see the result. It part our paragraph into three part. Here you can divide your paragraph into many part. Suppose if you want to divide this paragraph into four section, yes, you can. You need to pass four. You need to set this file. But for now, I would like to go with three part. So this is the usage of column count property. Now let's talk about another property which is column gap. So Hemotype column gap and he to pass a weight. And as you can see, this is the default gap. And if I want to increase the gap, just help me to pass a wave. Suppose I want to increase the gap 50 pixel. And if I set this file, here you can see the result. And if you want more gap, just increase the value. So her pass 100 pixel. After set this file, that's the result. For now, I'd like to go with 50 pixel. Next property I'm going to use, which is column rule. And we have many column rule related property. So first property I'm going to use column Rule W. For now, I'm going to use column with three pixel. And next property I'm going to use column rule style. Column. Rule. Style. Column root style, and I'm going to use dot value. If I set this file, yeah, you can see the result. Oops, I think I did some wrong because here we use PC, not pixel. So we need to use pixel value PX. So if I set this file, now you can see the result. If I remove this border, so I'm going to make it zero pixel and set this file again. Now you can see this line only appear between the columns, not the left side, not the right side, we have different style similar as border property. I'm not going to show you one by one. Because we already familiar with that. And now I'm going to use another property related column rule. So I'm going to duplicate this section, and this time, I'm going to use color. Column rule, color. And here I'm going to use red colored. If I set this file, now you can see the color of column rules. Not only that, also you can use shorthand for column rule property. Let me show you. So just when you tie column rule. And first, we need to pass column rule with, which is two pixel. Next, we need to pass Column Rule style, which is solid. And then we need to pass column rule colored. For now, I'm going to use green. And I'm going to comment out this three line. If I set this file, as you can see in my browser, now our column rule is green color, and it is two pixel and its style is solid. And if you want to increase the column rule with just to increase the value, suppose I use ten pixel and the set this file, you can see the result. Now let's talk about another property which is column weight. To use this property, we need to comment out this line, column count because we do not use both the property at once. So I'm going to comment out this line and her to use column we. Column width, and I want to make my column with 100 pixel. If I set this file, here you can see it divide our column into four parts. But if I reduce the column gave value, zero pixel and also I'm going to reduce column rule with one pixel and then this file. Now you can see it divide our column into six part because it's always try to divide our column in equal part. As you can see, hero is fixed with 600 pixel. So if I divide 600 pixel with 100, then it's going to return six. That's why it divided into six part. Now let's talk about another property which is called column span. But before, I'm going to comment out this line, and I'm going to uncomment this line, column count. Also, I'm going to use 20 pixel gap between this column and our column rule style solid and two pixel. And thickness is two pixel. If I set this file, again, we are back to the old stage. Now I'm going to show you how can we use column Spen property? Suppose I want to move this heading one tag inside this devaluate. So I'm going to move this heading one tag inside this box D. If I set this file, you can see the result. Heading one is much larger for this example, so I'm going to use heading five, tag, H five. And save it again. Now you can see our heading five tag adjust in our column one, and I don't want it. I want to increase size for this column for this particular tag. So if I use heading three, the set this file. Now I'm going to show you how exactly it's going to work. So we need to select this tag heading three, H three. Then I said the culia says, we need to use column span. Column span. And I'm going to provide all the space inside this deep. So I'm going to pass all. If I set this file, you can see the result. Now, for this particular tag, we expand the column size. So this is it for this tutorial. In the next tutorial we are going to learn about CSS for phase rule. So thanks for watching this video. Stay tuned. 28. CSS @font face Rule Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we're going to learn a new property at the red font phase. Using this property, you can download any font and you can use it in your web page. Now the question is why we need to use this property? We already have a property named font family. So as you can see, if we use font family, we can provide ARIA Heltica and Sensory in this font family. If ARL font install user system, then it's going to apply ARL font. If it is not, then it is going to check for Heltka also, if the Heltica is not available, then it's going to jump into the Sansai. And if all of these are not available, there is going to use the default font browser. To resolve this problem, previously we use websafFonts. Websap fonts are supported by many popular operating system like Windows, Mcewas, Linux. Also, it's supported by mobile operating systems, Android Iwase. This operating system use common group of font in their system. So that's the previous method that we can use different fonts. But now we have aerate font reress property. Using it, we can use any font in our web page. And this is how you can use this fonfhase property. Fontfhase is at the calices you need to pass on family. And here you can take your own name. You can pass any name. And next property you need to use, which is source. And instead the source, you need to pass the URL, the exact font URL. And remember to take the font name, here you cannot use any space between the name. Here you can use camel case, otherwise hyphen, but you cannot use space. Next, you need to pass the source and herein to pass the exact path with the extension. First, you need to pass the folder name, then you need to use slash and your font name. Now let's see how can you use this font? To use this fond, you need to use font family property. Then you need to pass the font name, the font name you assign in your font vast selector. 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 Visal studio code editor and my browser using lip server extension, and I already created an ML document named index dot TML. And as you can see, inside the body tag, we have a deep tag with ID name box. And now we need to use this font phase property. But before we need to download a font to use it. There are many website that provide fonts to download, but I would like to prefer Font Squirrel. Here, you can see different type of font. For now, I would like to go with OpensNs. This is one of the most useful font in website. So I'm going to select this font, so I'm going to click it here. And if you notice you can see it also provide different thickness version of this font, light, bold, bolder, italic, et cetera. And if you want to take a taste drive of this font, just you need to select this option, taste drive. And if you type something, suppose I'm going to type hello word. Here you can see the result. So it is a very good font to use in our website. And if you want to change the font size, from here, you can change the font size. If I use 14, 14 pixel size is used for paragraphs. So if I use it, you can see the result. It is a very good font to use in our website. And if you open this drop down, here you can see different font styles of these fonts, Opensun bold, bold, italic, et cetera. And if you decide you are going to use this font in your website, then you need to go to this section webfont Keith. And these are all webfonFleEtension. Wo TTF EotsG. And W overlap is the most recommended because it supports all of the modern browser. Then after select this extension, we need to download this font. So I'm going to click the Download button. As you can see, here is successfully download our font. Then I move this downloaded file in this folder name font. So as you can see, we need to extract this file. So I'm going to press extract here. So after extract, here you can see folder web fonts. If I open it, these are all the fonts that we can use in our web page. Suppose I want to use regular font. So I'm going to open this folder and I'm going to copy. Then I'm going to copy this particular file opens on regular web font dot Olive. And I'm going to move this file to the main font folder. And also, I'm going to delete these unnecessary files. I don't need it. Now let's back to the visal Studio code editor. So as you can see, again, we are in my visal Studio code editor. At first, we need to use CSS font phase rule property. So here I'm going to type at the read font phase. Then we need to use Cali Vss. At first, we need to use font family property. Font family. And in this font family propriety, we need to pass a value. We need to pass the font name. And if I show you my font name, our font name is open sans. So her type open suns. And then we need to provide the source path of this font. Su type is RC. And here we need to use URL value to locate this font. As you know, URL stands for uniform resource locator, and inside the rundres on to provide the font path. So as you know, our font is in our font folder. Fonts and our font name is OpensNsRgular web font. That's it. If I set this file and if I use it in our box deep, some type, hastag box. Is the caliberss here I want to use OpensensFont for our paragraph. So again, we need to use font family. So basically, I'm going to copy this line and I'm going to paste it here. And I'm going to set this file. After I set this file, if I show you my browser, you can see the result. So after set this file, as you can see, it apply Opensunspw in our paragram. And the same way, if you want to change the font of heading one tag, yes, you can. Suppose I'm going to select heading one, H one, then inside the liver says, I'm going to use one family, font family, OpenSN if I set this file, you can see the result. So this is how you can download any type of font and you can apply it in your browser. So this is it for this tutorial. In the next tutorial, we are going to learn Google fonts. So thanks for watching this video. Stay tuned for our next Tutorial. 29. CSS with Google Fonts Tutorial: Hey, guys, good to see you back. Once again, I'm back with a new Tutorial related CSS. And in this tutorial, we're going to learn, why should we use Google font in our web pages? Now, let's try to understand what is Google fonts. So as you can see, we have a server, and in this server, we have our estable file CSS images and our fonts. If visitor is increased to this website, then our server loading time increased. Our server take time to complete the request because there are many visitor at the same time. Suppose one visitor tried to access this page and our server tried to fill its request. At the same time two other visitor came and send the request. In that situation, it increased the server response time. At the same time, this server going to serve TML, CSS, images, and fonts. But if we use Google fonts, then need to reduce our server load because then we directly use Google server to serve the font. This time, our server going to deliver HTML thesis and images. But for the fonts, it's going to use Google server, and that's decrease our loading time and open our page faster than previous stage. This time we are going to access all the fonts from Google server. Now let's start the practical and see how we can use Google Fonts. To access the Google font, you need to visit this website, phons.google.com. It's going to redirect you this page. Here, you can see a lot of fonts. And from there, you can search any front that you imagine. For now, I would like to go with MonsatFont so I would select this font. From here, you can change the font size, and these are the styles provided by this font. To access this font, you need to click on this button, Gate font. From here, you can download this font in your local system. Also you can use it from the Google server. For that, you need to click Get embedded code. Yeah, you can see this font is available for web Android device, IOS device, and flutter applications. But we are going to use it for wave. If we select wave also you can see we have two other options, ink and Input. For now, we are going to use Link option because we do not learn about input rules, we are familiar with link tags. We are going to learn input rule method in our upcoming tutorials. So for now, I would like to go with links. Just you need to copy this code. Then back to the Visual Studio code. In your Visual Studio code, you need to paste this code inside the head tag. So below the meta tag, I'm going to paste this code, and I'm going to set this file. Now we are able to use this font, and now I'm going to use this particular font for the H one tag. So below the title tag, here I'm going to use style tag. And inside this tile tag and inside this tile tag, then inside this tile tag, I'm going to select this H one tag, H one. Then this cardia says, first, I'm going to use the property name font family. Font family. Then let's back to the browser. Here, you can see the font family, Monsor it sensory. So copy this section. And back to the studio code. And here I'm going to pass this value. After set this file and run this code, you can see the result in our browser. It changed heading one form. Not only that, also you can use any font d value 100-900. So this is how you can use Google font on your web page. It is very easy process. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 30. CSS List Style Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about CSS is tyle. Now let's see what is style and how it's work. These are all style property. Style image, style position, style t, and ist ty. So as you can see, this is the example of list. And in this list, we have total four list item. But if you notice the style icon, it's an image. It is not a bullet point, otherwise, square box. You can use any image as a list style image. Then come style position. We have two types of position inside and outside, and we are going to learn it practically. Then our next property is is style type. As you know, we have total two types of list item, Wada list and unwale list. Now, let's talk about our last property, which is style. We use this property as a one liner. If you don't want to type this three property, then you can use this one. 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 opened my Visual Studio code editor and my browser using light server extension, and I already created an TML document name index dot t. And if you notice you can see inside the body tag, we have a heading tag. Also, we have under list and a Wadlelist. And now I'm going to style this nwdal list. So for that, here I'm going to use Style tag. Tile and insert this style tag. First, we need to select the nodal is UL. And remember, if you want to apply all the least properties, then you need to use UL tag, otherwise, OL tag, not the least items. I want to say not the LI tags. So here I'm going to use UL. Then insert the color recess. First property, I'm going to use style type. Les style type. Style type, I'm going to use circle value. If I set this file, you can see the result. If you notice, you can see in my browser, it make our list item point or circle. And if you want to use square boxes, yes, you can. Just to type square. If I set this file, you can see the result. And if you don't want to show any bullet point, also you can use a value called none. If I set this file, you can see the result. Now, there is no bullet point before the list items. For now, I would like to go with circle V. Now, let's talk about Wada list. So I'm going to duplicate this section, and I'm going to replace UL with OM. Dal is list style is different from nodal ist. If you want to use alphabetic, then you need to type upper Alpha. If I use upper Ea, as you can see, one, two, three, four, replace with AVCD. Similarly, if you want to use lower Alpha, lower Alpha. And this at this file, now you can see AVCD replace with small AVCD. Also, you have other wills, upper Roman and lower Roman. So if I type lower Roman and this at this file, yeah, you can see the result. Now our list items start with Roman numbers. And if I pass upper Roman, upper Roman and then set this file, now you can see the result. And the default value is decimal. If I pass decimal and then set this file, you can see the result. That's the default value. That's why it print one, two, three, four. So these are the most popular Wardaist values. And if you don't want to show anything, you can pass none here and then sent this file. For now, I would like to go with upper Alpha, so hemotypUper Alpha. And now I'm going to talk about style position. In a style position property, we have total two value. But first, I'm going to use border. Border to pixel, solid border. With that, our border lor is red. And I'm going to set this file. At first, I'm going to type List style position, Last style position, and I'm going to pass inside. If I set this file, you can see the result. It moved the least item little bit inside of this box. And if I use outside, in this of this file, here you can see the result. After using inside value, it move our list item little bit right side. So that's the usage of this property. Now let's talk about another property, which is list style image. So hero type List style image. Then here you need to use URL value, URL. Then inside the round recess, we need to provide the file path. URL stands for uniform resource locator. And inside the round recess, we need to provide the image file path. Now let's download an image from the website. So as you can see on your screen, here we open a website name icon finder. From here, you can download osp icon. You can search any type of icon and download it. So from the Sarchbar I'm going to type right arrow. After search this icon, you can see the result. It provides free and premium both type of icon. So from here, I'm going to select free versions. So these are all free icons that you can download. I would like to go with this one. So I'm going to click this icon. After click on this icon, you can see, Hey provides different type of format, PNG, SVG, and other formats. For this example, I'm going to use PNG. Also, you can select your own resolution. I don't want bigger icon. That's why I'm going to use 48 pixel size, and then I'm going to click on Download button. After click on Download button, as you can see, it download in our downward folder. Now let's move this icon from the downward folder to our current working directory. So as you can see in my current working directory, I already move this PNG image in my directory, and I renamed this file arrow dot PNG. And now I'm going to use this PNG file in my URL section. So inside this URL bar, I'm going to provide the file path. Arrow dot PNG. After I sub this file, you can see the result. But there is a problem. As you can see, steal our image are larger than bullet points, and there is no easy way to resolve this problem. Yes, we can use combinator selector, otherwise, we can create blank content to align it, otherwise, reduce the size. But basically, we are in now just initial stage. So I'm going to reduce the image size using Photoshop. So as you can see, I open this image in Photoshop application, and now I'm going to reduce the image size. So I'm going to select this image section and Heats here option image size, and I want to make it 12 pixel by 12 Bigel. I think it is good for it. Otherwise, I can make it 16 pixel. Okay. Then I'm going to praise O. And I'm going to set this file as a PNG file export as PNG. Also, I'm going to replace this image with this image. Yes. And then, again, I'm going to jump into the visult studio code editor. If I set this file, you can see the result. This is the basic section of Tutorial. We don't know about Advanced selector yet, so I could not show you many examples. In our upcoming tutorials and advanced section, we are going to learn about different type of selectors. Then I can show you the examples. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 31. CSS Background Image Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we're going to learn about CSS, background image property. Background image, background repeat, and background position. Now, let's try to understand what is background image. If you want to set image in your background, then you can use this property, background image. If you want to use this property, you need to type background hibadimage then instead the URL, you need to pass the image file path, something like that. Suppose you have image named one dot JPG, and you need to put this image file path on this URL secti. So let's see how we can use it practically. 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 create an TML document named index dot TML. So at first, inside this style tag, I'm going to style the body tag. So I'm type body. And inside this body tag, I'm going to apply the background image. And here, I'm going to type background image URL, slaver dot JPG. If I set this file, you can see the result. As you can see, it cover our whole page background with this image. Also, it repeat the background image again and again to cover this space. This is the first property. Now, let's talk about the second property, which is background repeat. Background repeat probity come with six value, repeat, no repeat, repeat X, repeat Y, space, and round it. Repeat is the default value. And if you use no repeat, there is not going to repeat the image again and again. Also, you can repeat your image from XX direction and also from x's direction. And if you use space value, then it's going to provide space between this image. And if you use round value, then it's going to stretch your image. These are all predefined value of background repeat property. Now let's see how we can apply it practically. So at first, I'm going to use this property, background repeat, background repeat. And here I'm going to apply no repeat. No, repeat. If I set this page, as you can see, now, our image do not repeat itself. Now it's appeared just for one time. And now I want to repeat this image from X direction. So here I'm going to pass, background repeat, repeat X. If I set this file, you can see the result. At the same way, if you want to repeat your image x direction, just to pass repeat Y. After set this file, you can see the result. And now I'm going to use the next value which is space. Background repeat space. If I set this file, you can see the result. If I extend the browser width, now it's clear for you. Now you can see it provides space between the image. If we have up content, then it going to work horizontally and vertically also. Let me prove you that. So to reduce the browser size, and I'm going to duplicate this box five time and then set this file again. Now you can see the result. This is the usage of space value. Now, I'm going to remove all the unnecessary condils. But this is how space value work in background repeat property. The next value I'm going to use, which is row. So here, I'm going to replace space with Run. After step this file, you can see the result. As I told you, round value, stretch our image. Now, let's talk about background position value. These are all predefined value of background position, aptp, lip center, lip bottom, right top, right center, right, bottom, center center, center, bottom. Also, you can use percentage value for CSS background position property. With that, also you can pass pixel value at YXs diction and Xs direction. So let's see how we can use it practically. So at first, I'm going to use background repeat value, no repeat. No, repeat. Then I'm going to use background position property. Background position. If I set this file, by default, it's coming laptop position. So I'm going to use we top property, right top. If I set this file, you can see the result. Now it move our background image right top position. This is the right top position. Then I'm going to use right center. After I set this file, here you can see the result. We don't have an upcontent. That's why it bob upward. So I'm going to duplicate this line box section 510. If I set this file, now you can see the result. I think it is not a good example. So I'm going to remove all op. Also, I'm going to remove the content inside the bog steep. Then I'm going to style this bog step using its ID, Hatag box. Then inside the caliva says, I'm going to say it with the height with 100%. Height 800 pixel. And then I'm going to add a border. Border one pixel, solid, and watercolor is y. Up this file, as you can see, this is the size of our box. And now I'm going to use all of these properties inside this box D. And I'm going to remove the body tag. If I set this file, now it's more clear for you. Let's increase the border width. The pixel. Now our borders are much more visible. So as you can see, her we use right center, and you can see the position. Now I decide I'm going to move our background image right bottom. For that, we need to use right bottom value. At the same way, we have let side value. If you want to move it leap to bottom, you need to replace right with left. And then you need to set this file. And if you want to place it ep center position, in that case, you need to replace bottom value with center. And if you use lap center value, you can see the result. At the same way, we have center center value. If you want to place this image, center of this deep element, just need to pass center center. If I set this file, you can see the result. And if you want to press it center top, just you need to pass center TOP. Now it's going to move our image center top position. Also, you can move it center, bottom position. Not only that, as I told you, you can use percentage value to move your background image. So I'm going to duplicate this section, and I'm going to comment out the previous line. And here I want to move our image using percentage value. From XX is, I want to move it 25%. And from the YXs I'm going to move it 50%. If I set this file, you can see the position. From XXs it move 25%, and from xs, it move 50%. Also, you can use Pixel unit. So I'm going to duplicate this section and comment out previous line. And this time I'm going to use Pixel Unit. From XXs I want to move it 300 pixel and from the YXs I want to move it 200 pixel. If I set this file, now you can see the position. From Xs, it moved 300 pixel, and from xs, it move 200 pixel. Not only that, you can use multiple background images at once. For that, just you need to use between this wave. Again, I'm going to type URL, and inside the URL, we need to provide another file path. So if I show you my current working directory, there you can see another image, man dot JPH I'm going to use this image. Man dot JPG. Then again, we need to provide background repeat value for this image. So again, I'm going to pass comma and here I'm going to pass no repeat. Also, we need to define the position. So I'm going to use comma, and I'm going to define right, bottom corner. Right, bottom. If I set this file, here you can see the image. Basically, our previous image is overlapping with this image. That's why I'm going to move it laptop corner. Lap top. So as you can see, at the same DB element, here we use different backgrounds. Also, we can provide different background repeat property and different background position property. So in that way, you can use multiple images at the background. And if you want to use shorthand of the three property, just you need to type background. Background. And then first, you need to provide the UR file path. So to copy the file path, then you need to provide background repeat property value, which is no repeat, no repeat, and also you need to define the position. And I'm going to pass ptaf. And I'm going to comment out all of these previous lines. If I set this file if I set this file, you can see the result. Not only that, if you want to apply background color, yes, you can. Just interpass background color hair. Suppose I want to use gold color background, gold. And then set this file, you can see the result. So at the same time, we can use background color. Also, we can use images. So I hope now it's clear for you how we can use these three property related background. So this is it for this tutorial. Thanks for watching this video. Stay tuned. 32. CSS Background Attachment Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about a new property, which is background attachment. We have to t two property related background attachment, scroll and fixed. Scroll is the default value. And if you use fixed value, then it's going to fix your background image and you can scroll your takes otherwise contained over the background image. So let's 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 lip server extension, and I already created an STL document, named index dot TML. So as you can see in this STML, we have a deep tag with ID name box. Also, you can see in our body tag, we use a background. Here we use a background, a flower image. And now I'm going to add some dummy text in this box. So here I want to type Lorem 1,000. After press Enter and set this file, you can see the result. Now you can see we have a scroll bar at right side. And if I reduce the browser width, let me show you something like that. Now you can see if I scroll down my scroll bar, also our background image move with the scroll bar. To resolve this problem, we need to use background attachment property. So let's use the property. So instead the Carirass I'm going to use the property name, background attachment, and I'm going to use fixed field. If I set this file, then again, back to the browser and scroll the content this time you can see the different result. Now you can see, up to scroll this content, as you can see, the background image fixed its own place, our content moving upward and downward. And if you use another value, which is scroll, and the set this file, and if I scroll down my page, now you can see, again, our background is moving with the content because scroll is the default value. To fix the background, you need to use fixed value. So this is it for this tutorial. In the next tutorial, we are going to learn about background size. So thanks for watching this video. Stay tuned. 33. CSS Background Size Tutorial: Hello, guys. Nice to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we are going to learn about CSS background size property. These are all values related background size property. Our first value is Auto. Second value is length. Here you can provide pixel value for your background size. Then you can use percentis. You can define background size with percentage value. Then come covert, and last one is contained. So 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 lab server extension, and I already create an SML document named index dot ATM. So as usual, we have a deep tag with ID box. You can see box, here we set border and a background, and we set our background, no repeat. And our background position is laptop. For now, I'm going to remove the background position, laptop. I don't need it. So this is our background image loop without background size property, but I want to reduce the background size. For that, I'm going to use the property background size, background size, and here I'm going to use pixel value. I'm going to pass 150 pixel. If I set this file, you can see the result. It reduced the background image size. As you can see, here we pass only one value. It's mean for both the axis is going to apply 150 pixel. But if I pass 200 for YXs and this set this file, now you can see, now it apply 150 pixel for Xxs and 200 pixel for YXs. So you can control background image XX size and YX size differently. As you can see, our box dip height is 800 pixel, so pass 800. After set this file, as you can see, we increase the background size at YXs direction. But this time for excesses direction, I want to use 100% because for this box width, we use 100% size. So after set this file, now you can see the result. Now it's cover our whole deep with this background image. So you can use fixed unit and dynamic unit together. Otherwise, also you can use only percent this value. Let me show you some to duplicate this line and comment out previous line. So from both the direction I want 100% within height for this background image. If I set this file, here you can see the result. At the same way, if you want to use only 30%, then set this file. As you can see the result. So this is how you can control background image size with these values. And now I'm going to use predefined value. This time, I'm going to use a value called cover. If I set this file, you can see the result. If you use cover value, it's going to cover hole deep with this background image. But if you notice, you can see from the right side, it cut our image. Basically, this value resize the background image to cover the entire container. Even if it has to stretch the image or cut a little bit of the one side of image. Now, let's talk about another value, which is contain. I'm going to duplicate this section and comment out previous line, and I'm going to replace cover with contain. Before I set this file, let me tell you what this le going to do. Basically, it's going to resize the background image to make sure the image is fully visible. So if I set this file, now you can see our image is completely visible. And according to the image ratio, as you can see, our bottom portion is not covered by this image. So this is the usage of background size property. I hope now it's clear for you. So this is it for this tutorial. In the next tutorial we are going to learn about CSS background origin. So thanks for watching this video, State. 34. CSS Background Origin Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we're going to learn background origin property. Now, let's see what are the values provided by background origin. So these are all values that we can use in our background origin property, padding box, border box, contain box. Now you might have question, what does that mean? So let's start the practical and see how we can use it. So let me explain with the practical. So as you can see side by side, I open my vis Studio code editor and my browser using if server extension. And here I open a estable document named index dot t. So if you notice in this box D, we set with 60%. Also, we set height, 800 pixel, with that, Hero use padding. 30 pixel padding of each of the direction. Also, we have three pixel border, but I'm going to make it 20 pixel. And I'm going to set this file. And her defined background size 200 pixel also use background property as a one liner. So let's use background origin property. Background origin. As I told you, this property come with three value, padding box, border box, and content box. Padding box is the default will. If we use padding box, our background image start from this padding. But if we use content box, content box, up to set this file now you can see our background image start from the content area because we use this value. So if I increase the background size, 500 pixel and then set this file, you can see the result. Our background image start from the content area. Basically using this probity, we can declare from where I want to start our background. This value only work if we use no repeat Value. But if we remove the no repeat value and then set this file, now you can see, again, it starts from the actual org in place. So I'm going to use no repeat Val. Now, let's jump into the next value, which is padding box. Padding box, if I use this value and then set this file, now you can see our background image start from the padding area. But if we use border box and then set this file, now you can see our image slightly move inside the border. This time, our background Image start from the border area. If I use border style, dot it, then set this file, now it's more clear for you. So we can start our background image from the padding area also from the content area. So that's the usage of background origin property. I hope now it's clear for you. Thank you. Thanks for watching this video. 35. CSS Background Clip Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about a new property related background, which is background them. Basically, this property related with background color. This property is pretty similar with our previous property, background origi. Now, let's talk about the values of this property. These are all values that I'm going to use with background clip, padding box, border box, and content box. So 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 create an estimate document named index dot DML. As usual, we have a deep tag with ID name box, and inside this deep tag, we have some dummy text content. And we already style this dip tag using its ID name box, Heist with 60% height, 300 pixel, and also I provide padding, which is 30 pixel, each of the direction. With that, we have dotted border. So let's start the property name, which is background clear Background Tet. Here, the first val I'm going to use, which is content box. Contain box. If I set this file, it is not going to work because we do not provide any background color to this box. So I'm going to pass background color white. So if I set this file, now you can see, now you can see it provides background color white to the content area only. And now I want to cover the padding area with this background color. Then just want to pass padding box. After set this file, here you can see the result. With that, if you want to cover the border area with the background color, for that, just you need to pass border box property. Border box. If I set this file, you can see the result. So that's one of the usage of this property. Now let me show you another example. We can use this property with background image also. Now, let's add in background image to our heading one tag. Hell type background image. And I'm going to use background image URL. We have an image of flower in our background, flower dot JPG. If I set this file, you can see the result. It a flower background image in our hearing tag. Now I'm going to use the font size, type font size, and I'm going to use 150 pixel. Then also, I'm going to change the font family type font family, and I'm going to use Impact font, impact, only the impact. I don't want anything else, and I'm going to set this file. After I set this file, it look like that. And if you don't want to repeat your background, just you need to use no repeat value. Background repeat, no repeat. For now, I would like to go with repeated background, and then I'm going to use background lip property. Background clip. And here I'm going to pass text. And I'm going to make my color transparent. If I set this file, you can see the result. Here you can see it perfectly keep the background image according to the heading one text. If I reduce the size, if I make it 100 pixel and this file, now you can see it look much better than previous one. If I make body background color white, Now it much more visible. And one thing I forgot to talk about background clip property come with another value, which is text, and this will work on only the text. I hope now it's clear for you how we can use background clip property. So thanks for watching this video. Stay tuned for the next tutorial. 36. CSS Color Modes Tutorial: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related CSS, and this is the most important part of this tutorial. In this tutorial, we are going to learn about color modes. Here we are going to learn how can we assign color to an element using different mode? The first mode we have is color name. You can use any color name, suppose red, yellow, blue, dark gray, whatever you want to use. Next, we have hexadecial code, and third one is RGV value. Argv stands for red, green, and blue. At the same way, we have RGBA. A stands for Alpha value. Using A value, we can control the transparency of this color. And then we have HSL value. HSL stands for hue saturation and lightness. And similar to give value, we have HSLA. A stands for Alpha value. Now let's talk about the color name value, how we can use color name value. So these are all most popular colored in CSS that we use, red, green, blue, orange, yellow, pink, mazina, brown, tomato, Vallet, et cetera. And there are a lot of color names, which I don't define here. You can search it in websites. Just you need to search websubclor in your browser, and then it's going to provide all the color names. Now, let's talk about hexadecimal mode. This is the example of hexadecimal mode. Hexadecimal color codes start with has character. Then we need to pass to six dz. As you can see, here we pass a value AF 0000. This color code stands for red colored. And at the next example, He we use hashtag 0000 AF, and this color code stands for blue colored. If you search it websp color with hexadecimal code, you can find the hexa codes of any color. Our next color mode is RGB. R stands for red, G stands for green, and B stands for blue. First, we need to provide the red value, and we need to provide the value 0-255, not less than zero, not more than 255. And this is how we can create any color. And if I pass the exact color code, it's going to return red color because our green value is zero. Also our blue value is zero. And for the red value, we use the highest value 255. That's why it's going to return the perfect red color. Don't worry. I'm going to show you the example with practically. Next value is HSL. HSL stands for H for hue is for saturation, L for lightness. In Hue, here you can pass value between zero, two, 360. If you pass zero, there is going to return red color. If you pass 120, is going to return green color, and next value, saturation stands for intensity. You can control the color intensity using this value. You can control the brightness of this color, otherwise, dullness of this color using this property. And our next value lightness, you control the light of this color. And here you can pass value between zero to hundred percent. Don't worry. I'm going to show the example with practically. And our last two color values are RGBA and HSLA. A stands for Alpha value. It's mean opacity of any color. Here you can pass value 0-1. If you pass zero value, then it's going to make your object completely transparent. And to provide full color, you need to pass one value. And if you want to apply the 50% color, otherwise, 50% transparency, then you need to pass 0.5 Wow. So without wasting your time, let's start the practical and see how we can use these color modes. So as usual, side by side, I open my Visual Studio code editor and my browser using Live Server extension. So at first, I'm going to color our H one tag, heading one. So here I use color property. As you know, our first color mode is color name. So here, I'm going to provide a color. By default, it come with black color. So I want red color. Pass the color name RED. If you set this file, you can see the red. There is nothing special. And now I'm going to use different color mode in our box step. So here I'm going to use a property named background color. So I'm going to uncommen this line, and at first, I'm going to use a color name called blue. And I'm going to set this file. As you can see, after pass this color name, it fill our box with blue color. If you want to use gold color, GOLD gold, you can see the result. It provides the gold color. Also, you can search for any color name. Let's search a color name, which is start with A. Here you can see a color name forced green. If I use this color and set this file, you can see the result. Here we can use hundreds of color names. Now, let's talk about this second mode, which is xa decimal code. To use xa dicimal value, first going to type x a code has. Then I want blue color. For blue color, we need to use this color code, 0000 if if. If I use this color, as you can see, as you can see this time, our box filled with blue colour. And if we use red colored, only the pure red color, then you need to pass it start with FF then 0000. If I set this file, you can see the result. And if I use blue and red together, I would pass FF 00 FF. And this is this file, it's going to return pink color. If you have knowledge about color wheel, then you can understand why it's written pink colored. And if I use FF value for green colored, now we have six F in our hexadecimal value. It's going to return pure white colored because if we mix RGV advance with full potential, then it's going to return white colored. So using this combination, we can use many colors. Our visual studio provide the color palette. If I drag our mouse and change the value, as you can see, it provides a lot of adicional version of this color. Suppose I want to use green color. So these are all green color variant with the hexa dicial Value. Here you can see the head Disial value If I use this color and set this file, as you can see it apply the color in our box. Now let's talk about RGV move. So I'm going to duplicate this section and comment out previous one. And this time, I'm going to tie RGB. Then I said the round uses first going to pass R value R stas for red. So I'm going to use 255. And for green, I'm going to pass zero, and for blue, also, I'm going to pass zero. If I set this file is going to return pure red color. But if I use 255 value for blue, again, it's going to return pink color. At the same way, if I pass 255 for green value's going to return white color. If I open this color palette, which is provided by Wiser Studio code editor, here you can see the RGV value. If I drag my mouse and select any color, otherwise, any color variant, here you can see the RGV value. If I use this code and set this file, as you can see, it apply this exact color in our box. Now let's talk about another color mode, which is HSL. I'm going to duplicate this section and comment out the previous line, and I'm going to replace RGB with HsL Hue saturation and lightness. For Hue, I'm going to pass 120. It is for green color, and for saturation, I'm going to use 50%. Also for lightness, I'm going to use 50% light. If I set this file, as you can see, it's return green color. And if I increase the value, if I increase the value of saturation, then you can see if I make it 100%, it's going to return pure green color. But if I increase the lightness value, suppose I'm going to make it 100%, then it's going to return the exact white color because if I increase the lightness of any color, it's turn into white. I need to use below than 100%. Suppose I'm going to use 90, 90%. Now you can see, now it used this very light green color. So if I change the color using this color palette, you can see the HSL value. From a, you can use any color. If you decrease the lightness value of this color, then it's going to provide the darker version of this color. And now I'm going to pass 240 value 240. This stars for blue color variant. If I sub this file, now you can see it provides darker version of blue color. And if I make it 100%. And this is this file. Also, if I make light, 50%, here you can see the result. Now it provides exact blue colored. Now, let's talk about the Alpha value. I'm going to use the Alpha value with RGV value. So duplicate this section and comment out previous line, and here I'm going to pass RGBA. As you know, first hair, you need to pass red color value. For red color, I'm going to use pure red 255, and for green, I'm going to use zero. Also for blue, I'm going to use zero. But for Alpha, for now, I'm going to use one. If I set this file, as you can see, it provides pure red color. Now, I'm going to attach a background image to the box D. So type background image URL, and I'm going to provide fall or flower image. If I set this file, you can see the result. Sorry, we need to use this background image in our boot tag, not the DB limit. So I'm going to cut this section. And I'm going to paste it inside the body guid. I want to set this file. Now, as you can see, we cannot see our dground image through this bog step because our DV is filled with red color and it is not transparent. But if I want to make it completely transparent, we need to pass zero value as Alpha. If I make it zero, then set this file. Now you can see our box is completely transparent. And if I want to decrease the transfer C, we need to increase the value one by one. First, I'm going to use 0.1. And this at this file now you can see, now you can see our box is still transparent, but you can see red layer. And the same way, if I increase the value, if I make it five, and this at this file, as you can see, now our box color is semi transparent. So this is how you can control the transparency. If I pass nine value and this at this file, you can see the result. At the same way, Hs A value work. So I'm going to duplicate this line and comment out previous one. And if I pass Hs A, for you, I'm going to use 120 degree. And for saturation, I'm going to use 100%. Also, for lightnas, I'm going to use 50%. And for Alpha Velu I'm going to use one. If I set this file, as you can see, it return pure green color. But this time our box is not transparent. If I make it zero and then set this file, now you can see it completely transparent. And if I increase the value a little bit, 0.3 and then set this file, now it semitransparent. So this is how you can control the transparency of any color. So this is it for this tutorial. I hope now it's clear for you how we can use different mode in our colored property. And also we learn about transparency. So thanks for watching this video, stay tuned for our next tutorial. 37. CSS Gradient Background Tutorial: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about gradient colors. Now the question is, what is gradient? If you want to apply more than one color in a single element, in that case, you need to use gradient. Now, let's try to talk about different CSS gradient types. In how many style we can apply gradient color. We can apply gradient in linear style. Also we can apply radial gradients, and also we have repeating linear gradient and repeating radial gradients. Now at first, let's try to understand what is linear gradient. This is the example of linear gradient. Linear gradient color flow one side to another side. It may be flow top to bottom, lap to right, right to lap, and bottom to top. As you can see in our first example, at top, Herou use dark green color, but at bottom, herrow use light green color. At the same way, in our second example, at the left side, we use dark yellow, and at the right side, we use light yellow. But in our third example, at right side, we use dark blue color at left side, we use light blue color. And in our last example, at bottom, we use dark pink colored, and at top, we use light pink colored. Also, you can provide the value diagonal and angle is. Now, let's talk about radial gradient. This is the example of radial gradient. This gradient style not going to start from any side. It can be start from the center, also from the right bottom, lip bottom, laptop, et cetera. If you notice the fourth example, as you can see, our gradient colors start from the top corner. At the top lip corner, you can see the dark variant of this color. And at the right bottom corner, you can see the lighter version of this color. So without wasting your time, let's start the practical and see how we can apply. So as you can see, side by side, I opened my visual studio code editor and my browser using lip server extension, and I already created a Sal document named index dot a table. So as you notice, in our body tag, we have a deep tag with glass named box. And I style this dip tag in our style section. Here we say 90% width, and we say 600 pixel height, and also we set a solid to pixel boded, and our background color is gray. So as you can see in this box, we apply only one color, which is gray, but I want to apply multiple color in our background. For that, we need to use gradient calves. So I'm going to delete this line, and I'm going to apply this property name background. And I want to apply linear gradient. Linear gradient. As I told you, linear gradient color work directionally. It can be moved from the lap to right side up to down and down to up, also from the right side to lip side. Here you can apply multiple color as much you want, but I would like to start with two color. So our first color is red, and our second color is yellow. If I set this file, you can see the result. By default, it move top to bottom. It apply red color at the top and it apply yellow color at the bottom. And now I want to provide the direction. I want to direct it at the right side. So here, I'm going to tie the starting position on to pass comma to right. You can see the result. It starts from lip side and we direct it at the right side. That's why U colour appear at the right side. And if I pass Value to lap and set this file. Now you can see it shipped red color at the right side. Now it's moving right to left side. Also, you can change the direction. You can make it top, otherwise, bottom. But now I'm going to show you how can we spread the color at diagonal position? Suppose I want to set the direction at this corner. For that, we need to pass bottom right. Let me show you to bottom right. If I set this file, you can see the angle. Now the colors start from this corner and it int this corner. And this is how you can sit top right, top lip, bottom lip, whatever you want. Not only that, also you can pass particular angle. So I'm going to duplicate this line and comment out previous line. And this time I'm going to pass particular angle. Suppose I want to pass 45 D. If I set this file, you can see the result. Now our gradient color start from the 45 degree angle. So you can rotate linear gradient color at any direction, and also you can pass minus value. Suppose you pass -45 degree. If I set this file, you can see the result. Now it's says the linear gradient direction. With that, as I told you, we can apply multiple colors. We can apply more than two colors. So here I'm going to apply another color called green. If I set this file, you can see the result. Basically, you can apply color as much you want. If you want to apply blue color with green color, yes, you can just to pass the value. After coma, you need to type blue. After set this file, you can see the result. And remember, you can type any type of color values. For now, here we use color names, but you can apply RV hexa value, otherwise, transparent colors. Let me show you the example. So to duplicate this line and comment out previous one. And this time at first, I'm going to remove this degree value, and after red color, I want to apply color in RGB mode, some type RG BA. As you know, A value stands for Alpha. For red, I'm going to type 255. For green, I'm going to pass zero, and for blue, I'm going to pass 255 again. And for Alpha value, I'm going to use 0.0 0.5. It's mean semi transparent. If I set this file, you can see the result. Oops, there is some typing error in my code. We need to close the brown brass. If I set this file again, you can see the result. We already learn about different color modes in our previous tutorial. So our color is semi transparent. But if I pass only zero, then set this file. Now you can see our color is fully transparent. Now you can see only the red color. I hope now it's clear for you. Now let's talk about repeated linear gradient calves. Let me show you how we can use it. So I'm going to date this section and comment out this line, and at first, I'm going to change the value name. For that, we need to type repetate linear gradient, repeating the linear gradient, rate, green and blue. I want to set this file. A set this file, you can see the result. Now you might have question, what is the difference between these two? You might think their working process is same, but it's not. But here we can use percentage value with the c. Let me show you. Suppose for green, I'm going to apply 10%. Also for blue, I'm going to apply 20%. If I set this file, you can see the result. Now you can see our gradient color is repeating. This is called repeating linear gradient. Also, you can provide direction. So here would pass 45 degree. If I set this file, you can see the result. Now, let's talk about radial gradient value. I'm going to duplicate this section and comment out previous line, and I'm going to remove this line. And as a value, this time I'm going to type radial gradient. And I'm going to start to eat two color red and yellow. If I set this file, you can see the resin. Here we do not provide any direction, and it is the default position. That's why radial gradients start from the center. At the center position, it starts with red colour, and then it's sprayed yellow at the corners. Also, you can provide as much color you want. Suppose, with red yellow, I want to apply green color. And set this file, you can see the result. Not only that, also you can define the ratio of this color. Suppose I want to apply red color 5%. And for yellow, I'm going to use 15%. And for green, you can take any value. I'm going to use 60%. If I set this file, you can see the result. Also, you can define shape of this gradient. You can use ellipse, also circle. Let me show you. If I set my box height 300 pixel and the set this file, now you can see our gradient shape is ellipse. It is the default shape, but I don't want ellipse shape. I want circle. For that, here you need to type circle. After step this file, as you can see, now it apply circle shape. Not only that, also you can define the size of the gradient. And to define the size, we have total four value. Our first value is furthest corner, and here's the default value. Then we have closest side. Also we have closest corner and our last vale is furthest side. So I'm going to apply one by one all of these. So first, I'm going to duplicate this line and comment out previous line. And at first, I'm going to remove this value circle. The first value I'm going to use, which is closes sight. Up that we need to type a keyword, which is a after that, we need to provide the direction. So for direction, I'm going to pass 50% and 50%. It's me in the center. If I set this file, you can see the result. And now I'm going to move this circle at lip side. So I'm going to use 20%. If I set this file, you can see the result. Our first value stands for direction and our second value stands for Y xs direction. And if you want to move it vertically, then you need to change the second value. Suppose I want to move it 90%. If I set this file, you can see the result. From the left, I move 20%, and from the top, here I move 90%. And for now, I'm going to remove this percentage value of this color. I don't want it. And I'm going to set this file again. Now I'm going to apply another side, which is far this sign. If I set this file, you can see the result. Now you can see now our color can move for this side as much as possible because he we use for this side, but the position of the center is still remains same, which is 20% by 90%. If I make it 50% by 50% from the xs and from the xs, if I make it 50% by 50%, you can see the result. The next value we have is farthest corner. If we use farthest corner and this at this file, then our color try to reach the corner as much as possible. After set this file, you can see the result. Also, we have closest corner. So if we replace farthest with closest, and they set this file, sorry, closest side, not corner. So if I make it side, they set this file, you can see the result. If I move it 20% by 90% and the set this file, this is how it's work at closest side. But if I make it closest corner, and then set this file, now the color try to reach the closest corner. But if I replace closest with furthest and this is this file, you can see the result. Now it try to reach the farthest corner. This is how this gradient works together, and we need to experiment with that. Now let's talk about the last value, which is repeating radial gradient. So again, I'm going to duplicate this section and comment on previous line. For now, I'm going to remove all of it, and I'm going to tie the value name repeating radial gradient and semigld two in this line. First color I'm going to use red. The second color I'm going to use yellow. And the third color, I'm going to use green. For green, I'm going to apply 15%, and for yellow, here I'm going to apply 10%. If I set this file, you can see the result. So this is it for this tutorial. In the next tutorial, we are going to talk about another gradient property, which is conic gradient. So thanks for watching this video. Stay tuned. 38. CSS Conic Gradient Background Tutorial: Nice to see you guys. In this tutorial, we are going to talk about a new gradient property, which is conic gradient. Now you might ion what type of gradient is that? A conic gradient is a gradient with color transition, rotate around the center pot. To create conic gradient, you must define at least two colors. Now, let's define conic gradient. So let's remove the background color, and here I'm going to use another property, which is background image. And I'm going to apply conic gradient. Conic gradient. Then we need to use round brass. At first, I'm going to apply three color conic gradient. At first, I'm going to pass red, and our second color is yellow, and the third color is green. If I set this file, you can see the result. This is conic gradient with three color. Now I'm going to apply two more color. So next I'm going to apply blue and black. If I sub this file, this is how it look. Not only that, also you can define degree. Also, you can define degree for each color. Let me show you. So I'm going to duplicate this line and comment out previous line. And I'm going to introduce two color. Suppose for red color, I want to apply 90 degree. For yellow color, also, I want to apply 90 degree. And for the green color, I'm going to apply 180 degree. If I sub this file, you can see the result. So as you can see, combine it take 360 degree. Now, let's create a pie chart with that. If I type border radius, border radius 50%, and then sub this file, it's going to turn into a Pi chart. Not only that, also you can specify the starting angle of this color. Let me show you. Again, I'm going to duplicate this section and comment on previous line, and this time, I'm going to use only two color. And also, I'm going to revoke these values degrees. And I'm going to set this file. After set this file, as you can see, our colors start from this state line, this angle. But we can rotate this gradient. Let me show you how. Now here, I'm going to pass from 90 degree. If I set this file, you can see the resin. We rotate it up to 90 degree. If I pass 45 you can see the result. Now you rotate this angle 45 degrees. Not only that, also you can change this center position. Let me show you how. So again, I'm going to duplicate this section and comment out previous line. And this time, I'm going to change the position. So here we into type at 60% from XXs and from YXs I'm going to use 45%. If I set this file, you can see the result. So this is how we can use conic gradient color. Also, it come with another value, which is repeating conic gradient. So again I'm going to duplicate this line and comment out previous line. And this time I'm going to apply repeating conic gradient. I think there is a spelling mistake repeating repeating conic gradient, and I'm going to apply to two color red, 10% and yellow, 20%. If I set this file, you can see the result. So this is the new gradient color property in CSS. If you want to explore it, then you need to try yourself. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 39. CSS Opacity Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we're going to learn about ACS's new property named opacity. Basically, we use opacity to transparent any ML element. So 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 and my browser using lip server extension, and I already create an TML document named index dot TML. If you wrote, you can see, we have a dip tag, and also set an ID box. And inside this dip tag, we have an image, one hearing to tag and one paragraph. And now I'm going to use Opacity property in our box tag. So hero type Opacity. And here we need to pass value 0-1. Suppose I'm going to pass 0.5. It's mean semi transparent. If I set this file, here you can see the result. Now our whole dip section becomes semi transparent, and if you make it fully transparent, just you need to reduce the value, 0.0. Otherwise, directly zero. If I set this five, as you can see, now our dip element is not visible. Now it's completely transparent. And if you want to make it fully visible, here you need to pass one. If I set this file, this is the reason. In our previous tutorial, we learn about RGVAclor A colors transfer Alpha value. It's going to transparent our background colors. But if we use opacity property, it's going to transparent all of the content, all of the content inside this box element. It's going to transparent the image, the text, everything. Now, if you want to particularly transparent this image, just you need to use opacity property in your image tag. So inside the image tag, I'm going to type Opacity, and I want to make it semi transparent. So I'm going to pass 0.3. If I set this file, you can see the result. Basically, there is nothing so much in this property, but it is very useful property. So this is it for this tutorial. Thanks for watching this video statune for the next tutorial. 40. CSS background blend and mixed blend: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS property. And in this tutorial, we are going to learn about a new CSS property, which is background blend mode. Now the question is, what does that mean? Suppose at the same time you use gradient background color, also background image, and now you decide you are going to blend both the background. You want to blend image with the background color, and you can create different effect with it. And this is possible by this property, background blending mode. And these are all CSS background blend mode values, normal colored edge, hue, multiple, color bun, color, screen, hard light, saturation, overlay soft light, et cetera. So let's stop the practical and see how we can use it. So as you can see, side by side, I open my results studio code editor and my browser using lip server extension, and I already create an ML document named index dot TML. If you notice, you can see, we have a Deep tag in this document. And here we use gradient color gradient background color to this dip tag with the gradient background color, and now I'm going to put an image with this background. For that, I'm going to use background image property, background dash Image. So here, after comma, I'm going to use URL. Then inside the roundres inside the single codes, I'm going to provide the image name, flower dot JPG. If I show you my current working directory, you can see the image name. So app should be Capito. After set this file, you cannot see the image because before I use the flower image, here we use a gradient background. Now the flower image is PhaniGradient background. So I'm going to use a property background then mode. Background. Bland mode. First value I'm going to use, which is screen. If I set this file, you can see the result. Now you can see our image, try to match with the gradient background, and it's return this effect if we use screen blending mode. And now I'm going to use another value, so I'm going to duplicate this line and comment out previous one, and here I'm going to use overlay. If I set this file, you can see the result. Again, I'm going to duplicate this line, and I'm going to use another value, which is multiple. If I set this file, you can see the result. Next, I'm going to use darken. So I'm going to begin this line and comment on previous one, and here I'm going to replace multiply with darken. After set this file, you can see the result. Next, I'm going to use color value. So I'm going to comment on this line, and I want to replace darken with color. After set this file, you can see the result. Every time it's going to return different result. And you should try one by one all this value to get the different result. And remember, normal is the default value. Also, you can use multiple image. If you don't want to use any gradient color and you want to blend between two images, yes, you can. Just you need to pass two background images. And then you can apply same blending modes one by one. Now let's talk about the another blind mode propriety, which is mixed blind mode. The difference between mixed then mode and blend mode is in background then mode property, we need to use background color and background image innate sim property. I want to say we need to use the image and background gradient color innate background. But in mixed then mode, you can use one of the value inear property. I want to say, suppose you use gradient color and you want to blend the background color with a text. Otherwise, you can blend different DV element at once. Now, let's talk about the values. These are all values that we can use in mixed brand moods. So without wasting your time, let's start the practical. For now, I'm going to duplicate this line and comment out previous line. And this time, I'm going to use only the background image. I want to remove the gradient color, and I'm going to set this file. After I set this file, you can see the result. Also, I'm going to comment out this line. And now I'm going to put a text in this deep element. So here, I'm going to use H two tag, H two, and instead the heading to tag, I'm going to type hello world. And I'm going to set this file. And now we need to style this H two element. So here, I'm going to select H two and inside the color recess, first property, I'm going to use background, background, and I'm going to use red color background. Rate. The second property I'm going to use text line, text line, Salton, and I'm going to set the font size font size, and I want to make it 55 pixel. After set this file, you can see the result. And also, I want to place it middle, so I'm going to add some margin top. Merging top top side, I want to assign 200 pixel. If I set this file, you can see the result. And also, if you want to change the font style, yes, you can. Just into tag font family font family aerials. And now I want to apply the mix blend mode property in our HT element. Mix blend mode. First I'm going to use, which is screen. If I set this file, here you can see the result. And next I'm going to apply another value, which is overlay. After I set this file, you can see the result. Next, I'm going to use another value. So I'm going to comment out both the line, and this time, I'm going to apply difference will if I save this file, you can see the result. So one by one, you can try all the values, and it's going to give you different effect. So this is it for this tutorial. In the next tutorial, we are going to learn about display property. So thanks for watching this video. Stay tuned for the next tutorial. 41. CSS Display Tutorial: Hello, guys, good to see you. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn a new property called display. The display property specify the display behavior of an element. Let me simplify it. The display property in CSS specify how an estimate element should be displayed on the web page. It defines the type of rendering box used for the element, which effect its layout and positioning in relation to other elements. Now, let's talk about the values of this property. These are all values of this property. Here you can see, we have total 21 values. And in this tutorial, I'm going to cover these five values, non inline block, inline block, and last item. And I create safer section for these four values, flax GET, inland flax, and inland read. So don't worry about it. In our upcoming tutorial, we are going to learn about it, and we are going to learn table related values in our upcoming tutorials. 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 and my browser using live server extension, and I already create an ML document, named index dot HTML. So in our body tag, we have a unwale list, and in this list, we have total five list item. So we are going to start our journey with dispbity. So inside this tile tag, first, I'm going to select H one tag, H one. Then inside the Calverss I'm going to use dstablet display. First val I'm going to use, which is nun. Basically, Nun Value used to hide the element, NONE. If I set this file, you can see the result. Now you can see it hide the H one tag from this page. If you use nun value, it's going to completely remove the element. At the same way, if you want to hide the under list, just you need to tie. First, you need to select this element, L, L, then inside the car verses. Again, you need to use display probilty display none. If I set this file, as you can see, there is no nodal list in this page. Now it's completely blank. Remember, this element and tags still available in our page. Just no property, hide this element. If I select this document and press control you, you can see the result. Here you can see all the li tags. Also, you can see the heading tag. It is very useful value. Why no use Hort Efect otherwise animation, they never use this value. So for now, I'm going to remove this nn Value. I don't need it. Now let's talk about our next value, which is in line. So as you can see, there is a list, and we have to tell five list item. And now I'm going to add border all of this list item that you can understand all the LI tags clearly. So I'm going to type AI then inside the Colver says, I'm going to add border. Border one pixel, and I want solid border. With that border color is red. If I set this file, you can see the result. Now you can see LI items take all the width of this element. A one item take complete room. To clear it more easily, I'm going to add the bodred in our UL tag. So to copy this property and value and I'm going to paste it here, and this time, I'm going to use black color bored, Black. And I want two pixel bored. After set this file, as you can see, the unordered list, consume the whole area, the whole blank area. So if I specify width of this evil tag, suppose with 300 pixel. Then set this file. Now you can see our list items consume the exact width of this container, which is specified in our width section 300 pixel. And now I want to show all the list item side by side. I don't want to show them one below the other, so we need to display in line all the LI items. So inside the LI items, I'm going to use display propriety. Display inline. If I set this file, you can see the result. Now you can see it print all the item in a single row. It's mean side by side. This inline value is very useful for text related properties, suppose like span, list items, et cetera. Most of the time we use inline value with and cut tags. Now, let's talk about the blog value. For that, I'm going to use some dummy span tag. Span. And inside the span tag, I'm going to type one. Then I duplicate this span tag four time. And I'm going to numbering this span tag. Two. Five. Before I set this file, as you can see, we do not use display property for the span tag. So if I set this file, you can see the result. Now you can see it print all the items one by one in a single row. If I use display property block, basically, it's going to play the opposite role of in line. Let me show you. So if I select all the tags, pan, and then inside the car res, I'm going to use disboty display, and I'm going to use display block. If I set this file, you can see the result. Now you can see it print all the item in a different row. If I add the border, someone to copy this line and test it here and set this file, you can see the result. Now it play the opposite roll up in line value. Basically, this third block value convert the span element into a development. Now these elements are work as a development. Let me show you. Now we can assign W with 300 pixel. After assigning the weed, you can see the result. But what? If I uncommen this line, assigned with, now you can see our With property do not work properly in span tag because span is a text related tag. But if you use display property block, it convert it, and now it's work like a deve ilment. Now let's talk about another property, which is in lend block. As you can see, all the list items are aligned in a single line because her use inline property, but you want to assign W to this item. If you use inline value, then you cannot assign to these items. Also, I want to assign padding and margin from all the direction. If we assign padding or margin, let me show you some type padding 20 pixel. If I set this file, it's going to assign padding from the left side and the right side. It's not going to assign padding from the top and bottom. If I set this file, you can see the result. If we assign margin to this list item, it's not going to work from all of the direction. It's going to work only the left and right side. Let me show you. Margin I want to add five pixel margin pH. If I set this file, you can see the result. As you can see, it provides five pixel margin from left side and right side, but it do not provide five pixel margin from top and bottom. To resolve this problem, we have inline block V. I want to print all the element in a single line. Also I want to assign margin. Don't worry about five. If I increase the browser width, now it's aligned to the single line. But if we use inline Inline lob value, inline block, and then this file, now you can see it provide margin from top and bottom. Now you can see it print all the element in a single row. As it works as a block element. That's why we can assign with margin, et cetera. Span tag, LI tag, CAT tags, these are all text related elements. By default, it do not work like a de iliment. That's why we cannot provide weed, height, margin, et cetera. But we can convert this element as a de ilment using inland property, property, inline block property, et cetera. Now, let's talk about the last property for this tutorial, which is list item. As you can see, in our span tag, we use display block. But for now, I'm going to duplicate this line and comment out previous line. And if we convert list item, disvalue List it and then set this file after set this file, as you can see, there is no changes because list item convert this pen tags into a list items. Now it's work like a list items of UL tag. It's pretty confusing. Let me clear the concept with example. So here, I'm going to create a dip tag. BF, and I'm going to assign class name dot, and the class name is box. And inside this dip tag, I'm going to take total two paragraph tag, P. And in this paragraph tag, I'm going to use spentag span in paragraph, I'm going to use total three Spen tag. So I'm going to duplicate the spentag two time. This is span one. This is span two. And this is span number three. Then I'm going to duplicate the whole section again. And I'm going to set this file. After set this file, you can see the result. And now I'm going to select all the paragraph tag inside this box. So inside this tile tag, first, I'm going to type dot BOX. Don't worry. We are going to learn about advanced selected in our upcoming tutorial. For now, I'm going to show you the example box, and I want to select all the paragraph inside this box. Then inside the Calibra says, first property, I'm going to use background color, background color, I'm going to use blue. Next property, I'm going to use little padding, padding, ten pixel. Also, I'm going to use little margin. Margin, 20 pixel. At last, I'm going to use this property. Display, and I want least item. Want to set this file. After set this file, here you can see the result. Now you can see it work as a list items. And also, if I comment out this section for now, I don't need this section and I'm going to set it again. Now you can see the actual result. Now you can see it convert all the paragraph tag into a list item. And also, you can see the woolet points. But you notice here we do not use any LI tag or UL tag, just to use paragraph tag and span tag, but it still work as list items. This is the power of list item ame. And now we can apply all the list item property in these items. Now we are able to use style image property, style position, et cetera. Let me show you. So I'm going to use a property called ist tyle position. List style position. By default, our value is outside, so I'm going to use inside value. If I set this file, you can see the result. Now you can see our list item points move to the inside of this container. So this is the power of this value. So this is it for this tutorial. Thanks for watching this video, stay tuned for the upcoming tutorials. 42. CSS Visibility Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related thesis. And in this tutorial, we are going to learn about a new property, which is visibility. Visibility pretty similar with Disbnun property. And these are all values related to visibility property, visible hidden collapse. I know you are already familiar with visible and hidden Video, but Cole's property will work with TVs. So let's start the practice and see how we can use it. So as you can see, side by side, I opened my Visal Studio code editor and my browser using Lifesaver extension, and I already create an STL document named index dot HTML. So as you can see in our body tag, we have under list and a paragraph, and I'm going to use visibility property in our style tag. So at first, I'm going to use I'm going to select UL tag UL. Then I said the ClrassF property, I'm going to use display. Now you might have questioned why I use display property. Let me show you. Display and Hemotype display value, nun. If I use display value nun and then set this file, as you can see, I hide our UL tag. It completely removed the UL tag. That's why our paragraph tag shift to upward. But if I comment out this line and use visibility, visibility, hidden and dense up this file. Now you can see the different. As you can see, it hide our UL tag, but still we have the exact area in this section, and that's the main difference between display and visibility property. Basically, it is very useful with Hor Effect and animations. Now, let's talk about our last value, which is lapis. For that, as I told you, we need to create a table. So here, inside the body tag up the UL tag, I'm going to create a table. Table. And inside this table, I'm going to create two table data, TD. Inside the table first going to create treble row PR and I'm going to create total two table row. So I duplicate this section, and inside this table row, I'm going to create two columns so type TD. And here I'm going to type one. And I'm going to create another TD tag. So I duplicate this section, and this day I'm going to type two. This is cell number one, and this is cell number two. And I'm going to duplicate all this section and replace one with C, and replace two with four. And I'm going to set this file. After set this file, you can see the table, but you cannot see the table cells because here we do not use any border. So inside the table tag, I'm going to use border. Border, and I'm going to use border one. If I set this file, you can see the result. Now it add border to this table. So as you can see, we have total two row in this table and two column in this table. And now I want to hide the four column value from this table. For that, we need to use visibility property. I want to hide the fourth one, so I'm going to assign a class to the T tag class, and our class them is four. Then you set the style tag, ramo type dot four. Then I said the Cairass I'm going to use the property name visibility. Visibility equal to hidden. If I set this file, you can see the result. After set this file, as you can see, it successfully hide the cell number four from this table. So this is the way that you can hide cell from this table. But what? If you need to hide a row from this table, let me show you. So remove this example or some remove this glass. Then in this Tar tag, I'm going to assign a class class X. You can assign any class name. So I'm going to select this class inside this style tag, X inside the Cliras visibility. This time, I'm going to use this value Caps. And if I set this file, and if I set this file, it's not working because here we do not use Tau. Now, if I set this file, you can see the result. It successfully hight one row from this table. This is the usage of this value, collapse. So thanks for watching this video. Stay tuned for our next tutorial. 43. CSS Html Basic Layout Design Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to create this basic layout design. It is a very easy and basic layout design, and I'm going to create this design using those properties which we learn in our previous tutorials. Here, I'm not going to use any advanced CSS properties. Basically, in this tutorial, I'm going to wrap up all the CSS properties which we learn in our previous tutorials. As you can see, in this layout, we are going to create heading section, a menu section, a content section, sidebar section, and footer section. So let's start the practical and see how we can use the basic CSS properties to create the layout. As you can see, we are in my visual studio codeator here we are going to try to create a basic DML layout. At first, I'm going to take a deep element inside the body tag, D. Then inside this de element, I'm going to take total five another div element, Dev and I'm going to duplicate it for time. Now I'm going to assign an ID to our paren Deb element, Bev ID, and I'm going to type rapper. You can assign any name. It is up to you. Also, I'm going to assign an ID to our first div element, which is inside the container. Otherwise, you can call it rapper. He type ID. This deep element is for header section, I'm going to assign header. And in our second div element, I'm going to assign ID Min in our third div element, I'm going to assign ID content. And in our fourth element, I'm going to type ID side word. This is the side word section in our fifth deep element, here I'm going to assign ID footer. Then inside the header deep element, here I'm going to use heading one tag, H one. Then I'm going to type, you can type everything, so for now, I'm going to type hello word. Otherwise, you can type your own website name. For now, I'm going to type hello world. Then I'm going to jump into the menu section here I'm going to use UL tag. Inside the nodal ist, I'm going to use LI tag, I. Also inside the LI tag, I'm going to use Cuttag. As you know, NCT tag is used for leaks. So type A, and inside this C tag, our first link name is H. Then I'm going to duplicate this section multiple time and in our second menu link, here I'm going to type about us. In our third link, here I'm going to type Galla and in our fourth item, I'm going to pass contacts. And then I'm going to jump into the content section. At first, inside the content section, I'm going to pass heading to tag and he type. I'm going to type basic design layout. Basic design layout. Then I'm going to type to Dummy paragraph. So here I use P tag, and I'm going to type um 30 word. Also, I'm going to duplicate this section. Here I pass two paragraph. Then I'm going to jump into the sidebar section. Also in this section, I want to print, I want to print the menu option. I copy the UL tag with the LI tag. Then I'm going to paste it inside the sidebar section. Then inside the footer section, here I want to type a dammitextOwise, you can type any word. Otherwise, you can type any paragraph, otherwise, you can provide some leak. Basically, I'm going to type my website. At the copyright. 2024. So this is our basic TMS structure of our website. And if I set this file and show you my browser, let me show you. Now you can see now our website look like that, and that look very boring and useless. And now we are going to start the thesis. So let's start this styling with rapper tag. Sorry, rapper element. So I'm going to use style tag inside the head tag style. Then inside this style tag, I'm going to select the rapper. I want to select the parent Dip element, and I'm going to use the ID wrapper. So you copy the ID name and I'm going to paste it here. Then inside the color res is, the first property I'm going to use border border. I want one pixel, solid border. With that, I want black color boddblack I'm going to set this file. And also I'm going to assign weed to this wrapper container, weed, and I want to set with 1,000 pixel. Are this file, if I show you my browser, let me show you, it's look like that. Now I'm going to open my website and my editor side by side. Then inside the wrapper, also I'm going to use another property called background color. Background and I want to set white color. Remember, when you start styling your table page, you need to start with body tag. At first, I'm going to select the body tag. Body, then inside the culivra says, I'm going to select font family property, font family, and I'm going to use aerial font. Real. I want to set this file. After I set this file, you can see the result. It change all the fonts which is inside the body tag, and then I'm going to assign a background color to our body tag. Awesome type background inside the body tag, then I'm going to use, and I'm going to use gray color background, gray. I want to set this file. And here you can see the result. And now I want to center this deep element inside this web page. For that, I'm going to use margin property. Let me show you. So inside the wrapper, I'm going to type margin. From top and bottom, I want zero pixel margin, zero, and from left and right, I want auto margin. Auto. Let's sub the file and back to the browser. Now you can see it successfully align the parent container middle of this page. From the left and right, it provides equal space. And if you notice you can see, there is a margin from this top side, but we do not use any margin from the top and bottom. For that, insert your body tag, we need to use another property. So insert the body tag her into type margin. Margin, zero. And also, we need to make padding property zero. And if I set this file and back to the browser, you can see the result. Now we don't have any space from the top side. And now we are going to design the layout from the inside. So let's back to the user's studio code. And now we are going to style the header section. So I'm going to type hashtag header. Then I said the calress I'm going to use a property called background, and I want to say it crimson color. Crimson I want to satisfy. Also, I want to duplicate this section and this time, this time, I want to set the menu section. I'm going to type Hateg menu. Here we are going to say it background color, light salmon. And I want to set this file. And also, I'm going to use the same color in our footer section. So I duplicate this section again, and this time, I'm going to select Footer. So copy the ID name Footer, and I'm going to paste it here. We place menu with Footer. And for the sidebar, I'm going to use light blue duplicate this section and replace menu with sidebar. Copy the ID name and I'm going to replace with Min I want to set this file. After I set this file, if I show you my browser, here you can see the result. Sorry, for the sidebar section, I want to use light blue. So I'm going to replace the color light salmon to light blue. And I'm going to set this file. After I set this file, I layout look like that. Now at first, I want to assign height to our header section. So I'm going to type in the header section, height property. Height, and I'm going to assign 100 pixel height, and I'm going to set this file. Let's open the browser and editor side by side. After I provide 100 pixel height to the header section, you can see the result. Now let's jump into the menu option. Here you can see the menu item as a list item, and the items are below to each other, but I want to print the menu items inline. For that, we need to use display inline property. Otherwise, you can use inline dp propriety. Let's select all the list items, which is inside the menu tag. So Herodotype, hashtag, menu, then inside the menu, all the LI tag, then inside the color says, I'm going to use display, and I'm going to use inland gog Value. I want to set this file. After I set this file, you can see the result. Now it prints the value side by side. Now you can see it print the items beside of each other. Now these items are arranged in a line. Also, it's going to work as a block element. I want to say also it's going to work as a deep element. Now here we can assign padding margin whatever we want to use. Now I'm going to target all the Cut tag which is inside the menu. For that, I'm going to duplicate this section, and I'm going to select all the LI inside the menu tag, all the LI tag, then inside the LI tag, I want to select all the NGA tag. Then I'm going to use dis property just block. I want to set this file. Now I'm going to provide some padding to these anchor tanks. For that, I'm going to use padding property. Padding from left and right, I'm going to pass five pixel and from top and bottom, I'm going to pass ten pixel. If I set this file, you can see the result. From top and bottom, I'm going to pass five pixel and from left and right, I'm going to pass ten pixel. After I set this file, you can see the result. I think it is not enough, so I'm going to increase the value. From top and bottom, I'm going to use ten pixel and from left and right, I'm going to use 15 pixel. After I set this file, you can see the result. And now we need to provide width to this content area. Also, we need to provide weight to this sidebd area. So as you know, our total width of this continua is 1,000 pixel. So for the content area, I'm going to use 800 pixel, and for the sidebar area, I'm going to use 200 pixel. So at first, we need to select the content area using its DNameHzta cont. Then inside the calibrss I'm going to assign wheat. Waste, 800 pixel. Then inside the side word? As I'm going to assign wet. West 200 pixel. If I set this file, now it's look like that, and now we need to shift the sidebar section at the right side. To do it, we need to use float property and we already familiar with that. Inside the content section I'm going to type float, float, it. For the sidebar, I'm going to use float property wt. I want to set this file. After set this file, it's look like that. As you can see our content overflow from the container, also you can see our footed tag, our footer section below the sidebar section. Now, if you remember in our float tutorials, we'll learn about another property named clear. In our previous element sidebar we use float property. That's why it's going to post the footer section below the sidebar section. Now, we need to clear the footer section. Basically, the clear property control the flow next to the floated element. If I use clear and I'm going to use clear both. If I sub this file, you can see the result. We already learned about this property in our previous tutorial, so I'm not going to explain it in depth. Now, let's add some more content to our paragraph tags. Inside this paragraph tag, again, I'm going to use Lim. Lorem this time I want to add 100 word, and I'm going to do the same thing for our next paragraph. Lim. 100. Up set this file, you can see the result. Basically, I use the extra content to feel the content area, and then I'm going to assign some pading to our footer section. So type padding, and I'm going to use the short end. From top and bottom, I want to provide five pixel and from left and right, I want to provide ten pixel. And from left and right, I'm going to provide ten pixel. Up set this file, you can see the result. And if you want to move this content at the right side, just you need to use text align property. Text align, right. And you need to set this file. After I set this file, you can see it moved the content right side. Now, if you notice our sidebar section is not look so good. So for that, I'm going to use minimum height property. Also, I'm going to use the minimum height property for the content area. So I'm going to use minimum height, and I want to assign minimum height 500 pixel. Then I'm going to copy this section and I'm going to use the same value for the sidebar section, minimum height, 500 pixel. If I set this file, now it's look pretty good. Now you notice you can see there is a gap between headersection and minu section. This gap is provided by our UL tag. ByefultUnwal list provide this gap, and now we need to target the UL tag, which is inside the Minutag. Hera moo type Hastag menu. Then in set the menu, I'm going to target the UL tag UL. Then inside the cariverss, we need to make margin property and padding property zero. We type margin zero. Also, we need to make padding zero. If I set this file, you can see the result. Also, you can see the same thing for the heading one tag. It is also provide little margin from the top. As we need to make it zero. He type hastag header, Then I'm going to select the H one tag which is inside the heading tag. Then inside the liver says, I'm going to type margin property, margin zero. Also, I'm going to make padding zero. If I set this file, you can see the result. Now I want to remove all the underline from the anchor tags, which is inside the menu. I'm going to select all the anchor tag which is inside the menu. For that, we need to use text decoration property, text decoration, none. And I want to set this file. Also I want to change the default color of this anchor tag. By default, it provides blue color, but I want black color for this font. I'm going to use color property, color, black. I'm going to set this file. Also, we need to do the same thing for the sidebar menu option. Here I'm going to tie hashtag, sidebar, then inside the side bar, I want to target all the and cut ta. Then inside the carnivorouss I'm going to use takes decoration property. Takes decoration, learn also I'm going to use colored. Color, I want black colored. I'm going to set this file. And now, if you notice, you can see, there is no gap between the content and the sidebar of the browser. For that, I'm going to add little padding to this content section. So let's jump into the content section and I'm going to use padding property. Padding, and I'm going to assign ten pixel pading from all of the direction. Before I set this file, I'm going to tell you something. If I set this file, it's going to increase the actual container width. Because as I told you, if we add padding from every direction, otherwise side by side, it's going to increase the element width. Let me show. After set this file, you can see the result. As you can see, it provides little space at the left side. As it provides little space at the right side, but our estim structure is completely rearranged. To resolve this problem, we need to use box sizing property, and we already learned about it in our previous tutorial. Hemo tie box sizing, and I'm going to use border box value. If I set this file, you can see the result. Basically, as I told you, we're going to use only these properties which we learned in our previous tutorials. That's why I'm not going to use any advanced property to create this layout. I just use only the basic properties which we learn in our previous tutorials. After using box sizing puberty, we can add as much padding we want. Basically, shrink the content area and add the padding around it. And now I would like to change the adding background color. Here I use black color, but I don't want black color. So for that, I'm going to use color white. I'm going to set this file. As I'm going to assign little margin to it. So from the top, I'm going to assign 40 pixel. And from the right, I want to use zero pixel. From the bottom also I'm going to use zero pixel and from the left, I want to assign 20 pixel. If I set this file, you can see the result. And now I want to add little padding to the header section. Here I'm going to type assign the padding from the top side. I'm going to use padding of property. Padding top, padding top, I'm going to use T pixel. Also, I'm going to reduce some height. Here I'm going to pass 80 pixel height, and I'm going to set this one. I just try to fix the vertical alignment of the heading one tag. So I'm going to increase the padding top vedo. I'm going to make it 30 pixel. Then set this file again. I think 40 is perfect. After I study this file, you can see the result. Yes, 40 is perfect. Here, I just tried to create a basic layout with this property which we learned in our previous tutorial. We do not use any advanced CSS properties, and this design is not responsive. It is just a suding design. Here we do not apply any position property. Also, we do not apply any animation, hover effects, et cetera because this is the end of basic CSS section. From the next tutorial, we are going to jump into the adverse section. We are going to learn about position, Z index, media queries, et cetera. We are going to learn about units, variable, functions, and many more. 44. CSS Position Tutorial (absolute, relative, fixed, sticky) enhanced 90p: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about a new property, which is CSS position. Basically, this property come with five value, static, relative, absolute, fixed, and sticky to use the value properly, we need to use some helping properties. These are all helping properties that we can use it with position proprieties. P right, top and bottom. We cannot use lept and right together, we need to use one property between them. At the same way from top and bottom, we need to use one property, and to understand lap right and top and bottom position, we need to understand Xs Xxs and YXs. Suppose you want to move the element to the right side. For that, you need to use Xs, positive Xs and if you want to move it left side, in that case, you need to pass minus values. At the same way, if you provide positive Y xs value, then it's going to move the element downward, and if you provide minus value, then it's going to move the element upward. Without talking too much, let's start the practical and see how we can do 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 index dot HTML. So as you can see in our estimate document, we have one heading tag and two paragraph tag. And between these two paragraph tag, we have a deep tag with ID taste, and in our style section, we already style this deep element. We are going to experiment with position property. At first, I'm going to use relative value, position relative. Position, relate. Basically, here I use only one property, position relative, but I do not use top lap bottom value. If I set this file, it's not going to change anything. Let me show you. After separate this file, as you can see, there is no changes. As I told you earlier, to use position property, we need to use another supportive property. I'm going to use P property. P and from the lap, I'm going to move it hundred pixel. If I set this file, now you can see the result. It move our element 100 pixel from the left side. Also, I want to move it from the top side. So I'm going to use top property, top hundred pixel. If I set this file again, you can see the result. It moved the element, 100 pixel from the top side. Relative position move the element from the exact position from the element. If I pass -100 pixel from the top, then set this file, now you can see the result. This is how relative position works. Now, let's talk about our next property who is absolute. At first, I'm going to comment out both the line, and I'm going to change the position. Relative to absolute. If I set this file, now you can see the result. In CSS, absolute positioning is a layout technique that allows you to precisely control the position of an element relative to its containing or nearest position ancestors. As you can see, we do not use lit and top property, just to use position absolute. Our second paragraph by default, go behind this element. Now I'm going to use top property, top and lip property. Her type from top I want to assign 100 pixel. If I set this file, it's going to work according to absolute position of this screen. This is the absolute position of our window, so it's going to move the element, 100 pixel from this position. If I set this file, you can see the result. If I make it ten pixel and set this file, now you can see now it's more clear for you. Basically, it's work according to Tarrant element. Similarly, if I try to move it p side, for that, I'm going to use p value, lap 20 pixel. Sorry, 20 pixel not 200 pixel. If I set this file, you can see the result. As I told you, this position work according to the parent element. And as you can see, in our case, our parent element is body tag. Just you need to remember one thing. Relative position work according to the exact position, but absolute position work according to parent element. Now, let's talk about our next value, which is position fixed. But before I use this value, I'm going to duplicate this paragraph tag multiple time. And I'm going to set this file. After set this file, here you can see the scroll bar. If I scroll down this scroll bar, as you can see, it move our deep element with this scroll bar. But if I use fixed value position fixed, and then set this file, now you can see there is no changes. But if I scroll down my page, as you can see, our element is fixed to its position. Our element is not moving with this scroll bar. So that's the usage of fixed value. But if you use absolute otherwise relative, then you're going to move the element with the scroll. Now, let's talk about the next value, which is sticking. But before, again, I'm going to duplicate this paragraph multiple time and set this file. Then here I'm going to use position sticking and I'm going to set this file. After I set this file, you can see the result. Now you can see before the element, we have to tell four paragram also I use top end lit property. For now, I'm going to change the values. From top, I want to stick it 50 pixel and from the lap, also, I'm going to stick it 50 pixel, and I'm going to set this file. After I set this file, if I scroll down this page, as you can see, the elements stick to the exact position. What do we mention in our style section, top 50 and lap 50. If I try to scroll down my page, as you can see, it's not moving. The position sticky property in CSS is a hybrid position of relative and position fixed. Until it gets specified scroll position, what do you mention using top and lip property, it behaves as a relative position and after reach the scroll position, it become fixed. This behavior is particularly useful for creating elements like header, sidebar, and footer. Sorry, not the footer. We do not use it for footer. Basically, we use it for header and sidebar. Whenever users scroll down the page, sometime we need to stick the sidebar and header section to our viewpoint area. That's why we need to use the position sticky. Now I'm going to show you how we can use absolute value and relative value together. At first, I'm going to clear all the elements from our body tag. I'm going to remove all of it. So for now, our body is completely black. At first, inside the body tag, I'm going to assign to paragraph tag using P, and I want some dummy text. Lower 200. Then after this paragraph, I'm going to create a deep tag and I want to assign a class name box. Then inside this deep tag, here I'm going to create deep tag, B dot box two. And now at first, I'm going to style this box def element. Is this style tag, I'm going to type dot box. Then inside the colors, first, I'm going to assign width with 500 pixel. And also, I'm going to assign height, height 500 pixel. Then I'm going to assign background color. Background. Yellow, otherwise, red color. I'm going to set this file. So to set this file, as you can see, this is our deep element, and it is a paren deep element. Then I'm going to style the box two element, tot, box two. Then I set the cars is. First property I'm going to use W W 100 pixel. Then I'm going to use height, height 100 pixel and background color is pink. But I'm going to use position property, position absolute. And from the top, I want 50 pixel. And from the lab, I want 50 pixel. If I set this file, you can see the result. As I told you earlier, absolute positioning work according to the parent dip element, otherwise, parent element, but you can see, it's not working according to it. To resolve this problem, we need to use position property in our box dip element. I'm going to type position and we need to make our position relative. If I set this file, now it's work according to the exact parent element. Now if I move our parentive element left and right, it's going to move the child element according to the parentb element. Let me show you. From the top I want to move it 100 pixel. And from the lab, I want to move it 200 pixel. After set this file, you can see the result. So this is relative position and absolute position work together. Remember, absolute positioning work according to immediate relative element. So I hope now it's clear for you how positioning work in CSS. So thanks for watching this video, stay tuned for the next tutorial. 45. CSS Zindex : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about CSS Z index. Z index property depend on CSS position propriety. And if you do not use position property, then you are not able to use Z index propriety. So let's try to understand how we can use this property. I know you are already familiar with Xxs and YXs. Vertical direction stands for xs and horizontal direction stands for X axis. Now, let's try to understand what is Z index. Without Xxs and Yaxs we have another axis, which is known as Zixis. It is pretty similar with stack order. Let's understand it with this image. As you can see, we have a three div element, Di A, B, and C. Is main, first we create Di A, then we create D B and last we create deep C. That's why it's follow this order, B is top of A element and C is top of B element. And using position property, we arrange it in this way, and now I want to bring B above B. Otherwise, if I want to bring it above the, in that case, we need to use Z index. In one sentence, it can control the stacking order of positioned element on a page. So without wasting your time, let's start the practical and see how we can use it practically. So 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 TML document named index dot HTML. So in our body tag, we have totall three dim Db A, D B, and deep C. Also, here we assign ID, box one, box two, and box three. And if I show you my style section, as you can see, in our body tag, we use Aerial font. Then we style the DB element. Hear we assign 200 pixel width and 200 pixel height, and we set position absolute. Then we assign a border, a solid border. Then one by one, we design the boxes. As you can see, in our boxes, Harrow use dark green color. Also, we set position from the top and lid. From top, we assign 100 pixel and from p we assign 50 pixel. Then in our box two, from top, we assign 150 pixel and from lab we assign 100 pixel. And in our box two, we assign from top 200 pixel and from bed 150 pixel. So basically, I want to say we say three different position for for the three different element. And as I told you, we need to use position property to use Z index. That's why to all our D, we use position absolute. And now I'm going to use Z index property. Suppose I want to move B above the. For that, in our box two, I'm going to use Z index property, Z index, and here, I'm going to pass one. By default, Z index value is auto. And if I set this file, as you can see, it move B element above the R. At the same way, if you want to show A above the, for that, you need to use same Z index. So I'm going to copy this Z index and remove it. Then inset the box one, I'm going to paste it here. If I set this file, you can see the result. Now it move a element above the R. Not only that, also you can use Z index value in minus. Let me show you. For that, I'm going to comment out this line. Then in our box two, again, I'm going to use Z index. The index minus one. If I set this file, you can see the result. Now you can see, now it moved elemined behind the A and C. Now I'm going to create another box. So I'm going to do we get this section and C with B. And also I want to change the ID, call box four. Also, we need to css this element, so I'm going to duplicate this section and replace three with four, and we need to position it, so I'm going to change the top labed value. Here I'm going to pass 250, and also I'm going to increase the layed value, which is 200. And then I'm going to change the color and her set orange color. And now I'm going to set this file. After I set this file, you can see the result. Now I'm going to comment out Z index from box two. If I set this file, you can see this stack order. And now I want to bring A above the. So in our box one, I'm going to use Zain dx one, and I'm going to set this file. After set this file, you can see the result. And now I want to bring B above the A. For that, we need to use Z index property. Z index value two. If I pass Z index value two and the set this file, you can see the result. At the same way I want to bring C above the A and B. For that, again, I'm going to use Z index property and I'm going to pass Z index value three. I I set this file, you can see the result. Also, I want to brnt box four above the A B C. So here I'm going to pass Z index Video four. If I sub this file, you can see the result. So this is how you can arrange the item using Z index property. I hope now it's clear for you how Z index work. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 46. CSS Media Queries Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn a new property, which is media query. Basically, media query is used to create different SS for different platform. And if I talk about the media types, these are all media types. And here we have four types of media, all print, screen and speech, and all type going to work for everything, it's going to work for print, screen, and speech together. Suppose someone tried to print your website. And using print type media, you can control the print style of your print down. I want to say you can create separately CSS for particularly print purpose, and the most commonly used media type is screen. Screen Min, mobile screen, computer screen, tablet screen. All these device screen come with different resolution. And to create our web page perfectly responsive, we need to follow all of these. I want to say, we need to create different sass for mobile screen, laptop screen, otherwise, tablet screen. And last one is media type speech. Blind people cannot read our web pages. So they use screen readers and speech type media going to read the text on your website. Especially in this tutorial, I'm going to focus on screen media type because screen type is most popular and useful one. Now, let's try to understand what is screen. Here you can see browser, and we call the browser with viewpot. For different viewport sites, we type differentiss. Suppose this is a viewpot and its resolution is 1920. Similarly, we have other viewpot 14 40, 13 66, 1024, and 700-900. These are our commonly used viewpot size for media query. 700-900, we use this pot for mobile screen. Also, we have resolution for low end phones, which is between 320 480. To create your web page perfectly responsive, we need to type different sass for all of this resolution. Now let's see how we can use media screen. At first, you need to type at the rate media. Then as you know, we are going to use for screen. So here need to type screen. Then here we set maximum width property 900 pixel. In media query, here we run to condition using Qor. First one is screen and second one is the value we provide inside D round races. It going to through the condition where our screen width is below then 900 pixel because here we say maximum width 900 pixel. 900 pixel is the breakpoint of our screen. And we can create different breakpoint for different resolution for mobile for laptop, for tag. Now let's see how we can type CSS inside this media query. If our condition is true, if our resolution below the 900 pixel, then it's going to set container class with 50%. Now let's see without this maximum width condition, how many option we have. So these are all condition that we can use with media query. Similar to maximum width, we have minimum height, minimum width, orientation, scan, all opin. Not only that, also you can use maximum width and minimum width together. And to use multiple condition advance, also it support logical operators and not on me. Suppose you want to say CSS 600-900. In that case, you can use and operator. Also, you can use not operator, if you don't want to target both the condition. Also it support orientation, resolution. Also, you can target using colors, et cetera. So without wasting your important time, let's start the practical and see how we can use it. So as you can see, side by side, I opened my serve studio code editor and my browser using Lifesaver extension, and I already created estim document named index dot TML. So in our estimate document, and inside the body tag just to type a hearing tag says is media query tutorials. And here we said body background color white and far family aerial Heldica sensory. At first, I'm going to show you a basic demo how media screen work. But before in our browser, I'm going to open inspect section and I select this option. After select this option, as you can see, it provides viewport width in this section. A it provides height. So from here, we can control the viewport width. For now, our viewpoard width is 898 resolution. If you notice, you can see our body background color is white. Now, I want to set different background color in different resolution. For that, we need to use media screen. So here are type at the d media screen. Inside the round presses, we need to set a condition. And here, I'm going to use a property called maximum wind to set the condition. Maximum max width, Colon, 800, 800 pixel. Its mean if the viewport w is below then 800 pixel, then it's going to trigger this condition. So here I want to say background color. First, I'm going to select the tag, body, then inside the carivors at first, tro select the body tag. Body, then inside the cardiorss. I'm going to say background color, background, and I want to say pink color. Pink. Then I'm going to duplicate this section. This time, I'm going to say maximum width, 600 pixel. If maximum weighs below than 600 pixel, then I'm going to say background color, read. And I'm going to set this file. After I set this file, as you can see, there is no changes in my viewpoint area. Still it returned white background color because our resolution is greater than 800 pixel, and now I'm going to decrease the width of this viewpot area. So as you can see, we are decreasing this viewpot area width. Now you notice up less than 800 pixel, it triggered this condition and said background color pink. If I reduce it below the 600, now you can see now our background color become red color because now our resolution is 584 pixel. As I told you, these are called breakpoint. First we said breakpoint at 800 pixel, then we say breakpoint at 600 pixel. Now you might have question. What does that mean? What is the actual use for? Suppose you use tablet and your screen resolution is greater than 800 pixel. Then you can see your website body color is white. And if you use mobile screen resolution 800-600, in that case, in your mobile, you can see your background color is pig. And if your device resolution is below then 600 pixel, in that case, you can see differentss. Now it's background turn into red color. Now let's add another breakpoint. So I'm going to duplicate this section, and this time, I'm going to say breakpoint at 400 pixel. But this time I'm not going to change the background color. Here I'm going to use different property. I want to change the font size. Font size, and I want to make it 12 pixel. And I want to set this file. After set this file, as you can see, there is no changes because our screen resolution is greater than 400 pixel. But if I decrease the screen resolution, now you can see it changed the font size. Now it makes the font 12 pixel. And if I increase it, now you can see it increased the font size. This is how media query works. And now I'm going to open my previous project, which is basic TML layout design. So in our previous tutorial, we create this project, which is called basic TML design layout. This TM design layout is not responsive. We do not use any media query to make it responsive. If I reduce the browser resolution, as you can see, there is no break point, and our website is partially visible. And also you can see the horizontal scrollbar. And now I want to make it responsive using media query. If we do not make it responsive, if someone tried to open it in their mobile phone, otherwise tablet, in that case, they need to use scrollbar to view this page. So I'm going to use media query to make it responsive. So let's back to the a studio code. At first, I'm going to create media query for rapper. As you can see in our rapper section, here is it with 1,000 pixel. So here, I'm going to create media query. At the read, media screen, and inside the roundress here need to say the condition. And here, I'm going to say it maximum wid. Maximum max width, Colon, and I'm going to say it 1,000 pixel. Let's take it more than 1,000, something 1020. Then I want to change rapper with. So inside this section, I'm set the wrapper, this tag. Copy this section and hemorrotype wrapper inside the carirass I'm going to set with, with, and I'm going to set rapper with 800 pixel. And then I'm going to duplicate this section. And this time, if our breakpoint is 810 some type, 800, ten, then I'm going to make rapper width 500. Also, I'm going to create another breakpoint. So I'm going to duplicate this section, and this time I'm going to say it maximum width 510 then and then I'm going to say it rapper width at. If I use autovalu then it's going to take exact width of this resolution. Now let's sub the file and back to the browser. And now I'm going to try to reduce the browser width. So if I try to reduce the browser width, as you can see, first, it active this breakpoint. Now our browser with is less than thousand and 20 pixel, and if I reduce it more, now it's active, this breakpoint. Now our browser with is less than 810 pixel, and it at wrapper width 500 pixel. And if I reduce it more, less than 510 pixel, now you can see our wrapper width is equal to our viewboard with because here we use auto value. Now you notice you can see our taste overflow from this container because inside this rapid dip, we have a deep element where we use fixed height and width. That's why you can see the horizontal scroll bar. Basically, our target is we need to hide this scroll bar. Now, let me show you the content section. As you can see in our content section, Hero use fixed with 800 pixel. So in our media queries section, we need to control the content with. So I'm going to copy the selector contained, then back to the our first breakpoint. Then here, I'm going to select the content part. Then instead the Carlss here I'm going to say it with value with, and I'm going to use percentage value. I'm going to use 80%. At the same way, we need to handle the side bur section. If I show you my sidebar section, as you can see, her used fix with 200 pixel. So I'm going to copy the sidebar selector. Then in our first breakpoint, I'm going to set sidebar inside the Cari resis, I'm going to use with property with. And here I'm going to take 20%. Let's stick below then 20% because we have padding, border, et cetera. So here I'm going to take 18%. Now, let's set the file and back to the browser. And this time, I'm going to open my console section, and I'm going to select the L. As you can see, now our browser with 3,080. If I reduce the browser width and make below then 1020, now you can see our browser Ws 1002. And this condition is matched with our first breakpoint. That's why it reduced the wrapper width. As it set new width to our content section, also in our sidebar section. And also, we need to handle content section and sidebar section for lower resolution. So let's back to the with a studio code, and I'm going to copy these sections. So if our resolution below then 510, then I want to make content width Auto. Also, sidebar width Auto. And I'm going to set this file. If I show you this sidebar section, here you can see we use float proptFloatR. That's why I'm going to use sidebar value 100%, not Auto. Also, I'm going to use content toe 100%. It's going to do the exact thing like Auto. Also, we need to remove float from this content and side bar section. So here, I'm going to use float property, float Nun. Also, I'm going to use the same value in our side bar section. So copy the value, and I'm going to paste it here. And I'm going to set this file. Up to set this file, if I show you my browser and try to reduce the browser port area, now you can see up below then 800 pixel. Our sidebar section is not so perfect. So let's back to the this is studio code, and I jump into the media screen section. This is our second condition. If our media screen below then 810 pixel, then it make our wrapper 500 pixel. But also, we need to handle the content section and sidebar section. So I'm going to copy the same value with the selector. And here I'm going to pay step. And I'm going to set this file. If I set this file and back to my browser, as you can see, it's not resolve the problem. So I'm going to increase the sidebar section width. So here I'm going to make it 25%. And also, I'm going to make content section 75%. And I'm going to set this file. Up set this file, if I back to my browser, up to set this file, as you can see, still it not working because I think I did some mistake. Yes, I changed the value in our first condition. We need to change the value at that position. So here, I'm going to type 75%. And for SDvar I'm going to use 25%. And in our first condition, I'm going to use 80% width for our content section and 18% width for our sidebar section. And I'm going to set this file. After I set this file, if I back to my browser again, now you can see it resolve the problem. Now we have another problem at that point. If you notice our sidebar height is limited. We need to increase this sidebar height. So I'm going to make it nearly 800 pixel. So let's back to the code editor. And this time, I'm going to use another property. Height. If I show you my previous height for SD bar by default, it height is minimum height 500 pixel. So I'm going to change the minimum height. So I copy this property and value and back to the media query. And here I'm going to pass minimum height, 900 pixel. If I set this file and back to my browser, now you can see, it's work, perfect. This resolution is for tablet. Now, let's reduce the browser Weav. Now I'm going to make it less than 510 pixel. After make it less than 510 pixel, as you can see, now our rapper take 100 person weed. Now, if I scroll down my page, it increase our sidebar section height because in our previous condition, we use 900 pixel. So we need to adjust the height. So let's back to the result studio code, and this time, I'm going to say minimum height in our side bar, I'm going to set minimum height 300 pixel. And I'm going to set this file. After I set this file, if I back to my browser, you can see the result. Still it take huge amount of space. Let's use the value. So I'm going to make it 150 pixel. If I show you my browser, also, we can print our cyber menu option in line. Also, we need to align the footed text at middle. So let's align the footed text at middle. So let's back to the visual studio code, and I'm going to select the footer element. So I'm going to copy this section footer and I'm going to paste it here. Then inside the Cass, I'm going to type text align text align center. And I'm going to set this file. And if I show you my browser, as you can see, now it's Align in middle. At the same way, we can align our header section text at middle. So again, I am back to my Visual Studio code editor, and this time I'm going to target this element, header H one. Then back to my media aqui section. And here, I'm going to type inside the Calira text align. Center. After set this file, if I show you my browser, you can see the result. Also, if you don't want to show your sidebar menu at Mobile Resolutation, if you want to hide this section, yes, you can. You can particularly hide this section for Mobile Resolution. Let me show you. Let us back to the user studio code. And for this sidebar section, here I'm going to use display none property. Display none. If I set this file and comment out all these unnecessary lines because here we use display in, that's why we don't need it. And back to y browser, now you can see there is no sidebar section above the footer section. Just we have content section and menu section and header section. But if I increase the browser width, let me show you. After I increase the browser with, it threw another condition, I true tablet version condition. That's why, again, it returned the sidebar section. But if I reduce the resolution, you can see, again, it height the sidebar section. So this is how you can control different CSS for different resolution. I hope now it's clear for you how we can use media queries. In our upcoming Tutorial, we are going to learn more about advanced media queries. Also, we are going to learn about advanced responsiveness. So this is it for this tutorial. Thanks for watching this video Satune. 47. CSS Table Properties Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS styling. And in this tutorial, we are going to learn table tag styling. We are going to learn all the CSS properties related table. So let's see the properties name which is used to formatting our tab. So these are all properties that I'm going to use in this tutorial. Border spacing, border collapse, vertical align, caption side, empty cell, and table layout. Using these CSS properties, you can bypass estimal attribute such as cell padding, cell spacing, vertical alignment. We don't need to use this attribute if we use these properties. So without wasting your time, let's start the practical and see how we can use it. As you can see side by side, I opened my viisal Studio code editor and my browser using live server extension, and I already created an STL document named index dot t. And as you can see in my browser, her will create a table. And in this table in our first row, we create a heading. And in this row, we have total three column, first name, last name, and savings. And also, you can see the table structure in our astable page. Inside this table tag, first we have TR tablew and inside our first table row, we have table header. Then we have table data. As you know, Tia tax stands for table row and TD tag stands for table data. Otherwise, tv colum. Now, let's see how we can use CSS properties in this table. So at first, as you can see inside this tile tag, we have Tavil and Tavildta and table header, and here is it one pixel solid boer and our border color is black. So at first, I'm going to use our first property, which is border spacing. So here, I'm going to select the tagnyme table. Then inside the car ss, our property name is border spacing. And I'm going to say it border spacing, ten pixel. If I set this file, here you can see the result. Now you can see in my tab from every side, it adds space to our border. And if you want more gap, then you need to increase the value. If I pass 20 and then set this file, you can see the result. Not only that, you can specify different gaps for column and row. Suppose for colum I'm going to take ten pixel space, and for rows, I'm going to take 20 pixel space. If I set this file, you can see the result. For column wise, it takes ten pixel, and for row wise, it takes 20 pixel. And if you do not want to show gap between columns, just make it one pixel and then set this file, you can see the result. But for now, I'm going to add equal amount of space from all of the direction. So I'm going to pass ten pixel from all of the direction. Now, let's talk about our next property. At first, I'm going to comment out this line, and next I'm going to use border collapse. Border under scoe collapse. This is table related property. So we need to use this property inside the table selector. This property come with two value separate and collapse. The default value is separate. So here I'm going to use a value called collapse. Now, if I set this file, as you can see, it shows single border for the cells. But if I use the deferred values separate and then set this file, now you can see the result. Now you can see it add extra border to our cells. Now you can see it add border for all the TD tags. And if you don't want to show the space, then you need to use collapse value, collapse. That's different. Now, let's talk about our next property, which is vertical align. For that, we need to add some extra data in our cells. Also, we need to assign fixed we to our table. So first, I'm going to add some dummy data. So per Mohan, I want to add wim and I want to add five dummy word, and I'm going to set this file. After I set this file, here, I'm going to add fixed we to this table. So I'm going to pass with 300 pixel. If I set this file, you can see the result. Let's add a little more dammi data for this example. Again, I'm going to add Lim ten, and I'm going to set this file again. Now you can see after that more data in this table, it increases the row height, and it aligns second column data at middle. By default, vertically, it aligned the data at middle. And now I want to move it top. For that, we have a stable attribute, which is V align. But as I told you, we are not going to use any stable attribute. We are going to use CSS. So let's jump into this style tag. At first, we need to target all the table data, so HemotypeTD. Then it's at the Cali resis I'm going to pass a property, vertical align. And here, I'm going to use the property called vertical align, vertical align, and I want to align it top, so I'm going to pass top. If I set this file, you can see the result. Now you can see it align our data at the top. This property come with three value, top, bottom, and middle. And if you want to place it bottom, just to pass bottom. That's it. So I hope now it's clear for you how vertical alignment work. Now, let's talk about padding. If you remember, in TML, basically we use cell padding. And if you do not remember, let me show you the attribute. Since at the table tag, I'm going to use the attribute called cell padding. Cell padding, and I'm going to assign ten pixel. If I set this file, you can see the result. Now you can see in every cell from all of the direction it add ten pixel padding. And now I'm going to do the same thing using CSS, not not using this attribute. So I'm going to remove this line. And if you want to do the same thing, just you need to use padding. Suppose in our table data cells, I want to add the padding, but not in our table header. So here I'm going to use padding ten pixel. And if I set this file, you can see the result. I do not add padding in our first row because our first row made up it TH data, which is table header, and we assign padding in our table data, TD tags. That's why it start at padding from the second row. And if you want to target TH tag, just you need to pass pH. And if I set this file, you can see the result. Now it adds padding to our table headed tags. Now let's talk about the next property, which is caption side. But before, let me try to explain it what is caption. In our table tag, we have a tag named caption. Let me show you. Caption tag. And inside this caption, I'm going to type employ. And if I set this soil, you can see the caption above the table employ. This is employee table. We can change the position of this caption. So I'm going to select inside the style tag, I'm going to select the caption, the caption tag. Sound type caption. Then you said the calices, I'm going to use our property which is called caption site, caption site, and it's come with total two value, bottom and top. By default, it come with top value, so I'm going to use bottom value. If I set this file, you can see the result. Now you can see the capture and the bottom. Now, let's talk about our next property, which is empty cell. If you notice in our table, in every cell, we have data, and now I'm going to remove one of the data from our cell. So I'm going to remove 150. And I'm going to set this file. After set this file, you can see the result. Now you have the choice. Either you can show the stable sell, otherwise, you can hide this stable sell. So I'm going to use, and inside the table tag, we need to use the property called D sell. Empty cells, its Taoi total two value, hide and show. Show is the default value, so I'm going to use hide. After set this file, as you can see, it do not change anything because hero use border collapse value. But if I use separate, let me show you. Then set this file. Now you can see the result. Now you can see it had the particular cell. So that's the usage of empty cell property. Our next and last property is they will layout. So I'm going to use this property. After empty cell, I'm going to type table layout, this property come with total two value auto and fixed. First, I'm going to use auto value. After step this file, you cannot see any changes, but let me show you. Suppose our second table row, in our first column, I want to add a big word. After nob, I want to add some B. If I set this file, you can see the result. But if you remember arrow use fixed weed to this table, 300 pixel, but still it extend our table. It increases the width of this table. So according to data size, it can increase the fixed with. But if I use table layout fixed, and they set this file, now you can see the result. It overflow the data from the cell, but it doesn't extend the Tavy. So if I use auto value, which is the default value, then have this file, then again, it to the old situation. So these are all properties that recover in this tutorial. I hope now it's clear for you how we can use these properties with table cells. So thanks for watching this video Stay tuned for the next tutorial. 48. CSS Resize Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn about a new property, which is CSS resize. Basically, si going to give you the facility to change the deep size by the user. You can change the height and width using dragon drop. Now let's talk about the values, how many values we have in this property, horizontal, vertical, both and none, and none is the default property. Let's start the practical and see how we can use these values. As you can see, side by side, I open my isalstudio code editor and my browser using Lifesaver extension, and I already create an estimate document named index dot TML. Also, you can see her create a deep element, and her we say 300 pixel height and 500 pixel weight. If I try to resize it using Kurzar no it's not going to work. So I'm going to use the resis property, but if I use only the recise property, then it's not going to work. With that, we need to use another helping property. Here, moti resize. Resize vertical. If I set this file, as you can see, there is nothing. We cannot resize the DV vertically. To use the recise property, we need to use overflow property. Here I'm going to type overflow. Auto. Now I'm going to set this file. Up set this file, as you can see at the corner, we have resize option. Now we can resize it vertically. We can resize it at vertical direction. For better understand, let's add some dummy paragraph in this D box. I'm going to type P tag, then inside this P tag, I'm going to type low and I want to add 300 word. I'm going to set this file. Up set this file, as you can see, we have vertical school bar. But if I increase the box size, now you can see it removed the vertical school bar because we don't have overflow data. We vertically increase the deep height, and now let's increase the deep width. For that, here you need to pass horizontal value, resize horizontal. If I set this file, now we have the option to increase the deep width, but we cannot resize the deep height because this time we pass horizontal value, and if you want to resize it from the both direction, for that, you need to use both value. Resize both. If I set this file, this time you can resize the deep element from both the direction. As you know, in estimate form, we have a tag called text area and by default text area support resizing. Let me show you. Here, I'm going to type this dip tag. Otherwise outside this dip tag text area. I'm going to set this file. After set this file, here you can see text area. By default, it come with resize feature. But if you want to stop this resizing, for that, youg to use resize nun Value. Let me show you how. So here, first, I'm going to select the text area. Then inside the round resis, then inside the calices, I'm going to pass resize, none, and set this file. Up set this file, now you can see there is no option to resize the deterior box because hero use resize Nun Value. This is it for this tutorial. I hope now it's there for you, how can we use resize Paperty. So thanks for watching this video stay tuned for the next tutorial. 49. CSS Cursor Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn about a new property called CSS cursor. As you can see inside the red square box, we have a Kursel. You can see the cursor inside the red square box, and if you want to change the Kazar style, then you need to use CarsalPperty. These are all values that used to change Kazar style. As you can see, nearly we have total 36 value default, nun, context menu, health, pointer, progress, weight, sill, et cetera. So let's start the practical and see how we can use these values. So as you can see, side by side, I open my results studio code editor and my browser using Lifesaver extension, and I already created an ML document named index dot HTML. So here you can see in this browser, we already create a deep element. Now I'm going to use the property called cursor. So here you said this box. I'm going to type property name cursor. CurzR and I want to assign hell value. Hell, I I set this file and my on this deep element, now you can see with the erosine we have quotient mark sine. It's mean, it's indicate hell. And then I'm going to duplicate this line and comment out previous line. This time, I'm going to change the value. Here I'm going to change cursRPonter. If I set this file and over my curr on this deep element, you can see the result. Now it replaces the arosine with pointer sine. And the next value I'm going to use, which is progress. So I'm going to duplicate this section and comment out previous line and replace pointer with progress. If I set this file and how my cars on this deep element, you can see the result. You can see with the arrow, we have circle, a loading circle. It indicates progressing. Then I'm going to use another cars style. I'm going to duplicate this line again and comment out previous line. This time, I'm going to use Context Menu. I'm going to replace progress with context Minu if I set this file and Huber my card on this deep element, you can see nothing. After using Contest menu, there is no changes. It's like default value. The next value I'm going to use Auto. Again, I'm going to duplicate this line and comment out previous line and replace contest menu with Auto. If I set this file and ever my cards are on this element, you can see is what like default value. Next, I'm going to jump into another value, which is weight. Again I'm going to duplicate this line and comment out previous one and replace auto with weight. If I set this file and my cards are on this deep element, as you can see, it's pretty similar with loading, otherwise, progress. This is for weight sign. Then again, I'm going to begin this line and comment out previous one and replace weight with sell if I set this file and over my curor on this deep element, you can see the result. It had a plus sign. Now it looks like a addition sign. And if you don't want to show your cursar when you how your cursor in this deep element, then you need to use Nun vd. So again I'm going to duplicate this line and omen out previous line and replace L with Nun value. None. If I set this file and over my cursor on it, you can see it hide my cursor because this time we use nun Vd. So it's very difficult to show all the value one by one. I create this file for you and here I apply all the values one by one to the paragraph text. So if you her your cars on the paragraph items, you can see the different results. Crosshair, default, E Resize, EW resize, grab, grabbing help move, N resize, N resize, no drop, none, not allow, all of it. So you can experiment by yourself and you can check on the value one by one. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 50. CSS Units Tutorial 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. 51. CSS Units Tutorial 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. 52. 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. 53. 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. 54. CSS Clip Path Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn a new property, which is CSS clip path. This property come with total four value circle, ellipse, inset, and polygon. So let's see how we can use this value and create different shape. At first, we are going to start with circle. To create a circle, we need an image. Now in this image, we need to create this circle. Basically, we need to remove the dark part from this image. We need to show which is inside this circle part. To create the circle, we need three things. First, we need the radius. Using radius, we can define the circle size. Then we need to define the position where we need to create this circle. For that, we need to provide Xxs and YXs. As you can see, we place this circle at the middle. For that, we can take XX 50% and YXs 50%. Then after I provide this value, our clip path look like that. So let's start the practical and see how we can apply it. 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 TML document named inexotEtm. As you can see, inside the body tag, her we insert image. Now I want to apply circle shape clip path to this image. For that, we need to go to the style section. Style. And inside this style tag, first, I'm going to select image. Then inside the car resis, I'm going to apply clip path. Clip path, Clippath circle. As I told you, to create this circle, at first, we need to define the radius. So here, I'm going to take 30%. Also, you can take value in pixel, and then we need to define the position where we want to place our circle. So I'm going to type at 50%, I want to place it midle. That's why I pass the 50% value from Y xs and 50% from X xs, and I'm going to set the file. After I set this file, you can see the result. And if you want to increase this circle size, you need to play with this value. Suppose I'm going to pass 60%. If I set this file, you can see the result. And the same way, if you want to decrease the value, then just pass 10%. You can see the result. This is how it works. Also, if you want to change the position of this circle, yes, you can just to play with the X and Y Xs value. Suppose from ss, I want to place it 70%. And from xs, I want to place it just 30%. If I set this file, you can see the result. From XXs it take 70%. From YXS it take 30%. And if you want to create hub circle shape, let me show you. Here I'm going to pass YX is 50% and XX is 0%. Upper set this file, you can see the result. Now it creates hub circle shape. And if you want to place the skip path laptop corner, you need to pass x is zero and YX is zero. Upper set this file, you can see the result. So I hope now it's clear for you how we can use circle value. Now let's talk about eclipse shape. So I'm going to duplicate this line and comment out previous line. But before, let me explain how we can create this shape. So this is the example of ellipse shape. To create this ellipse shape, we need to tell four things. First, we need horizontal radius, vertical radius, and then we need Xxs and a YXs position. Now, let's apply this value to create this shape. At first, I'm going to replace circle roid ellipse. Ellipse, first, you need to provide the horizontal value. For horizontal value, I'm going to take 10% and for vertical value, here I'm going to take 40%. Then I want to place ellipse shape at the center. Here I'm going to pass 50% from Xxs and 50 and 50% from YXs. After set this file, you can see the result. Now, let's increase the horizontal value. I'm going to make it 20%. After set this file, you can see the perfect oval shape. And if you want to make this Ellipe shape horizontally, then just replace these valves. Make it 40% and make this one 20%. Then set this file again. You can see the result and changing XXs and YXs, you can change the position of these ellipse. Now, let's talk about the next value, which is insect. Basically, this value going to create a rectangle shape, and to create this shape, we need to t four well. Top, right, bottom, and lift. Let's start the practical and see how we can create this shape. I'm going to duplicate this line and comment out previous line. Here I'm going to type inset. Then at first, I'm going to remove all the values and first going to provide the top value from top. From top, I'm going to take 10%. And from the right, I'm going to take 20% and from the bottom, I'm going to take 15% and from the left, I'm going to take 10%. If I set this file, you can see the result. This is what it creates. And to make it more clear, let's change the value. From the top, I'm going to take 25%, and from the right, I'm going to take 30%. And from the bottom, I'm going to take 35 pers, and from the left, I'm going to take 40%. If I set this file, you can see the result. Using this value, you can create a rectangle shape, otherwise, any square shape. Now let's talk about the most important shape of this property, which is polygon. Using polygon value, you can create any type of shape. As you can see, her will create a triangle. Also you can create star shape, any kind of geometric shape. As you can see in this example, he will create a rectangle shape. To create the rectangle shape, we need total three point. And to define every point, we need excess value and YXS value. So we need total three pair of excesses and YXs value. So we are going to start this rectangle from this point, red point. Then we are going to create this blue point, then we are going to jump into the yellow point. So let's start the practical and see how we can create this shape. So first, I'm going to duplicate this line and comment out previous one and set this file again. And I'm going to replace inset with it polygon. To create the triangle, here we need to dull three point. At first, I want to start from this point. So from the Xxs I'm going to pass 50% and from the YXs I'm going to pass 0%. And then I want to create another point at right bottom corner. So we need to provide comma then from both the xs, we need to take 100%. From Xxs I'm going to pass 100% and from the YXs I'm going to pass 100%. Coma, and then I'm going to create point at lip to bottom corner. So from the Xxs I'm going to take 0% and from the YXs I'm going to take 100%. If I set this file, you can see the result. It creates a perfect triangle shape. And now I'm going to create another geometric shape using the same value, polygon. I'm going to be this line and comment out previous one. And again, I'm going to remove all the values and set this file. So at first, I'm going to make point at this position. Again, I'm going to pass from Xs, I'm going to pass 50% and from the Y xs, I'm going to pass 0%. Comma. This time, I'm going to pass four win, and then I want to make point at that position. So from the XXs I'm going to pass 100%, and from the Ys, I'm going to pass 50%. Then I want to make point at this position. So from the XXs I'm going to pass 50% and from the YXs I'm going to pass 100%. And next, I'm going to make point at that position. So from the XXs I'm going to pass 0% and from the YXs I'm going to pass 15%. If I set this file, you can see the result. This time I create this kind of geometric shape using this polygon shape. And now I'm going to create another example. Here I'm going to create a addition sign. For that, I'm going to duplicate this line and comment out previous one and remove nvals and set this file. So to create the addition sign, I want to start from this point. So here I'm going to pass 40% from X direction and 0% from YXs direction. This is our first point. At the second point, I'm going to pass 60% from XX is direction and 0% from YXs direction. At the next point, next, I'm going to create another point, and I want to create that at that position. So from the XXX, I'm going to take 60% again and from the YXs I'm going to take 40%. Then I'm going to create point at that position. For that, Again, I'm going to pass 100% X position and 40% YXs position. Then I'm going to pass 100% X position and 60% YXs position. Next, I'm going to pass 60% XX position, 100% YXs position. Next, I'm going to pass 40% Xxs position only to remove this unnecessary coma because we need space between these two value. 40% from the excess direction and 100% from YXs direction. Next, I'm going to take 0% from ss direction, and from the Xs direction, I'm going to take 60%. At last, I'm going to take 40% excess direction, and 40%, YX is direction. Let's save the file and see what it creates. I hope so it's going to create the addition sign. No, it's not create the addition sign. I think I did some mistake. Here I do not create this point, when to create this point. I think I forgot to mention some points. The main purpose is using this value, you can create different kind of geometric shape. Just you need to mention the right points using XX and YXS value. This is it for this tutorial. I hope now it's clear for you how we can apply Keep path. So thanks for watching this video. Stay tuned for the next tutorial. 55. CSS Shape Outside Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related thesis. And in this tutorial, we are going to learn a new property called shape outside. Basically, we use this property for text formatting. But we are going to use this property with clip path. This property come with four value, circle ellipse, inset and polygon. Now I'm going to show you why we use this property. Suppose we create a circle using clip path. Also, you can create the same circle using border radius. But the problem is a create this circle, still it occupy the text area, but I want to use this white space like this. For that, we need to use shape outside property. After we use this property, our takes adjust according to the shape. So let's start the practical and see how we can use it. As you can see, side by side, I open my salt studio code editor and my browser using if server extension, and I already create an TML document, named index dot TML. So as you can see in our body tag, we have a image tag, and then we have a paragram. And I set the image flow play. And then at first, I'm going to apply keypat to this image. So here I'm to use this property, clip path. Key Path circle. First, we need to define the radius. I'm going to use 30%. Also, we need to define the position, so I'm going to tie at 50% by 50%. I'm going to set this file. After I set this file, you can see the result. It creates our circle perfectly, but the problem is here you can see the unnecessary white space. We need to fill up this unnecessary white space with the text. We need to cover this white space. For that, I'm going to use a propriety call shape outside. Shape outside and her I'm going to use the value. And here, I'm going to pass the exact circle shape value. So to copy this value. And I'm going to paste it at shape outside. If I set this file, you can see the result. Now it right to adjust according to the shape. Now let's move this circle little with lip side. So Hemo to pass Xs 20%, also to change this value X is 20%. After I set this file, you can see the result. Otherwise, you can make it 30% per perfect result. That's looking good. As you can see, this time our paragraph takes try to adjust according to the round shape. Now you can see another problem. Our text nearly attach with this shape. Here we need to provide a little bit margin. Here, I'm going to pass Shape, margin, 20 pixel. We need to use particularly this property, shape margin. After set this file, you can see the result. Now I'm going to redirect to a website, which is nfili.com. From here, we can create different shape using Keep Path. We can create any shape. After create this shape, from here, we can copy the key path property and the value. I'm going to copy the polygon shape value. And then I'm going to replace Kipath value with this value. Then also, I'm going to replace it in our shape outside section. If I set this file and back to my browser, here you can see the result. From this website, you can achieve different type of shape right arrow, closed sign, ellipse, hexagon, pentagon, whatever you want to use. This website is very good website. From here, you can extract any kind of shape with the value. This is it for this tutorial. Thanks for watching this video, Situne for the next tutorial. 56. CSS Filter Tutorial Part1 : Hello, guys. Good to see you back. This is the first tutorial related CSS animation, and we are going to start this tutorial using CSS filter property. Using filter, we can change image effects, and we have to t 12 effects that we can use in our image. Our first effect name is none. If you do not want to use any effect, you can use this property. And using blurred property, you can blur your image. And using tess value, you can reduce brightness or increase brightness. And for contrast, you can use contrast value, and Rp shooter value work like a shadow of this image. Using rascal value, we can black and white our image. And using rotate, you can feel different color with different angle, and our next value is invert. If you remember the old caminar rule, then you can understand the effect very easily, and our next value is opacity. Using opacity value, we can control the transparency of this image. If you want to control saturation of this image, you can use saturated value. If you want more color in your image or less colored in your image, you can use this value, and our next value is Cipia and our last value is URL. This RL value work with SVG images. In this tutorial, I'm going to cover the six effects. Let's start the practical and see how it works. As you can see, side by side, I open my visual studio coetor and my browser using if server extension. I already create a estimate document in my current working directory. As you can see in my browser, there is an image, and I already insert this image using Imgtag as you can see in my style section, we set 600 pixel weight to this image and height auto. I'm going to use all this filter in this image. Effects are play very important role in CSS animation. That's why I start this tutorial with CSS effects. At first, I'm going to use filter property. Filter, and our first value is none. If I set this file, here you can see there is no changes, there is no changes in this image because this is the default value of this property and our next value is blur, so type, blur. Suppose I want to blood this image up to four pixel. If I set this image, here you can see the result. If you want to make it more blood, you can increase the value. Suppose 20 pixel. If I set this file, you can see the result. The default value of this blur property is zero. If I use zero value and then set this file, here you can see the result. Now our image is clearly visible and this is the usage of blur value and our next value is brightness. 100 is the default value of brightness, 100%. And this value work with percentage. If I set this file, you can see there is no changes, and now I want to reduce the brightness, 20%. If I set this file, you can see the result. It reduced the brightness of this image. And if you want to get to the normal brightness, then you need to pass 100. If I set you can see the result. And if you want to increase the brightness of this image, then you need to pass more than 100% value. Suppose, I'm going to pass 300%. If I set this file, you can see the result. If we pass 0% brightness and the set the file, you can see now it's completely black. Let's jump into the next value, which is contrast. I'm going to type contrast. 100 is the default value of contrast, 100%. If I set this file, you can see the result. If you want to increase contrast of this image, you need to pass the then you need to pass more than 100% value. Suppose 200%. If I set this file, now you can see the contrast, if you want to decrease the contrast, then you need to pass below than 100% value, something 50%. If I set this file, you can see the contrast. If we pass 0% value and then set the file, now you can see there is no contrast in this image. If we pass 0%, as you can see, our image turn into gray color. Our next value is drop shadow. But before I use this value, I'm going to reduce the image. 400 pixel. This value is similar to box shadow propriety. First, we need to provide horizontal shadow. I'm going to provide ten pixel. This is for XX direction. Next, we need to provide vertical shadow. For YXs I'm going to pass ten pixel once again, and then I'm going to pass the blurriness of this shadow, which is seven pixel. Then we need to pass the color of the shadow. I'm going to use green color. If I set this file, here you can see the result and you can change blurriness of this shadow also. If I pass zero pixel and then set the file, now you can see it act like a solid shadow. Not only that, you can use negative value in this parameter. Suppose I want this shadow minus YXs direction. If I set this file, you can see the result. This is the UK go drop shadow effect, and our last value is gray scale. Let me show you. Gray scale. Using this effect, we can convert our colored image into a black and white image. 0% is the default value of this gray scale parameter. If I set this file, you can see there is no changes. But if I use 100% and then set the file, now you can see it completely turned this image black and white. You need to remember we need to pass value between zero to hundred percent, not more than 100%. You can use any value between these. Suppose I want to pass 70%. If I set this file, you can see the result. Now the image filled with 70% gray and 30% color. This is it for this tutorial. In the next tutorial, I'm going to cover the remaining filters, U rotate, invert opacity, saturate, CiPia and URL. Thanks for watching this video, stay tuned for our next tutorial. 57. CSS Filter Tutorial Part2 : Hello, guys. Good to see you back. This is the second part of the CSS filtered tutorial. In this tutorial, we are going to cover the six filters. Huh rotate, invert, opacity, saturate, spia and URL. Let's start the practical and see how it's work. Here you can see side by side, I open my visual studio corator and my browser using lifesaver extension, and I open my previous estimate document for this example. At first, I'm going to call the filter property, filter. Our first value is Hu Rotate. And here you can use 023 60 degree Vdo. I'm going to pass 150 degree DAG then set this file, here you can see the result. If I pass 100 degree, I set this file, you can see the different result. Using this value, you can try 360 combination, 360 degree. If I set this file, you can see the result. There is no negative parameter for this value. Let's jump into the next value, which is invert. Soon dive invert. If I set this file, here you can see it completely invert the image, and we can pass parameter zero, 200%. Suppose I want to pass 0%. If I set this file, here you can see, this is the deferred value of this property. If I pass 50% and then set the file, if I use 50% value, now it's completely turned into a gray color. If I increase the value, something 70% and set this file, now you can see the result. It's still invert our image, but you can see the gray layer on it. Similarly, if I reduce the value below than 50%, something 20% and then set the file, as you can see it not invert the image completely. This is the usage of invert value. Our next value is opacity. As you can see, now our image is fully visible and now I want to make this image transparent. For these, we need to use opacity value. If I set this file, as you can see, there is no changes because we do not provide any parameter in this value. Now I want to make this image semi transparent. I want to provide 50%. If I set this file, you can see the result. And if you make this image completely transparent, you need to pass 0%. If I set this file, the images still exist in this place, but we made it completely transparent. And if you make this image completely visible, you need to pass 100% value. So I hope now you can understand this value, how it's worn. I hope now you can understand opacity value, how it's worn. Or next value is saturate. This value going to provide strength on colored pixels. I'm going to type saturate. Using this value, you can control the strength of this color, and 100 is the default value of this property, 100%. If I set this file, you can see there is no changes, and now I want to saturate this color. I'm going to pass 200%. If I set this file, you can see the result. You can see the change of the color, and if you want to make it desaturate, you need to pass value less than 100%, something 70%. If I set this file, now you can see the color of the image looking very dull. If I pass 0% value and then set the file, now you can see this image completely turned into a grayscale image means black and white image. I hope now you understand what is saturate. Our next value is Cipia. Someone to tie Ciphia. This filter give you the vintage look of this image. If I set this file, you can see the result. Here you can pass parameter between zero to hundred percent. If I pass 0% and then set this file, now you can see the actual image. If I increase the value, 50% and then set the file, here you can see it applies some Ciphia effect in this image, and 100 is the highest value of this property. There is no negative value and pixel value for this property, and our last value is URL. For this, you should have knowledge of SVG images. And if you don't have basic knowledge of SVG animation or AVG image, you can check out my course, and this course is available in this platform. Just go to my instructor profile and you can find this course. Last thing I want to say, suppose you want to apply multiple effect in this image. Suppose first you want to use blurred effect on this image. Some to type blur to pixel. And then I want to apply SPI effect in this image. Spia 50%. If I set this file, you can see the result. And now I want to increase the brightness of this image. Brightness, 200%. If I set this file, you can see the result. So you can add as much effect you want. So I hope now the CSS filter concept is clear for you. In the next tutorial, we are going to understand what is CSS transitions. So thanks for watching this video, stay tuned for our next tutorial. 58. CSS Transition Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn a new property related CSS, which is CSS transition. This is one of the most important property for CSS animation. Now the question is, what is transition? Transition means smoothness. Suppose you want to change your position of one object. Otherwise, you want to increase the object width. Let me show you the example. As you can see in my estimate document, we have to turn too deep, and I want to increase the width when I hober on my red object. And I already see a transition in this object. If I hober my cursor in this object, you can see the result. And you can see when our container extend the width, you can see a smoothness effect. If we did not use the transition effect, the work would be done in one go. Then you cannot see the smoothness when it increase the width. That's why we need to use transition. Similarly, for our next object, we reduce boerras over the object. Let me show you. As you can see, there is a beautiful transition. And if we do not use this transition, then it would be done in one go. It would be done just one blink of inured eye. So for smoothness purpose, we need to use this transition. Let's talk about properties. Basically, transition come with five propereties transition, transition property, transition duration, transition delay, and transition timing function. Basically, our first property is short end of all of these properties. If you want to use this four property in one line, in that case, you can use transition property only. Basically, our first property is transition property. Using this property, we can specify why do we want to use these transitions. Suppose I want to use this transition for border radius. Otherwise, we. In that case, we need to declare the property name. Something like transition property, water radius, otherwise, transition property Width. Our next property is transition duration. In this property, you can specify how long you want to run the animation. Our next property is transition delay. We use this property to determine when the transition will begin, and our last property is transition timing function. This property come with some inbuilt effects, and using these effects, you can control the smoothness of this transition. This is it. Let's study practical and see how it work. Here you can see side by side, I open my visuals few Coretor and my browser using if server extension, and I already created a TML document named index dot HTML. And here you can see a DV inside this document. And the DV height is 200 pixel and is 200 pixel also. I do not use any Hover effect in this deep. And now I want to increase Width of this Div. So first, I'm going to use the transition property. Transition property. As I told you, I want to increase the width. I'm going to call the width property. With this property, we need to use another property. We need to use transition duration property, transition duration. Using this property, we can declare how long we want to run this transition and I want to run our animation for two second. I'm going to type two a. You can take your own value, otherwise, you can use millisecond also. When I over my cursor in this d, I want to increase the container width. I'm going to use psutocls dot one colon hover. Then inside the car resist I want to increase the container width, some type with 400 pixel. If I set this file, if I set this file and hover my cursor in this dip, you can see the transition, and you can see the smoothness of this transition. Similarly, if I hover out my cursor, also you can see the smoothness. Let's see what happened if I remove the transition. So I'm going to comment out this two property. If I set this file and over my curs are in this box, you can see the result. There is no smoothness, when it increase the width. Just blink of in your eye, it completes the transformation. That's why we need to use transition property because it's give beautiful smoothness effect to this transformation. And as you can see, we just apply this transition in our width. But if I increase the height in our Her selector, height 350 pixel. And then set this file. And if I over my cursor, as you can see, just blink of inure, it increases the height. But you can still see the smoothness effect in your width. And if you want to add same effect for height, then after width, you need to type the property name height. And also, you need to declare the duration for this transformation. So I want to use three second. If I set this file and over my cursor into this DV, you can see the result. Or with transformation complete in two second, but our height transformation complete in three second. Not only that, we can apply the same effect for background color. Soto type background, green. Also, we need to call this property background, height, background. For background, I want to use four second. If I set this file and over my cursor in this D, you can see it took four second to change the color. So this is the usage of transition property and transition duration. And now I want to use all this value in a single line. So I'm going to comment out this two line, and now I'm going to call only transition. And now I'm going to use all the value in a single line. So I'm going to copy the values and paste it here. And also, I'm going to copy the duration values, and after a space, I'm going to paste it. If I set this file and HobermKarr in this Dev, you can see all the effects at once. Using this property, we can make it one liner. This is the short end of all of this property. At first, you need to declare the transition property names, and then you need to declare the transition duration time. Now suppose you want to use two second transition duration for all of this transformation. In that case, you can type all here, a Dowlin also you need to pass only one duration time, two second. Now it's going to apply the transition effect, all of these properties. If I set this file and Her my cursor and over my curds are in this D, you can see the result. In the same time, it applied to smooth this in height, width, and background. If you want to use same duration for all of this effect, you can use this shorthand all.This is it for this tutorial. In our upcoming tutorial, we are going to talk about transition timing function. So thanks for watching this video, stay tuned for our next tutorial. 59. CSS Transition Timing Function Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to talk about transition timing function. Using this function, you can control the smoothness of this transition. And these are some common values related transition timing function. Linear, is in, is out, is in out Cubic basil. And also we have another value, but these are not so important. Our first value is, it's a default value. Specify a transition effect with a slow start, then first, then end slowly. Our next value is linear. Specifies a transition effect with the same speed from start to end. From beginning to end, it maintains the same speed. Our next value is in. Specify a transition effect with a slow start, and our es out value is where the opposite roll up is in. Specify a transition effect with a slow end, and our next timing value is eso. Specify a transition effect with a slow start and end, and our last value is cubic bezier. Lets you define your own values in a cubic bezier function. So you can set your own timing values. Without this six value, we have another value, which is step start, step end, and steps. These are not so important, but it's good to know about it. Let's see how it's working practically. Here you can see, I open a website, qvhypenwzia.com. Here you can see the real time example of these values. Es linear, is in, is out and is out. At first, I'm going to increase the duration time, duration to second. Then I'm going to start this example with default value. If I click Go button, you can see the result. Our next value is linear. If I click Go button, you can see the result. Linear value maintain the same speed from beginning to end, and thence come es if I click Go Button, you can see the result. Thence come eso. If I click Go Button, you can see the result. Our last value is easy now. So easy out specify transition effect with slow start and slow. Let me show you another example. As you can see, there are five different DV and I use five different timing function value for them. If I go my cars or all of this item, you can see the result. This is for linear, and this is for ease this is for es in. This is for es out and this is for Easy out. I hope you can understand the difference. So let's jump into the results studio eator and see how we can use it. As you can see on your screen, side by side, I open my Visual Studio Creator and my browser using Lifesaver extension, and I already created a STML document named index dot DML. And as you can see, I already created D for this example. In our previous tutorial, we'll learn about transition property and transition duration. But in this tutorial, we are going to learn transition timing function. So I'm going to call this property transition timing function. Let's start the practical with the default value, which is E. Some to type E. If I set this file and over my cursor into this div, you can see the result. This transition effect, start with slow, then first, and then end with slow. This is the default value and our next value is linear. Some to type, linear. If I set this file and over my cursor into this div, you can see the result. This transition effect maintain the same speed from beginning to end, and our next value is is in, So type is in, I I set this file and hover my cursor into the DV specify a transition effect with a slow start. Similarly, we have opposite value is out. Sum Rotive is out. If I set this file and Hoberm curves are into this box, as you can see, specify a transition effet with a slow end. Our next value is in out. Sum otive is in out. If I set this file, and once again, Hobermi curves are into this D, you can see the result. It's specify a transition effect with a slow start and end. Let's talk about another value, which is steps. Soon to type, Steps. Here we can complete our transition with steps. Suppose I want to complete this transition in two steps, so I want to pass two here. If I set this file and hooper my cars into this DV, you can see the result. As you can see, in two step it complete the transition, and if I remove my cursor, you can see the same effect. In two step, it complete the transition. And now I want to complete this transition in five step. If I set this file and over my cars into this box, you can see the result. In five steps it complete the transition. So this is the uskasO Steps value. Most of the time we try to avert this value. We do not use this value. But for education purpose, you should have knowledge about it. Our next value is step start. So I'm going to type, step, start. If I set this file and over my cursor into this div, you can see in a single step it complete the animation. But if I use step end value, Save end, and set this file. I I open my cursor, it's going to start my animation up to two second. Let me show you. So I'm going to over my cursor into this deep. As you can see, up two second, it start the animation, and it completes the transition in one step. So this is a UCs of step end value. Let's jump into the last value, which is Qubic bezier. Some type Qubic bezier. In Cubic bezier, you can complete the animation in four step. Why not use step value in our transition, there is no smoothness. But in cubic basil we can maintain the smoothness of this transition. Suppose for our first step, I'm going to take 0.5 second, for our second step, I'm going to take 0.6 second, and for our third step, I'm going to take 1 second. And for our fourth step, I'm going to take 0.1 second. If I set this file and over my cards are into the red div you can see the result. You start with slow and then end first. For our first sf, it took 0.5 second and for our second step, it took 0.6 second, and for our third sf it took 1 second, and for our last tf it took 0.1 second. This is a UKsope V sier value. You can change the duration as you want. I hope now it's clear for you what is transition timing function property. In our next tutorial, we are going to talk about transition delay property. Thanks for watching this video, stay tuned for our next tutorial. 60. CSS Transition Delay Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn what is transition delay property. Basically, it's mean after how long do you want to start the transition? Let's start the practical and see how it works. As you can see, side by side, I open my visual studio creator and my browser using Lip server extension and I open my previous estimate document. Let's use transition delay property. I'm going to tie transition delay, and I'm going to pass three second value, three S. If I set this file and Obermcurs are in this D, as you can see, after three second, you start the transition. Similarly, if I remove my cursor, as you can see, up three second, it completely transition. You can set anytime as you want. This is a UTs of transition delay function, and now I'm going to use shorthand all of this property. As you can see, total use four transition property, transition property, transition duration, transition timing function, and transition delay. I want to make it one liner. For that, first, I'm going to comment out these four transition properties. Then I'm going to call on the transition. At first, you need to declare the property name. In our case, with sound to paste with here. And then we need to pass transition duration value, which is two second two a, and then come transition timing function, which is E. And our last value is transition delay value, which is two second. Now, we don't need to use these four properties. Just you need to remember we need to follow this sequence. First, you need to pass property, then you need to pass duration, and then you need to pass timing function. At last, you need to pass delay. So if I set this file and Hoberm cursor into this DV, you can see up to two second it start the animation. As you can see, it's worked perfectly. And now I want to tell you one important thing. This is not necessary that we use transition with only Her selector. You can use this transition when you load your page. Also one thing you need to remember if we do not declare the property in our case with, so I'm going to comment out this. And then set this file. As you can see, it's not going to work properly. So we need to declare the property before we use this property in our Hobart selector, and you need to remember it. And now I'm going to use this transition with different pseudoselectors. So type active. At first, let's remove the delay value. Then I'm going to set this file. If I over my car in this div, as you can see, it's not working because our pseudo selector is active. We need to press mouse click to run this animation. Let me show you. As you can see, I keep pressing my mouse weak, I just run my animation. When our mouseti is active, then it's going to perform the animation. Otherwise, it's not work. This is it for this tutorial. I hope now all the transition properties are clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 61. CSS Transform 2D Intro : Hello, guys. Good to see you back. In this tutorial, we are going to learn a new property, which is transform. And basically, we are going to focus on to re transformation. At first, let's see some example what is to transform? Here you can see two example. This is a normative element, and this deep element is rotate clockwise, 20 degrees. Using Kuri transformation, we can rotate any deep clockwise, otherwise counterclockwise. Similarly, we have another example. This is a normality and this deep element is skewed 20 degrees along the Xxs and ten degrees along the YXs. So we can skewed our element, rotate our element, scale our element, and many more. Let's see what are the values in two D transformation. As you can see, we have total 11 value into transformation. Translate, translate X, translate Y, rotate, scale, scale X, scale Y, skew, skewx, skew Y, and our last value is matrix. And we have another value which is default value, which is none. And using matrix property, you can use all of this value in one line. In this tutorial, I'm going to cover this four value. Translate, translate Translate Y and rote it. Let's start the practical and see how it's work. As you can see, side by side, I open my Visual Studio Creator and my browser using Lip server extension, and I already created TML document named index dot TML. As you can see, inside my estimate structure, I already created Dev element. I said, 200 pixel width and 100 pixel height. And also I say background color and modern. At first, I'm going to start this transformation with rotate value, sound type, transform property. I'm going to use rotate value. Inside the parenthesis, we need to pass degree parameter. Suppose I want to rotate this element 40 degree. I'm going to pass 40 DG. If I set this file, you can see the result. Similarly, if I pass 90 degree and then set this file, as you can see, our deep element rotate 90 degree. Our rotated value is part of titransformation. It not only rotate our element, it also rotate our content. Not only that, you can use negative value also. Suppose I want to rotate it -60 degree -60. If I set this file, you can see the result. And if you want to flip this deep, you can use minus 180 degree, otherwise, 180 degree. If I set this file, you can see it prepower element. So this is the usage of rotate value. Let's talk about our next value, which is translate. So I want to type translate here. I'm going to set this file. As you can see, there is no changes. Now the question is, what is the meaning of translate? The translate method moves an element from its current position. As you can see, this is the current position of this element, and I want to move this element, 100 pixel X direction and 200 pixel yx is direction. In that case, we need to use this value, translate. At first, we need to pass XX direction, then we need to pass x direction. So at first, I want to move this element in 100 pixel s direction. I'm going to pass 100 px. This is for XX parameter. Next, I want to move this element 50 pixel yxs direction. I'm going to pass 50 px. If I set this file, as you can see, it moved the element from its current position according to parameter given for the Xxs and YXs. In SS direction 100 pixel and in YXs direction 50 pixel. Let's jump into the next value, which is translate X, Summer type translate X. Is the parenthesis, we need to pass on the one parameter, which is XX parameter. This function moving the element along the X axis. If I set this file, as you can see, this is the exact position of this element because we do not pass any parameter here. And now I want to move this element 200 pixel Xxs direction. I'm going to pass 200 here PX. If I set this file, you can see the result. Similarly, we have another value for YXs direction. I'm going to type, translate Y. As you can see, this is the exact position of this element. Now I want to move this element 100 pixel at YXs direction. Inside the parenthesis, I'm going to pass 100 pixel. If I set this file, you can see the result. It move our element 100 pixel at YXs direction. This is it for this tutorial. In the next tutorial, I'm going to cover these scale properties, scale scale X, scale Y. Thanks for watching this video, stay tuned for our next tutorial. 62. CSS Transform 2D Scale : Hello, guys. Good to see you back. This is the second tutorial related to the transformation. And in this tutorial, we are going to learn this three value scale, scale X, and scale Y. Let's try to understand what is scaling and how it works. Suppose this is our DV element, and this is excess direction and this is YXs direction. If you want to decrease and increase the size of this element, in that case, you need to use scale value. Let's increase the size of this element to increase the size of this element, we need two parameter. Excess parameter and YXs parameter. This scale method increase or decrease the size of an element. So let's see how we can use it practically. As you can see on your screen, side by side, I open my visual studio creator and my browser using Lifesaver extension, and I already created estimate document named index two dot TML. So let's try to increase the deep element two V two times of original width and three time of original height. So first, I'm going to call our property name transform. Transform Scale. At first, we need to pass's direction value in excess direction, I want to scale this element two time. I want to pass two here and in Xs direction, I want to scale it three time, so I want to pass three here. If I set this file, you can see the result. As you can see, its scale our element and it also scale our text inside this element. In the similar way, you can scale down the element. Let's back to the normal position. If I set this file, it is the normal size of this element, and now I want to decrease the deep element to be hap up its original width and height. For x's direction, I'm going to pass 0.5, for YXs direction, also, I'm going to pass 0.5. If I set this file, you can see the result. This is the use case of scale value and our next value is scale x. Let me show you. Let's back to the default size, and I'm going to call scale X, and I'm going to set this file. The KX method increase or decrease the width of an element. Suppose now I want to increase the deep element width two time. In that case, we need to pass only XX value, and I want to increase it two time. If I set this file, you can see the result. As you can see, it increases the width two time. If you want to decrease the width, you need to pass value from 0.1 between 0.9. Sound pass 0.5. If I set this file, you can see the result. It decrease the width of this element. Let's back to the default size of this element. And now our next method is scale Y. I'm going to type scale Y. This scale Y method increase or decrease the height of an element. I want to increase the height three times of its original size, so I want to pass three here. If I set this file, you can see the result. And in the same way, if you want to decrease the height, you need to pass value between 0.120 0.9. Here I'm going to pass 0.6, 0.6. If I set this file, you can see the result. It's scaled down the height of this element. This is the use case of scale value. I hope now it's clear for you how it's work. In the next tutorial, we are going to learn this three value, skew x, and skew Y. But before we are going to learn another property, which is transform Aisin. Thanks for watching this video, stay tuned for our next tutorial. 63. CSS Transform 2D Skew : Hello, guys, good to see you back. This is the third video related CSS story transformation. In this tutorial, we are going to learn this three property, skew, skew x, and skew y. This method uses an element along the Xaxis and Y axis by the given angles. Instead this parameter, we need to pass angles. Let's start the practical and see how it works. As you can see, side by side, I open my Visual Studio Creator and my browser using lifesaver extension, and I already create a TML document named index dot ML. So first we need to call the property name transform sum to type transform. At first, I'm going to start this tutorial with skew x value. I'm going to pass skew X. Inside this parenthesis, we need to pass angle value. Using this value, we can change only XX direction. If we use this value from this point, it's going to change the angle. Suppose I'm going to pass 20 degree. If I set this file, you can see the result. As you can see, from this point, it take 30 degree angle. Similarly, you can use negative value also. I I pass -20 degree and then set this file, as you can see, from this point, it rotate in the right side direction. As our rotation angle is 20 degree, but in that case, -20 degree. As you can see, this rotation move only X direction, not YX is direction. Let's get to the default position, and I'm going to use skew Yo skew Y. Now the rotation work at vertical direction. If I pass 20 degree, 20 DG and set this file, you can see the result. From this point it moved 20 degree YXs direction. Basically, it's moved downward. If you want to move it upward, you need to pass minus value. If I pass -20 degree and then set this file, you can see the result. I hope now it's clear for you how X and sky property work. Let's talk about our next value, which is only skew. At first, I'm going back to the default position, and I'm going to type only SQ. In this method in our first parameter we need to pass X angle and then we need to pass YX angle. At first, I'm going to pass 30 degree Xs angle. And then I'm going to pass 20 degree YX angle. If I set this file, you can see the result. Not only that with positive value, you can use negative value also. Suppose I want to pass -20 degree in Y xs direction. If I set this file, you can see the result. This is up to you, how can you use these values? Let's talk about another property which is related to the transformation, this property name is transform origin. Now the question is, what is the Ukage of transform origin property? It is alla U to change the position on transform element. What does that mean? Suppose this is our DV element. If you remember the rotate value, then you can also remember the rotation point, which is center of this element. This rotation point is center from XXs also YXs, but I don't want to rotate my element from middle point. I want to change the rotation point. I want to rotate this element from this point means laptop corner. Similarly, if I want to rotate from this point, then this is our right bottom corner, and this is our lap bottom corner. Also this is our right top corner. You can take the point by the name. Otherwise, you can take percentage or pixel value. If you want to take the rotation point inside of this deep element, something in that position, yes, you can. According to White dot position, you need to take 20% in excess direction and also you need to take 30% in YXs direction. Just one thing you need to remember using this property, you can change the position of transform element. Let's go to the visual studio creator and see how it works. As you can see, this is our normal ty, and I rotate this dp from the center position 20 degree. But if I change the transform origin position from this point, sound to t transform origin. And I'm going to pass from XXs lip position and from YXsTp position. Sound to pass top. Before I set this file, I want to back to this deep in the normal position. I'm going to comment out these two lines. If I set this file, now it's back to the normal position. Now I'm going to uncommen these lines, and now I'm going to set this file, just focus in this corner. If I set this file, you can see the result. From this corner it move 20 degree. Let's increase the rotation value. I'm going to type 80 degree. If I set this file, you can see this result. From this point, it rotate 80 degree. Let's back to the default position. Once again, I'm going to change the rotation point. I'm going to tip right bottom. Now, from this point, it's going to rotate our element. If I set this file, you can see the result. Now the rotation or is in point is this point. Let's back to the default position. Once again, I'm going to change the rotation or is in position. But this time I'm don't going to use any corner. Now I want to rotation point something in this place. XX direction, I'm going to pass 20% for YXs direction, I'm going to take 40%. If I set this file, you can see the result. From this point, it rotates the element 80 degree. If I pass XX is value zero and YX value 100 and then set the file. Also I'm going to change the rotation angle 20 degree and then set this file again. As you can see, now our rotation point is lap bottom corner because in X direction, we use zero value, but in YXs direction, we use 100% value. That's why our rotation point is lap bottom corner. Now the question is, what is the use case of this properity? Basically, this propriety is used for animation. As you know, this is our CSS animation tutorial. That's why we need to learn about it. This is it for this tutorial. In our next tutorial, we are going to learn our next value. We are going to learn our last value, which is matrix. Thanks for watching this video, stay tuned for our next tutorial. 64. CSS Transform 2D Matrix : Hello, guys. Good to see you back. This is the last tutorial related ti transformation. And in this tutorial, we are going to learn matrix value. Now the question is, what is matrix? The matrix method, combine all the tui transform methods into one. This method take total six parameter, containing matrix function which allow you to rotate, scale, move, and skew elements. Especially if we do not use this element too much. So let's see how it work. As you can see, side by side, I open my visual studio coator and my browser using if server extension, and I already create a estimate document named Idexfo dot SML. At first, I'm going to call the property name transform, and I'm going to call our value matrix. At first, we need to pass scale X value. So I'm going to pass one. In our excess direction, I don't want to scale it. That's why I pass one value, and next, we need to pass skew Y value, and I'm going to pass -0.3. And then we need to pass skew x value, and here I'm going to pass zero. Next, we need to pass scale Y value, and here I'm going to pass one. Now we have only two parameter lay translate X and translate Y. For translate X, I'm going to pass zero, and for translate Y, I'm going to pass zero. If I set this file, as you can see, it is just skew our deep element -0.3 degree. And if you want to scale this element two time, you need to pass scale X two and scale Y two. If I set this file, you can see the result. With skew, it's also scale our element. This is the use case of this matrix method. Now, let's use all the ti transformation value one by one with Her effect and try to create a hover animation. I'm going to comment out this line, and at first, I'm going to create the pseudo selector, D, colon hover. Then inside the Calibra says, I'm going to use transform property, and I'm going to type transform. At first, I'm going to use scale value, and I want to scale this element over two time. I'm going to pass to here. If I set this file and over my cursor into this de element, you can see the result. As you can see, in a one step it complete the transition. To provide a smoothness in this transformation, we need to use transition property. I want to type transition. Here, first, we need to declare the property name and our property name is transform. Then we need to declare the transition time, which is 1 second. If I set this file and over my cursor in this de element, you can see the smoothness of this transformation. But in this example, our deep element scale from the center position. But now I want to change the transform origin position. So to type, transform Aisin. Late top. If I set this file and how my curds are in this deep element, as you can see, from this point, it's scale our deep element. Let's use our next two d transformation property, which is translate. So to duplicate this line, and I want to comment on the previous one. Here I'm going to type translate. And I want to move our deep element, 200 pixel excesses direction and 150 pixel YXs direction. If I set this file and Her Mikers there in this deep element, you can see the result. It move our deep element, 200 pixel excesses direction and 150 pixel YX is direction. Let's use our next value, which is skew. Once again, I'm going to duplicate this line and comment out previous one. Here I'm going to type skew. And in XX direction, I want to rotate it 20 degree and in x direction, I want to rotate it ten degree. If I set this file and Obermkurs are into this deep, you can see the result. As you know, our transform origin is lap off. So when I Obermkers are into this dive, you can see the result. I hope now it's clear for you what is two D transformation and how we can use it in our animation. Thanks for watching this video. In our next tutorial, we are going to learn three D transformation. Stay tuned for our next tutorial. 65. CSS Transform 3D Tutorial Translate : Hello, guys. Good to see you back. In this tutorial, we are going to learn this four translate method. Translate, translate Y, translate Z, and translate three D. We already learned about this two VLU in our previous tutorial. But here, I'm going to use it with three D transformation. Let's see how it's work. As you can see, side by side, I open my visual stereo Creator and my browser using Lifesaver extension, and I already created a TML document named index dot HTML. As you can see, inside the patent continer, we have a box container. Let's use our first VLU but before I'm going to call the transform property. Some to type transform. Our first value is translate X, someone to type, translate X. Inside the parenthesis, I'm going to pass 200 pixel. If I set this file and Hobermi cursor into this de lement, you can see the result. It's move my element 200 pixel in XXLs direction. And if you want to move it opposite direction, in that case, you need to pass -200 pixel. If I set my file and Hobermi cursor in this box, you can see the result. We already learn it in our precesse tutorial, let's make this transition three D. I want to pass another value, which is prospective, prospective 200 pixel. Also I want to pass rotate Y value, rotate, Y here I'm going to pass 30 degree. If I set this file and over my curor in this de element, you can see the result. As you can see it move our deep element, also it rotate our deep element. You know, we use prospective, that's why it gives you three D look. So let's talk about our next value, which is translate Y. So to use, translate Y. Here I'm going to use positive value. If I set this file and Ober My cursor on this de element, you can see the result. Let me use rotate x value. So to type, rotate X. If I set this file and Obermicursor on this DP, you can see, now it's look more attractive and dynamic. Let's use our next property, which is translate Z, someone to type, translate Z. If I pass 200 pixel, and then set this file. I I Hoberm cursor on this div, as you can see, it's not working. But I already said translate that value on this dive. Let's use other value with that. I'm going to use rotate value with that, rotate, y 60 degree. If I set this file and Hobermi cursor on this DV, you can see the result. But it's look pretty similar to translate X, but it is not. Let me show you. Let me use prospective value with that. SmtypPspective, prospective 900 pixel. If I set this file and Hobermi cursor on this DV, you can see the result. Let me show you the real demonstration, then you can understand it properly. Suppose this is our dev element. At first, I'm going to rotate this DVlement if we use transls Z value, then it's move like this way. I hope now it's clear for you how translate z values work. Let's talk about our last value, which is translate three D. Some to type, translate three D. Here we need to pass total three value, XX YXs and Zaxs. Suppose for XXs I'm going to pass 50 pixel and for xs, I'm going to pass 50 pixel also for Zexs I'm going to pass zero pixel. If I set this file and open my Carter on this DV, you can see the result. And if I increase Translate Z value, suppose I'm going to type 40 pixel and then set this file and over my cursor on this development, you can see the result. At the same time, it's move on XX is direction, YXs direction, and Z xs direction. I hope now it's clear for you what is transit three D value. This is it for this tutorial. In our upcoming Tutorial, we are going to cover these two values, scale three D and Scale Z. Thanks for watching this video, stay tuned for our next tutorial. 66. CSS Transform 3D Tutorial Scale : Hello, guys. Good to see you back. This is another tutorial related three D transformation. In this tutorial, we are going to learn these four methods, ScalX scale Y, scale Z, and skill three D. We already learn about scalX and scale Y method in our previous tutorials. But once again, I'm going to repeat this method in this tutorial. But the most important method for three D is scale. It defines a three D scale transformation by giving a value for the Zs and our last method is scale three D. Using this method, we can use three different values at once. Let's start the practical and see how it works. As you can see, side by side, I open my Visual Studio coordinator and my browser using p server extension, and I already create a TML document named index dot HTML. So first, I'm going to use the property name transform, sum to type, transform here. Our first value is SkXutyp scale x here, skill X. I want to scale this element two time in x direction, so I'm going to pass to here. If I set this file and Ober my cursor in this D element, you can see the result. Similarly, we can use scale Y value. I'm going to change scale Y. If I set this file and Ober my cursor on this de element, you can see the result. Because we do not provide any transform origin point, that's why it's scale middle of this element. It is a default origin position. But if you use transform origin value with that, let me show you and then set this file and Hobermi cards are on this development, you can see the different result. Let's talk about our most important value, which is skills it. But first, I'm going to comment out this line. I'm going to type scales a here. Scales to time. If I set this file and Hobermi cards are on this development, as you can see, there is no changes because this value only work with three D transformation, we need to give it three D L. I'm going to comment out this line, and I'm going to use this value with prospective and rotate Y. Also I'm going to uncommen this line. If I set this file and over my cursor on this development, now you can see the result. If I increase the scale set value, sum type seven here and set this file and over my cursor on this development, now you can see the difference, how it's worked. Similarly, if I decrease the scale value, sum to type 0.5 and set this file and over my cursor on this development, you can see the result. I hope now it's clear for you how Scalet method is worked. Let's talk about our last method, which is scale three D. Sum type scale three D here, scale three D. Using this method, here we need to pass total three value scale X, scale Y and scales. Using that, we can use three different value at once. So for XXs, I want to scale it two time. For YXs, I want to scale it three time and for Xxs I want to scale it five time. If I set this file and Ober my cursor on this deve lement, you can see the result. At first, it scaled this element two time in excess direction, then three time in Y x's direction, and then five time in Xerox's direction. This is the usage of scale three D value. I hope now it's clear for you. This is it for this tutorial. In the next tutorial, we are going to learn about a new property, which is prospective. Thanks for watching this video, stay tuned for our next tutorial. 67. CSS Transform Rotate 3D Tutorial : Hello, guys. Good to see you back. In this tutorial, we are going to start three D transformation. In our previous chapter, we learn about two D transformation. But in this chapter, we are going to learn three D transformation. Without three D transformation, we cannot imagine the animation. So let's see the values related three D transformation. As you can see, we have total ten value related three D transformation. Rotate X, rotate Y, rotate Z, rotate three D, translate Z, translate three D, scale three D, scale Z, prospective and matrix three D. In rotate X method, we need to pass angle value. Similarly, we need to pass angle value for rotate Y, but for rotate three D method, we need to pass total four parameter, X Y Z, and angle value. So in this tutorial, we are going to cover this four method, rotate x, rotate Y, rotate Z, and rotate three D. Let's see how the methodsa work in real example. As you can see, we have to tell for deep element in our document, and I said for different rooted value for this example. If I over my cursor, rotate x deep element, you can see the transformation. In this way, rotate X work. Here we use the rotatx value with prospective. If we use rotate value, it draw a line in X direction from this point to this point. Let me show you the real example. Assume that it is a deep element, and if I use rotatx value, it's going to create a line from this point to this point. This is our transform origin line. If I pass positive value, something 40 degree, then it's going to rotate our element this way. If I pass -40 degree, then it's going to rotate this element this way. Can you see my face? Absolutely not. But if I use 90 degree angle, then it's going to rotate this element like this. Now the element is not visible properly. But if I rotate it 180 degree, now you can see the opposite part of this element. In that way, rotating will warm. Let's talk about our next value, which is rotate Y. If I Ober my cursor in this DV, you can see the effect. Also, we use prospective value with that, that you can understand this value easily. If we use rotate Y value, it draw a line from this point to this point. Mean YXs direction. That's why we call it rotate Y. Using angle value, you can twist it left side, otherwise, right side. Let's see the example how it's work. If we use rotate Y value, it's going to draw a line from this point to this point means YXs direction. This is our origin line and by default, it's always came to the center. If I pass positive 40 degree perimeter, it's going to rotate this element this way. Similarly, if I pass -40 degree, then it's going to rotate this element this way. If I rotate this element 90 degree, now the whole element is less visible and you can see my face. If I rotate it 180 degree, you can see the opposite part of this element. Our next value is rotate Z. If I berm cursor on this dive, you can see the result. It define three D rotation along the Zs. Let's see how it works. This is the example of Zexis rotation. It defines three D rotation along the Z axis, by default, parsing point is always centered, and using positive or negative value, we can rotate it this way, otherwise that way. Our last and final value is rotate three D. It's define complete three D rotation. If I Hoberm cursor on this div, you can see the result. At the end of this example, I will give you the demonstration how it's work. Let's start the practical with rotate eggs value. As you can see, side by side, I open my visual studio Creator and my browser using if server extension, and I already create a estimate document named demo dot TML. As you can see, inside a paren container, I create a box container, and I said similar height and width for our paren container and our child container. For paren container, I said a gray background color, and for child container, I say chocolate background color. Let's call the transform property and use rotate eggs value. So to call transform rotate X. Here we need to pass a rotating angle parameter, so I'm going to type 40 degree. If I set this file, here you can see the result. Hey, it's properly, but you cannot feel the change too much. For this, I'm going to use prospective and transition that you can understand it very easily. I'm going to use it with Her selector, dot, box, colon, Her. Inside the calibraces, I'm going to call this property. And I'm going to call transition property for smoothness. Transition and our property name is transform and our transition duration is 1 second. If I said this file and over my cursor on this deep element, you can see how its work, but it is not clear at all. That's why I'm going to use another vdo which is prospective. It's going to give you the three d two, and I don't going to explain how prospective work. For prospective, I will give you a separate video. Let's use the prospective value. So type prospective. And inside the parenthesis, we need to pass the value and our value is 200 pixel. If I set this file and then over my cursor on this de element, you can see the result, how it work. Assume that it creates a line from this point to this point means Xx direction. Using this value, you can twist it upward, otherwise downward. This is the use ks of rotatx value. Let's change the rotation angle 90 degree. If I set this file and over my cursor on this de element, now you can see the result. Now it's completely invisible. If you want to turn it around completely, then you need to pass 180 degree value 180 degree. If I set this file and over my cursor in this dive, you can see the result. As you can see it rotate our deve element 180 degree. Not only that, also you can change the transform origin position. Let me show you. I'm going to call transform origin property. Transform origin. Now I don't want to rotate this element middle of this element. I want to rotate it from this corner. In that case, we need to use right bottom value, right, bottom. Before I set this file, also, I'm going to change the rotation angle, which is 30 degree. If I set this file and over my curar on this de element, as you can see, from right bottom corner, it rotates 30 degree. I hope now it's clear for you how rotating value work. So let's jump into the next value, which is rotate Y. But before, I'm going to comment out this line. And here, I'm going to type rotate Y. If I set this file and Obermi cursor on this de lement, you can see the result. As you can see it divide our element and draw a line from this point to this point. It's mean YX direction. And from this line, you can twist it left side, otherwise right side according to the angle value. Everything is similar to rotate x value. Just draw a line and divide this element from this point to this point at YXs direction. That's why we call it rotate Y. Let's talk about our next method, which is rotate Z. Sound rot, rotate Z. If I set this file and over my cursor on deep, you can see the result. It draw a line in Zdaxs. I want to say middle of this DV element. Let me show you example and see how it's work. And you can see a picture. If you use rotate x, it draw a line from this point to this point. Using this value, you can rotate your element upside or downside. If you use rotate Y value, you can rotate your element, lip side or right side. If you use rotate Z value, let me show you how it's work. I hope now it's clear for you how rotates that value work. Let's talk about our last value, which is rotate three D. At first, let's see the real demonstration. If I use rotate three D, we can use all the rotate value at once. This line is for XXS rotation line, and this one is for YXsT one is our Zxs line. Now I'm going to rotate it in S direction. At the same time, I'm going to rotate it in a YXs direction this line is for Xxs direction, at the same time, we can rotate it in a zxs direction. Basically, it's defined three D rotation. At first, I'm going to call the value, rotate CD. Then inside the parenthesis, you need to pass total four parameter, XX YXs Zaxs and angle. You can specify the acess of rotation using a number for the first three arguments. But for fourth argument, you need to specify the angle value. For Xs, I'm going to pass two comma for YXs I'm going to pass minus one minus one. Similarly, for Zaxs also I'm going to pass minus one. But in our fourth parameter, we need to pass angle value, some to type 45 degrees. If I set this file and Rober mycar on this deve lement, you can see the result. This is the UK of rotate three D method. This is it for this tutorial. In our upcoming tutorial, I'm going to cover these two values. Translate Z and translate three D. Thanks for watching this video, stay tuned for our next tutorial. 68. CSS Perspective Tutorial : Hello, guys. Good to see you back. In this tutorial, we are going to learn a new property, which is CSS prospective. In our previous tutorials, we already learn about it. But in this tutorial, we are going to use it individually. But before we start the practical, let's see some examples. Here you can see this is the example of rotatis and this is also the example of rotatics. But the difference is for this element, we use prospective. That's why it's provide three D L. Similarly, this is the example of YXS rotation. For our first example, we do not use prospective, but for our second example, we use prospective. That's why it's provide three D L. If you use prospective, you can clearly see the rotation, and if you do not use prospective, you cannot understand the rotation. Let's try to understand it with more details. Suppose you are watching a projector screen from this point. You can say the distance and angle of point of view are called prospective. It will look bigger if you look closer and if you look at it from a distance, it will look smaller. Let me show you the real demonstration. Suppose this is our div element. If you look at it closely, it will look bigger, and if you look at it from a distance, it will look smaller. This is called prospective. It looks small and big despite not being resized. I hope now it's clear for you, prospective comes with another property which is prospective origin. By default, it's come with center, but you can change the prospective where you want. Let's try to understand prospective origin with detail. Suppose this is your room. If you look at it from the center position, you can see all the walls and floor clearly. This is your top floor, this is your bottom floor. This is your right side wall, and this is your lip side wall, and this is your background wall. But if you look at your room from the laptop corner, I want to say from this corner, then you cannot see the left and top floor early. Similarly, if you look at your room from this position means top position, then you cannot see the top floor early. You can see the bottom floor, background wall, right side wall, and left side wall because your prospective origin position is top. Similarly, if you look at your room from the right top corner, you cannot see the right wall and also your top floor is barely visible or not. Because your prospective origin is right and top. But if you look at your room from the right side, by mistake, I type right word in lift position. If you use right side prospective origin, then you cannot see the right wall properly. You can see the background you can see the bottom floor, you can see the top floor and also you can see the lip side wall. But your right side wall is not visible. If you use bottom right prospective origin, then also you cannot understand the right wall. As you can see, also right wall is not visible. With that, bottom floor is rarely visible. Similarly, if you look at your room from the bottom position, then you cannot see the bottom floor properly. If you look at your room from lap bottom corner, then you cannot see the lap val. Also, you cannot see the bottom floor completely. If you used only lap prospective origin, then you cannot see the lip al. You can see right val, you can see background l, you can see bottom floor, also you can see top floor, but you cannot see lip al. These are all origin values. Also, you can use percentage value with that. With prospective, you can change the prospective origin. Let's start the practical and try to understand how we can use prospective and prospective origin property. As you can see, side by side, I open my visual studio coreor and my browser using if server extension, and I already create a TML document named index dot TML. As you can see, there is a DB element. Now I want to rotate this DVelement when I Obar my cursor on this element. So here I'm going to use transform property, So type transform. Transform rotate, rotate X, and I want to rotate it up to 50 degree in Xxs direction. If I set this file and Hobermkaza on this deep element, you can see the result. As you can see, it rotate our element, but it is not clear because we do not use any prospective value. In our previous tutorials, we use prospective as a transformation value, but now I'm going to use prospective property, and we need to use this prospective property in our base continer, not the child continuer. Here we need to tie prospective. I'm going to pass Prospective 800 pixel. If I set this file and Hobermcur are on this de lement, now you can see the three D look. In our previous tutorials, we use prospective as a transform value. Just you need to remember prospective give the element three D look. Also you need to remember if you use prospective property individually, then you need to use it in the parent container, not the child container. Now let's change the prospective value. Suppose I'm going to pass 100. As I told you earlier, decreasing the value of the prospective will make things look bigger. If I over my cursor on this de lement, you can see the difference. Now it's look bigger because we watch this element very closely. That's why it's look bigger. In the opposite way, if we increase the prospective value 1,200 pixel and then set this file and over my cursor on this de lement, you can see the result. Now you can see the smaller object. Because we know that an object looks small when we view it from a distance. As you can see, now the distance is 1,200 pixel. For now, I'm going to type 800 pixel prospective. Let's talk about prospective origin and how it's work. So at first, I'm going to call this property, which is prospective origin, prospective origin. By default, S value center and YXs value center. So root type, center and center here, center center. If I set this file and Hobermi cars are on this development, as you can see, from the center point, it rotate our element. As you can see, there is no changes because this is the center center position. At first, I'm going to use value. Prospective origin, right. If I set this file and Obermicars are on this development, you can see the result. As you can see, our element doesn't overflow from the right side because now our perspective is right side. That's why we cannot see the right vel. Similarly, if we use lift value p and set this file and bermca on this de element, now you cannot see the lip vel as you can see, our element not overflow from the lip side, but it overflow from the right side. If we use any cube shape, then you can understand it properly. You can try all the origin value one by one. Not only that, you can use percentage value also. We are going to learn all of these when we are going to work with real projects. This is it for this tutorial. Thanks for watching this video, stay tuned for our next tutorial. 69. CSS Transform Style Tutorial : Hello guys. Good to see you back. In this tutorial, we are going to learn a new property related CSS animation, and the property name is transform style. Basically, this paperty work with transform Property. Let's learn more about it. The transform style property specified how to state elements are rendered in three D space. Basically, this property come with two value. Our first valorem is flat. I specified that child element will not preserve its three D position, this is the default value. The main and important value is preserved three D. Specifies that child elements will preserve its three D position. Basically, I want to say, if we use preserved three D value in parent element, then our parent element work like a three D object. Let me show you the example. Here you can see that we have animated a child element, as you can see, the smaller dV element passing through the larger DV element. As you know, larger dv or parent element. If we use preserved three D value, then we can perform this kind of three D effects. If we do not use the preserved three D value, let me show you. Now you can see our parent element do not act like a three D element, and our child element cannot pass through the parent element. So this is the use cage of transform style property. Let me show you another example. Here you can see a paren Deb, and inside the paren Deb, we have a child deep, and I rotate our child af 40 degree at YXs duction, by default, our pen transform style came with flat value. That's why our parent Deep do not act like a three object. But if we use transform style property and use preserve three D value, then our background deep act like a three object, and our child deep moving pass through the background element. So without wasting your time, let's start the practical. As you can see, side by side, I open my Visual Studio Creator and my browser using Lip server extension, and I already create a SML document named index dot HTML. Here you can see total two div element, parent element and our child element. As you can see, we already rotate our child element 50 degree at Xxs direction, and I already use prospective property in our parent element. I say prospective value 800 pixel now I want to rotate the parent DIV element. I'm going to use transform property in our parent container. Transform. Rotate Y, and I want to rotate it 30 degree at YX direction, 30 degree. If I set this file, you can see the result. Yes, it's rotate our element, but it did not provide any three D loop because we do not use any transform style property, so I'm going to use transform style property, Transform style. By default, this property came with flat value, but I'm going to use preserved three D value. If I set this file, now you can see the result. Now you can see our child element pass through the parent element. You need to remember you need to use this property in your parent container, not the child container. If I turn on my developer toolbar and select this element, as you can see, our transform rotate X value is 50 degree. Hey, this is our child element. If I increase the rotation angle, you can see the transformation. If I decrease the rotation angle, also you can see the transformation. Let's rotate the parent container. So I'm going to select parent container, and I'm going to rotate this parent container. If I rotate the parent container, you can see the three D look. Now you can clearly see our child element pass through the parent element. This is the use cage of transform style property. Now, let's change the transform origin of our child element. So type, transform origin, and I'm type bottom. If I set this file, now you can see the result. From bottom, it rotate our child element 50 degrees. Let me show you clearly. If I increase the rotation value or parent element, you can see it clearly. As you can see, from bottom side, it rotate our element. This is it for this tutorial. I hope now you understand what is the usage of transform style propriety. Thanks for watching this video, stay tuned for our next tutorial. 70. CSS Backface Visibility Tutorial : Hello, guys. Welcome back. Once again, I'm come with a new tutorial and in this tutorial, you are going to learn a new property, which is backface visibility. You need to use this property with transform property. Before I start the practical, let's try to understand what is backface visibility. The backface visibility property defines whether or not the backface of an element should be visible when facing the user. Now the question is, what is backface? The backface of an element is a mirror image of the front face being displayed. Suppose inside this de element, you type hello world. If I rotate it 180 degree, then you can see the backface of an element. As you know, it mirror your element. As you can see the text reflection. This property is useful when an element is rotated. It let you choose if the user should see the backface or not. Suppose you don't want to show the backface of an element. Using this property, you can control it. And our backface visibility property come with two values, visible and hidden. Let me explain it with three D object. As you can see on your screen, here is a three D cube. If you use hidden value, then you cannot see the opposite part of this cube. But if you use visible value, then you can see the other part through this cube. This is the main difference of this two value. Let me show you another example. As you can see on your screen, there is two div element, and I use transform property, both of this element. As you can see, we use rotate Y value. If I hober my cursor in our first div element, you can see, you can see the backface of our first element. As you can see, it mirror our text, but I don't want to show the backface when I rotate our element. In this element, we use backfat visibility property. If I hober my cursor, now you cannot see the backface of this element. Because we use hidden value for this one. Let's start the practical and try to understand how its work. As you can see, side by side, I open my visual studio coor and my browser using Lifesaver extension, and I already create a TML document named index dot HTML. As you can see in my browser, we have total two Dev element, continuer and box. As I told you earlier, if you want to use backface visibility property, then also you need to use transform property. Inside the Hober selector, I'm going to type transform. Transform, rotate, Y, and I want to rotate it 180 degree. If I set this file and Hoberm curves are on this delement, you can see it rotate our element. Also you can see the mirror text. Now I'm going to use our new property, which is backface visibility. I'm going to type back phase visibility. First, I'm going to use visible value. If I set this file and Obermi curs are on this de lement, you can see the backface. But if I use hidden value, let me show you and set this file and over mica there on this deve element, No cannot see the backface of this element. This is the use case of backface visibility property. This is it for this tutorial. From the next tutorial, we are going to learn CSS animations. Thanks for watching this video, stay tuned for our next tutorial. 71. CSS Animation Tutorial Part1 : Hello, guys. Good to see you back. So finally, we are going to learn CSS animation. You can animate any SML element using CSS animation. Let's see an example. As you can see, there is a DV element. It's automatically animating without mouse hover. It's convert rectangle to a circle and then it's convert circle to rectangle. This is the little example of animation. It's work automatically. You don't need any hover effect. Let's see what type of property we have in CSS to create this animation. As you can see, we have total nine properties related CSS animation. Our first property name is animation name. Using this property, you can define a name for the animation. Thence come animation duration. Using this property, you can define how long you want to run this animation. Thence come animation delay property. It specify a delay for the start of an animation. Thence come animation iteration count. It specify the number of times an animation should be played our next property is animation direction. It specified whether an animation should be played forwards, backwards or in alternate cycles. And then come animation timing function. It specify the speed curve of the animation. Our next property is animation film mode. It specify a style for the element when the animation is not playing. We are going to learn about it in our last tutorials. Our next property is animation phase state. It specify whether the animation is running or pause, and our last property is animation. This is the shorthand property. You can use all these properties value at once using this property. We are going to learn all these properties one by one. Now, to use all these animation properties, you need to create a selector, and the selector name is Addid keyframes. At first, you need to type Aderate keyframes and then you need to provide any animation name. Just you need to remember, do not provide any space in this name. You can provide hyphen, you can use underscore or camel case also, but do not provide any space. Then inside the calices, you need to provide two different keyword from and two. It's mean from where you want to start the animation and using two keyword, you need to provide the animation endpoint. Inside the calices, you can use any CSS property. Suppose you want to change container width. Yes, you can. There is other method that you can use it. You can use percentage for same job. You can replace starting position with 0% and similarly, you can replace end position with 100%. Both of these statements going to return same result. But here you can use any percentage value 0-100. Suppose you want to change the color at animation starting point and also you want to change the color at 20%. You can provide multiple value if you use this method. So without wasting your time, let's study practical and see how it work. As you can see, side by side, I open my isalts studio creator and my browser using t server extension. As you can see I already created a TML document named index dot TML. As you can see, there is a deep element and the class name is box. And I already style this de element with 250 pixel, height 200 pixel, and I also align this deep element middle of this web page. Now I want to animate this deep. I want to transform this rectangle into a circle. With that, I also want to change the color without using Her selector. I'm going to use different CSS animation properties. At first, I'm going to create Keyframe selector at the rate Keyframe. After Keyframe selector we need to provide a animation name. For our animation, I'm going to take example. Then inside the arises, we need to use two keywords from and two, from, and then I'm going to use two. From starting point, I want to say border radius zero, some time border radius property. Border radius 0%. At the end of this animation, I want to change border radius, 50%. Border radius 50%. If I set this file, it's not going to run the animation because we need to link this animation name with this box. For this, I'm going to take a property, which is animation name animation name, our animation name is example. Using this method, you can use this keyframe multiple times and you don't need to create this animation over and over again. Now, with animation name, also, we need to declare the animation duration time. I'm going to call another property, which is animation duration. And for 2 seconds, I want to run this animation. Here you can use second or millisecond value also. So if I set this page, you can see the animation here, but it run our animation for only one time and it takes two second to complete this animation. And now I decide to run this animation for five time. For this, we need to use another property, which is animation iteration count. So t animation, iteration count, and I want to run it five time. That's why I pass five here. So if I set this file, as you can see, it run our animation five time. Three, four, and five. After complete the term, it stop executing our animation. And if you want to run this animation forever, you need to pass infinite value here, some t infinite. If I set this file, as you can see, now it's run our animation forever. I don't want to run this animation forever, so I want to pass three value here. I want to run it three time. Now, as you can see, after complete the animation, it back to the previous position in a one step. When it return from end value to start value, as you can see, there is no transition. In a single step, it complete the animation. To provide the smooth base, we need to use another property, which is animation direction, St animation direction. And I'm going to use alternate value. If I set this file, now you can see the smoothness when it's back to the normal position. If I run it infinite time, you can see the smoothness. As you can see, when it back to the start position, there is a smoothness. Now, let's talk about animation direction property. Basically, animation direction came with four value, normal reverse alternate alternate reverse. Normal is the default value. The animation is played as normal. I work forwards. In the opposite way, revers work backward. If you use reverse value, the animation is played in reverse direction. Then come alternate value. If you use alternate value, at first, it played forward, then it's play backward. Our last value is alternate reverse. In that case, the animation is played backward first and then forward. You already learned about alternate value. It's move from start position to end position, then back to the position to start position. Our next value is reversed. Let me show you. If I use this value and then set this file, as you can see, the animation is starting from circle and then convert to a square. Let's talk about our last value, which is alternate reverse. If I use alternate reverse value and then set this file, as you can see, the animation is played backward first, then forward. So this is the use case of animation direction property. For now, I'm going to use alternate value. If I set this file, you already learn about it. This is it for this tutorial. In the next tutorial, I'm going to show you the different methods of keyframes. Thanks for watching this video. Stay tuned for our next tutorial. 72. CSS Animation Tutorial Part2 : Good to see you guys. In this tutorial, I'm going to show you the second method to run the animation. In our previous tutorial, we used from and two keyword. But in this tutorial, we are going to use percentage value. Without wasting your time, let's back to the Visual Studio codiator. As you can see, side by side, I open my Visual Studio coreator and my browser using Lifesaver extension, and I open my previous estimL document. As you know, from is our starting position. I'm going to repress from with 0%, 0%. You know two keyword or end position. I'm going to repress two keyword with 100%. So if I save this file, as you can see, it's or the same way. And now I want to change the background color at the end position, so I'm going to use background property, background, our background color is red. If I set this file, as you can see, with shape transformation, it's also changed the color. As you can see, for this animation, we use total four different CSS animation properties, animation name, animation duration, animation iteration count, and animation direction. Now I'm going to show you how can we use 410 of this animation. I want to say, how can we use this four property value in a single line? For these, we need to call other animation property, which is animation. Animation. At first, we need to pass the animation name. As you can see, our animation name is example. So to copy the name and paste it here. Then we need to pass the animation duration time. As you can see, our animation duration time is two second, soun to pass to second. Remember, you need to follow this sequence, and then I'm going to pass iteration count value, which is infinite. Next, I'm going to pass animation direction value, which is alternate. For now, these four extra lines are not needed. I'm going to comment out these lines and I'm going to set this file. As you can see, it's worked perfectly. It works the same way. Now I'm going to talking about another new property, which is animation delay. For this, I'm going to comment out this line and uncommen these ones. After duration property, I'm going to type animation delay. Here I'm going to pass three is, wins three second. You also can take millisecond value. It's mean if I repress this file, our animation will be starred up to three second. Let me show you some to set this file. As you can see, after three second, it start our animation. So this is the use case of delay property. At last, I'm going to use another property, which is animation timing function. But before, I'm going to show you the values related CSS animation timing function. Basically, we have to run six value is linear is in is out, is in out Q weg bezier. If you use E value, it specify an animation with slow start, then first, then end slowly. This is the default value. Our next value is linear. I specify an animation with the same speed from start to end. Then come our third value, which is in, specify animation with a slow start. In the opposite way, we have another value. Es out, specify an animation with a slow end. Our fifth value is e in out, specify an animation with a slow start and end and our last value is cubic Bzier. You can define your own values in a cubic sier function. Let me show you the real example how they works. Here you can see the elements with different timing function values. Linear is is in is out and e out. As you can see, we use anuation duration time for all of this. But as you can see, the work in different way. Their speed is not same. As you can see, linear maintain the same speed from start to end, and then come our next value, which is ease. As you can see, it started with slow, then first and end slowly. And then come ein. It specified the animation with slow start. And then come IO. It specify the animation with slow end and our last vil is EEO. It specify animation with slow start and slow end. So this is the difference between all timing function values. So let me show you how we can use it practically. So I'm going to call our property name which is animation timing function. Animation, timing function. At first, I'm going to use is value, summon to type is. If I set this file, as you can see, it start with slow then first and end slowly. And this is the default value. I'm going to use our next value, which is linear. Summon type, linear. If I set this file, as you can see, it maintains the same speed. You cannot understand the difference in this example. You can understand it properly when we start our exercise and project. Then I'm going to use our another value, which is EN. If I set this file, as you can see, it specify animation with slow start. Our next values is out. Sum type is out. If I set this file, as you can see, it specify animation with slow end. Our lust values is in out, sum to type is in out. If I set this file, as you can see, it specify the animation with slow start and slow end. Now I'm going to use our lust value which is cubic Bzier. I'm going to type Cubic Bzier here you need to pass total four value, not more than four value, not less than four value. At first, I'm going to take 0.1 value and then I'm going to take 0.4 value. Next, I'm going to take 1.0 value. Then come 0.1 value. It's going to cover the animation with four step. For our first step, it's going to take 0.1 second. For our second step, it's going to take 0.4 second, and for our third step, it's going to take 1 second, and for our last step, it's going to take 0.1 second once again. So if I set this file, you can see the result. After three second, you can see the animation pattern. With this value, you can complete your animation in a four step. As you can use all the step as a shorthand. For this, you need to use this value in third position. First, you need to pass animation name then duration time, then timing function, then delay value, then iteration count, and then animation direction. Don't worry about it. We are going to learn all of these when we start our projects. Now I'm going to change color at 50% of animation. I want to say 50% position of animation, 50% inside the Caris is, I want to change the background color. Background Blue. If I set this file, as you can see, at the 50% position of animation, it changed the color. First, it converts chocolate color to blue colour, then it convert blue color to red color. We can use as much value as you want here. So this is it for this tutorial. In our upcoming tutorial, we are going to learn what is animation film mode and what is animation plasted mode. So don't miss our upcoming video. So thanks for watching this video. Stay tuned for our next tutorial. 73. CSS Animation Fill Mode Tutorial : Hello, guys, good to see you back. In this tutorial, we are going to learn a new property related CSS animation and our property name is CSS Animation Fl Mode. But now the question is, what is animation film mode? The animation film mode property specify a style for the element when the animation is not playing. We can use it before it start. Also we can use it after it. Otherwise, we can use it both the condition. At the same time, we can use it before the animation and up the animation. Now, let's talk about the values related animation film mode. This property come with total four value, none, forwards, backwards, and both. None is the default value. Animation will not apply any style to the element before or after it is executing. Our next value is forward. The element will retain the style values that is set by the last keyframe. Basically, it's depend on animation direction and animation iteration count. Our next value is backwards. The element will get the style values that is set by the first keyframe and retain these during the animation delay period. Otherwise, we can use our last value, which is both. The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions. We are going to use this four film mode value in this tutorial. Let's start the practical and see how it works. As you can see side by side, I open my result studio coeator and my browser using Lifesaver extension, and I already created TML document named index dot STML Also you can see a deep element in my browser. And I set 150 pixel width and 100 pixel height in this deve element. Now I'm going to animate this deep element and also I'm going to put different color to this element. I'm going to increase the width of this element. And as you can see, I already create the keyframe for this animation, and our keyframe name is example. Inside the cliorss I'm going to tie. At first, I'm going to take 0%. Inside the cliorss at first, I'm going to change the background color, background. I'm going to put yellow color. As I'm going to increase the item width, sum type width W, as you can see, our previous width is 150 pixel, and now I'm going to put 200 pixel. Also I'm going to duplicate this line three time. 0%, then come 50% at last, 100%. In 50% of animation, I'm going to increase the width to 50 pixel. And also, I'm going to change the background color. Background color red. And in 100%, I'm going to say item with 300 pixel, and also I'm going to change the color. This time, I'm going to use blue color. So basically, we create a simple animation keyframe. Let's use this keyframe in this box. For the first, I'm going to take animation property, animation. Our animation name is example. Then we need to passe animation duration time, and I want to complete this animation in 2 seconds. Next, I'm going to pass animation delay value, and I want to delay this animation for three second. If I set this file, as you can see, up to three second it run our animation. And after complete the animation, it's back to its initial position. Now I'm going to use animation film mode property. We can use it after duration value, otherwise, we can call the property name. I'm going to call the property name Animation field mode. As you know, this property came with four values. At first, I'm going to use backward value backwards. If I use backward, it's directly jump into the 0% of this animation. Let me increase the animation delay time. I'm going to use five second for this example. If I set this file, as you can see, it already jumped into the zero person. It starts from the zero person, then come 50%, then come 100%. After complete the animation, it's back to the normal position. Let me show you once again. If I set this file, it start the animation from the zero person and then delay for 5 seconds and then executing our animation. As you know, if we use backward value, the element will get the style values that is set by the first Crefon and retain this during the animation delay period. Let's jump into our next value, which is forwards. Someone to tie forward here. If we use this value, it's simply run our animation, but at the end, it's not back to the initial state. Let me show you. If I set this file, as you can see, after 5 seconds, it's going to run our animation. As you can see it do not back to the initial state. As you know, the element will retain this tile values that is set by the lust keyframe. As you can see, our lust iframe is 100% and its background color is blue. A in that position, we set item with 300 pixel. Let's jump into the next value, which is both. If I use this value, both, it's going to start our animation from 0% and after complete the animation, it stuck on the hundred percent position. If I set this file, as you can see, it starts from the 0%. Then after five second delay, it start our animation. As you can see after complete the animation, it is not back to the initial state of this element. If we use this value, it will follow the rule for both forwards and backwards. This is the use case of both property. Now, let's talk about our last value, which is none. Some of type, none here. If I set this file, as you can see, nothing going to happen here. After five second, simply's run our animation. So this is the us case of non value. This is it for this tutorial. I hope you like this tutorial. Now it's clear for you what is animation film mode. Thanks for watching this video. Stay tuned for our next Tutorial. 74. CSS Animation Play State Mode Tutorial : Hello, guys. Good to see you back. In this tutorial, we are going to learn a new property related CSS animation, and our property name is Animation Place State Moon. Now the question is, what is animation place state? The animation place state property specify whether the animation is running or pause. You can run your animation, otherwise, you can pause your animation with this property. Basically, this property come with two value, pause and running. If you use the pause value, it is specified that the animation is pause, and running is the default value of this animation. Without wasting your time, just study practical and try to understand what is animation play state. As you can see, side by side, I open my visual studio coreor and my browser using p server extension, and I open my previous TML document. Now I want to stop my animation when I open my Kara on this deep element. For that, we need to use animation place state property. As you can see, we delay our animation for 5 seconds. If I set this file, you can see after five second, it run our animation. Now I want to stop this animation while it's running. To stop the animation, I'm going to Her my cursor. At first, I'm going to create a hover selector for this box. I'm going to type dot, box, hover inside the Cariss, I'm going to use our property animation play state. At first, I'm going to use pause value, so I'm going to type pause here. If I set this file, as you can see, after five second, it's going to run our animation. But I'm going to ho my cursor on this element. As you can see, it stop our animation. I do not execute the animation completely. I I remove my cursor, as you can see it complete the animation. Let me show you the example once again. But before, I'm going to reduce the delay time. 1 second. If I set this file, as you can see, after once again, it ran our animation. But when I hober my cursor on this element, it stop the animation. But now I'm going to remove the cursor from this element. As you can see, now it's complete the animation. Then back to the normal state of this element. But now I want to run this animation when I hour my cursor on this element. For this, I'm going to copy this property. And paste it here. By default, I want to pause this animation. But when I Ober my carer on this element, I want to run this animation. So in our Hober selector, I'm going to type animation play State running. If I set this file, as you can see, once again, the animation is not running, but if I Ober my cara on this element, as you can see, up once again, it ran our animation. This is the use case of animation playtatePperty. I hope now it's clear for you how its work. Thanks for watching this video, Stay tuned for our next tutorial. 75. CSS Object Fit Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn another CSS property, which is object fit. This CSS object fit property is used to specify how an image or a video should be resize to fit its container. This property tell the container to fill the container in a variety of ways, such as preserve that expect ratio or stretch up and take up as much space as possible. This property come with total five value. Feel contin, cover, nun and scale down. Let's start the practical how we can apply these values. So as you can see, side by side, I open my Visual Studio code editor and my browser using Lifesaver extension, and I already created an TML document named index dot HTML. So as you can see, inside this body tag, we have an image and the default resolution of image is 600 by 450 pixel. But here, I'm going to assign fished height and weight to this image. So inside the head tag, I'm going to use style tag. Style and inside the style tag, I'm going to select the image IMG. Then inside the clivuss I'm going to set with height. Width, I'm going to assign 200 pixel. Also, I'm going to assign height, height, 300 pixel. If I set this image, as you can see, the image being squeezed to fit to the container, and the image container size is 200 y 300 pixel. Now the problem is the original aspect ratio is completely destroyed and here in here, the object property come in. I'm going to apply object property. I'm going to type object fit and I'm going to start with cover value cover. If I set this file, you can see the result. If we use object feed cover, the image keep its original expect ratio, and according to exact object ratio, it feel the given dimension. As you can see, our width is 200 pixel and height is 300 pixel. So according to the dimension, without changing the aspect ratio, it fit the image. Now our image is not look squeezed. Now, let's talk about the next value, which is contain. I'm going to duplicate this line and comment out previous line. And this time, I'm going to use contain value, contain. After set this file, you can see the result. If you use object fit, contain the image, keep its aspect ratio, but it resized to fit within the given dimension. And as you can see, our dimension is 200 pixel y 300 pixel. So now you can see it do not change the aspect ratio of this image, but it fit in the given dimension. And if you use field value sound duplicate this line and comment or previas one, as I told you, field is the default value. Fill, and then set this file, you can see the result. Now it squeezed the image. Also, if I use non value. Again, I'm going to duplicate this line and comment out previous one and place fill with none and set this file. Now you can see it do not squeeze the image. And the last value I'm going to apply is scaled down. So I'm going to duplicate this line and comment out previous one and replace none with scale down. Upper set this file, you can see the result. It is pretty similar with content value, otherwise, nun value. If you use object feed, scale down, the images scale down to the smallest version of none or content. So this is how object fit property work. Now, let me show you the real example why we need to use object feed value. So as you can see in this example, we have total two images side by side, and as you can see, we set with 100% and set height 400 pixel. Container height is 400 pixel and width is 100%, in our images, as you can see, we use inline styling. We use float, lift, and set with 50% and height 100%. We use the same CSS value for our next image. Now the problem is, if I try to resize the browser window, suppose I want to reduce the browser window width. Now you can see it squeezed both the images. So it's destroy the real aspect ratio of these images. But if I use the propriety object fit Suppose Object fit, cover. Also I'm going to use in our image to Object fit, cover, and then set this file. After set this file, as you can see after reload this browser, it resolves the problem. As I told you, Cover value keeps image resolution aspect ratio as it is. Also, it feel the image in given dimension. That's why we need to use object fit property. I hope now it's clear for you. Thanks for watching this video. Stay tuned for the next tutorial. 76. CSS User Select Tutorial : Hello, guys, good to see you back. Once again, I'm back with another tutorial related thesis. And in this tutorial, you are going to learn a new property, which is user select. Basically, user select work as a securoty. I do not allow to user copy data from your website, and this is the main reason we use user select. This property come with four value, auto, none, text, and all. Auto is the default value. So 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 Lifesaver extension, and I already create an HTML document, named index dot HTML. So as you can see in our body tag, we have a deep tag class box. And in this dip element, we have some dummy text. Now, if I try to copy this, otherwise, select this dummy text, yes, we can. But I don't want to give permission to user to copy the text. Otherwise, select the text. So we need to use user select property. So to type user select. As you know, the default value is auto. If I use auto value and the set this file and try to select this text, yes, we can select the text. But if I use non value, some to replace auto with none, and then set this file, this time if I try to copy the text, otherwise, select the text, we can't because this time it's not going to allow to copy or select because here we use user select property, none. But we can select the heading text, but we cannot select the text which is inside this development. The next I'm going to use, which is text. It is pretty similar with auto value. If I use this value, as you can see, now we can select the text. Next we have another value, which is, so I'm going to replace text with A. If I set this file, it's going to allow to copy, otherwise select the text. Just we need to click once in our text section. After one click, it's going to select automatically all the content. This is the usage of value. Instead of to click, it allowed to select the text in one click. This is the main difference between all the values. This is it for this tutorial. Thanks for watching this video, Stay tuned for the next tutorial. 77. CSS Box Decoration Break: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn a new property, which is Bob's decoration break. It is used for text decorating and text styling, and it has come with total two value, slice and plow. Now, let's start the practical and see how we can use the value and create different effects. 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 create an TML document name in Exotst. So in our body tag, we have a heading tag and a span tag, and I style the span tag, Hearst background color and set Font size 21 pixel with that her Is line height 32 pixel. And now I'm going to add some break tag inside this span tag. So in this sentence, here I'm going to use some break tag BR BR. BR. BR break and break tag, and I'm going to add another one break tag, BR. I'm going to sip this file. Up you set this file, you can see the result. It breaks the sentence in multiple lines. And now I'm going to add border to this span tag. Border to pixel, and I want solid border. With that, our border color is black. If I set this file, you can see the resin. Now you can notice you can see or border, start from this position and end it at that position. Also, I'm going to add border radius. Border radius five pixel. After I set this file, you can see the border radius, but I want border radius in every line. I don't want it at the start and the end line. I want it every line. To resolve the problem when you to use box degradation break. So hematite, box, decoration, break. And as I told you, it come with total two value, slice and clone. Slice is the default value, so her use Clone value. After set this file, as you can see, it's not working because here I use Chrome browser. Chrome browser do not support this property. To use the property in a Chrome browser, you need to use prefix. So let's duplicate the line and use prefix. Web. If I set this file, this time you can see, now it add bottle radius at every word. Now it allow us to assign padding to every section. So if I pass padding and I want to add padding and I want to add ten pixel padding from every direction, and then set this file, you can see the result. Let's increase the line height for better visibility, 50 pixel. Up to set this file, you can see the result. This feature is only possible by this property, box decoration break. I hope now it's clear for you. Thanks for watching this video. Stay tuned for the next Tutorial. 78. CSS Quotes Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, you are going to learn another new property, which is codes. This property do not work with any TML tag. For that, you need to use a special tag, which is code, Q. Qtag stands for quotation tag. Let's start the practical and see the example. As you can see side by side, I open my Visual Studio code editor and my browser using Live Server extension and I already create an TML document name index dot HTML. As you can see the body tag, we have a Q tag used as for quotation tag. That's why you can see the sentence in this quotation. Basically, using COTS property, we can replace the quotation with any other character. Suppose without using codes I want to show the dollar sign. I'm going to use the Quotes property. Codes, then here we need to use Double code sin and inside the double codes, I'm going to pass dollar sign. This is for starting sine. Also, I'm going to pass another character. Here I'm going to pass and percent. After set this file, you can see the result. Now it replaces codes with dollar sign and also it replaces codes with and person sine. It starts with dollar sign and end with and person sign. You can replace quotation with any sign. Suppose if you want to use less than sine and greater than sine, then this file, you can see the result. If you search in Google quotation mark characters, then it show you various website that provide different type of quotation and you can copy the quotation and apply it here. If I open the Wikipedia website, you can see a lot of quotation marks. From here, you can copy the quotation sign. Suppose I want to use this quotation sign, this one. Fun copy this quotation sign and replace with it. If I set this file and back to my browser, you can see the result. In that way, you can use Imogs any type of character as quotation. This is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 79. CSS Border Image Tutorial : Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we are going to learn border image property. You are already familiar with border color property, border with property, border radius property, but using border image property, we can assign images in our border. Also, we can assign gradient color in our borders. Before I start the practical, let me show you some examples. Here you can see we have a deve ilment and in this development, we have border, but this border is not solid. It's made with images. It looks like a image frame. Basically in this tutorial, we are going to learn how we can create border using images using border image property. So let's start the practical. We have total six properties related border image. Border image source, border image slice, border image width, border image, outset, border image repeat, and border image. Our last property border image work as a one liner. So let's start the practical and see how we can use. So as you can see, side by side, I open my a studio code editor and my browser using live server extension. And I already created an TML document named index dot HTML. So in our body tag, we have a box D. And in this box, we have some dummy text. If you wrote, you can see how we use border, solid border, and our border color is black, and our border width is 30 pixel. And now we need to replace the solid black border with an image. If I show you my working directory, we have some images, and I'm going to use this image, 05. If you see, you can see this image is blank at middle and it cover with geometric shapes. We are going to use this image as border image, and this is a PNG image. Let's back to the code editor. At first, I'm going to use a property which is border image source. Sound type border image source. Then we need to provide the image path, URL. So Hemo type URL, then you set the round verses to provide the image file path, which is 05 dot PNG. Now, let's set the file and see what it return. Upper set this file, you can see the images, but you can see the image at corners. Also, you can notice it removed the solid black border color. So let's jump into our next value, which is border Image slice. I use this property because I want to show this geometric shape at every side. But before we need to understand what is slicing. Let's jump into the photoshop sbtare. As you can see in our photosphere here we open an image. Using slicing technique, you can define how much portion of your image you want to show in your border. Suppose I want to show this amount of area in my border section. This amount of area contain the complete geometric shape. That's why I want to show this area. If I select this area again, you can notice in the info section how much area we select. At the same way, I want to select area from this picture because we are going to apply this picture as border image. So from here, I want to select this amount of area. After select the area, here you can see the result. If I select this area again, now you can see in our info section, it return how much area we select. It return with the height, 28 by 28. I mean, 28 pixel. Now, let's back to the co deditor again. Here I'm going to pass border Image slice 28. Pixel. We don't need to mention the unit, we need to pass the number. Now, let's set the file and see what it return. After I set this file, you can see the result. This is what it returned. Now you can see the geometric shape at four corner and for the border, it stretched the image. At the same way, if you want to show the hub image, I want to say if you want to show the hub geometric area, let me show you, if you want to show this amount of area, then you need to pass this value, pixel by 15 pixel. Let me show you. If I pass, if I replace 28 with 15 and this this file, now you can see a different design. But for now, I would like to go with 28. I want to for the whole geometric area in our border. And if you want to remove the stretch area for that, you need to use another property, which is border image repeat. These are all values that we can use with border image repeat property, repeat, stretch, round and space. Here, I'm going to use the third property called border Image repeat. Border, image, repeat. And here I'm going to pass the value called repeat. If I set this file, you can see the result. Now you can see, now it horizontally and vertically, repeat the geometric shape, and if I make it stretch and set this file, you can see it's pretty similar with old result and there is another value. But before I show the value, let's back to type repeat again. Repeat the set this file. You can see at the corner it not aligned perfectly. For that, we need to use another value called round. I'm going to duplicate this line and comment or previous one and replace repeat with round. If I set this file, this time you can see there is no problem at the corner. Not only that, you can define differently horizontal and vertical value. Let me show you. So again, I'm going to duplicate this line and comment on previous one. And this time horizontal, I'm going to use repeat value, repeat, and for vertical, I'm going to use stretch value, stretch. If I set this file, you can see the result. Now it repeat the geometric shape from the Xxs and stretch the shape at YXs direction. So this is how you can define image repeat values. And if you want to scale the boder size otherwise, reduce the border size, just to change the value. Suppose for now our border width is 30 pixel. If I make it 20 pixel and then set this file, you can see the result. As you can see, now it reduced the border width. If I reduce or increase the border width, it's not going to effect on image. According to the border width, it's going to scale down, otherwise, scale up the image. Example, if I increase the size, if I make it 50 pixel and the set this file, you can see the result. So for now, I want to make it 30 pixel. And now I'm going to show you another property, which is border image outset. Hemo type, border image, outset. Using this property, you can control how far outside the border area you want to show the image. But for the better understand, I want to add background color to this box. Background, I'm going to use purple color. I'm going to use medium purple color. I'm going to type medium medium purple. After set this file, you can see the result. Now you can notice our border image is inside the box area. It's not go outside the box area. Now use this property, we can move the border image outside the box area. Suppose I want to move it 20 pixel outside. If I set this file, you can see the result. Now it moved the boerimage pixel outside of this box. Next, I'm going to use another property which is border image width. After image slice, I want to use this property head. Some type border image width. Using this value, we can control the border image width. If I pass 15 pixel, otherwise, ten pixel, now it's going to set the image with ten pixel. Sorry, we need to pass the unit pixel. If I set the file, you can see the result. It reduce the image size. At the same way, if I pass 20 pixel, and then set this file, you can see the result. Basically, we use this property to scale the image, otherwise scale down the image. So we already use the five values. Now I'm going to use the lst value, which is border image. As I told you, it's going to work as a one liner. If you use this value, first, we need to pass the image source, then we need to pass the slice area, then we need to assign the weight, then we need to provide the outside value and last, we need to provide the repeat value. Let's start the practical and see how we can apply this one. At first, I'm going to comment out all the lines including image source. Then I'm going to use the property, which is border image. At first, here we need to pass the source path. I'm going to copy this URL and I'm going to paste it here. Then after space, we need to provide the slice area, which is 28. Then we need to pass the image width, which is 20 pixel and between slice value and width value, we need to use slash. It is necessary. Then again, I'm going to use slash, and this time I'm going to pass, and here we need to pass outset value, and I'm going to use something ten pixel, and at last, we need to pass the repeat value, and I want to use round value Round. Let's set the file and see is it to work properly or not. After set this file, I think I did some mistake Oops. When don't need this slash after the second last value. If I set this file, now it's work perfectly. You can see the result. This is the shorthand of border image property. First, we need to provide source, then we need to provide slice area. Next, we need to provide image width. Then we need to provide outset value and at last, we need to provide the repeat value. Now I don't want to show the border image. I want to show gradient color. For that, we can use this property again. I'm going to be this line and comment out previous one and this time here I'm going to use linear gradient color. I'm going to drive linear. Gradient. Then inside the rounders is, I want red and blue colored. Red, and next color is blue. Also we can define the gradient direction. Hemo type two, right. Oops, there is a spelling mistake ingredient, DENT Also if you want to provide slice value, suppose I'm going to slice 25 pixel, 25. If I set this file, again is not working. I think I did some mistake. First, I'm going to remove this direction, let's remove the direction and then set this file again. Now it's work. If I pass the direction, let me try again. Heitize two right. After set this file, again, it's not working. Oh, oops, we need to provide the comma. If I set this file, now you can see the result. Now it's worked perfectly. This is how we can use Ber image properties. I hope now it's clear for you. So thanks for watching this video. Stay tuned for the next tutorial. 80. 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. 81. 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. 82. 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. 83. 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. 84. 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. 85. CSS Pseudo classes Selector part 4: Hello, guys, good to see you back. This is another tutorial related CSS poseido glass selector. In this tutorial, we are going to learn the remaining posto glasses. We are going to start with read only and rewrite posto glass. In our timLPm, if we use read only attribute, then we can just only read this input section. We cannot write anything in this input feed, and read red mode is default mode. Let's back to the visual studio code and try to understand what is the usage of this two select. As you can see, side by side, I open my isults Studio code editor and my browser using LibserverEtension, and I already create an estimate document name from dot ten. 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 here we type read only. And this this file, now you can see our first name input field is not disible. 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 will 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 shield using Posidoglass. For that, we need to use read only positoglass. Smotype input, colon, read only. Then inside the calibraces, first, I'm going to say the border. Border, I want one pixel border, and I want solid border and our border color is red. If I set this file, you can see the result. We successfully can target read only field using read only Posido 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 Positro 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 load 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, 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 I 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 posito class. 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, so 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. 86. CSS Pseudo Element : 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, attribute selector, Bseudoglasses, 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 Adaist 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 sum 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 applies the 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 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 coolant 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 us positive element, which is solder. 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 comment, which is from dot table, and you are already familiar with this table from. As you can see in this from, we do not have any placeholder in this fro, so 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. 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 set 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. 87. 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. 88. CSS Attr() function enhanced : 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 open my visual studio code editor and my browser using if server extension, and I already created an TML document name indexOtETML. So as you can see in our body tag ab, paragraph tag, P, and here type hello word. And in our style section, as you can see, our font family, our body font family is aerial 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 and 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 Her my cards are on this paragraph, then I want to show the attribute name. For that, we need to use Ober positio selector. 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. 89. CSS Counter Increment & Counter Reset Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS, and in this tutorial, you are going to learn about a new property called CSS counter, and we are going to learn to property related counter. Counter increment and counter is it. But before, let's see what is counter. This is the example of counter. CSS counter are variables maintained by CSS whose value can be incremented by CSS rule. It is used to track how many times they are used. So as you can see in this example, we have body tag and inside this body tag, we have heading one tag, and then inside this heading one section, we have heading two tag. Then we have HR, which is going to divide this section. But if you notice in our browser, the result is different. Before the text, as you can see, term and CSS, it prints section one. At the same way, for the next H one tag, it prints Section two, and for the third H one tag, it print section three. Also you can see, we have some subsection inside this section one. Also here, we numbering this subsection. This is what we can do using counter. We don't need to mention this section manually. If I duplicate this portion, if I duplicate this portion and change the text, suppose if I make it HTML and JavaScript. Then at this section, you can see the result. Now it creates a new section called Section four, and if I duplicate one of the subsection and set this file, you can see the result. In our Section two, we have now total four subsection, but before the H two tag, we do not create anything. We do not type it manually. So using counter, we can track how many time we use. And as I told you, counters are we like variables. As I told you, we have to run two property related counter, counter increment and counter reset, and also we have function related, which is counter. This two property and the function correlated with each other. Now let's try to understand how this property and the function work. Our first property is counter resit. Here, at first, first, we need to pass a counter name. Then we need to mention in which dist I want to run the counter. Here you can take any counter name. Just you need to remember you cannot provide any space in this name. Basically, here we create a variable and a value. Our variable is counter name and the value we pass here and our value is one. Now we need to print this counter. For that, we need to use this counter function, and to run this counter function, you need to use CSS property content. Then you need to mention the exact countername using Counter function. Counter inside the round address is, as you can see here we create a counter named my counter. I'm going to pass the variable name. Then a call this value, we need to increment the value. Basically, I want to say we increment the counter. For that, again, you need to use this property, counter increment. In this propriety, at first, you need to mention which counter you want to increment. In our case, my counter, and then you need to pass the increment value five. In our case, I want to increment the counter with five. It's going to print first it's going to print one, then it's going to print six because it increment the counter with five. Next, it's going to print six plus five. It's going to print 11. At first, we need to create the counter reset. Here we need to mention counter name and counter value. Then we need to print the counter using counter function. For that, we need to use content property, content counter and inside the round recess we need to pass the which counter I want to increment. At the next step, we need to increment the counter using counter increment property. Then it's not going to reset the counter. It's going to print the counter again. After increment the count ars not going to reset the counter. Then it's going to print the counter. After print the countr again, it's going to increment the counter and it keep going on and on. Now let's talk about the practical usage of this property. 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 create an estimate document named index dot HTML. In our estimate tag, we have heading one tag. Then we have some paragraph tags and heading two tags. First, we have heading two, then paragraph. First, we have Heading two, then paragraph. This is how I repeat these Heading two and paragraph for time. And now I want to start a counter before all the headings. For that, we are going to use CSS Counter increment and counter reset value. Let's see how it's work. So at first, I'm going to jump into the body tag, counter rest, and here I'm going to call counter resit property. Counter rest. First, I'm going to provide a counter name, and our countername is M and our counter name is M Counter. After I provide the name, then I'm going to pass a value and I'm going to pass zero. It means it's going to start the counter after zero value. So it's going to start this counter from the one, and now I'm going to select the heading to tag, H two, heading two, and I'm going to use sudo classes B four. So before all the H to tag inside the round presses, I'm going to use content. First, we need to provide nameFirst, we need to provide a name for this content, and I'm going to pass the name chapter. Then I'm going to run a function named counter. So hair type. Counter, then inside the round brasses, then inside the round presses, we need to pass the counter name and the counter name is my counter. Then I'm going to use double course and inside the double course, I'm going to use column sine and a use this column sign, I use Semicolmn to end the line. If I set this file, upper step this file, now you can see before every H two tag, it add Chapter zero. Now the question is why it print zero? Because here we do not increment our counter. We need to increment our counter, and to increment the value, we need to use counter increment probability. So let's call the counter increment property. Inside the two, then I'm going to use counter increment. Then I want to increment my counter. And I want to increment by one. And I'm going to set this file. Up to set this file, you can see the result. Now it print Chapter one, Chapter two, Chapter three, Chapter four. Every time it increment our counter r by one. Now, if I change the value two, now, every time it's going to increment our counter r by two. Up to set this file, you can see the result. First, it prints Chapter two, then it print Chapter four, then it prints Chapter six, then it print Chapter eight. Let's change the chapter color for better understand. So I'm going to use color property, and I'm going to say green color. Sorry, green, not gray. Up to set this file. Now it's much more visible. Now, let's change the counter reset will. If I make it five and then set this file, this time you can see our chapter start with seven because by default, our counter value start with five, then it's going to add two in this counter. That's why it print Chapter seven, every time it's going to add two in our previous value. That's why it print Chapter nine and Chapter 11 and Chapter 13. If I pass one counter grement and they set this file, now you can see it print serial numbers, but it start with Chapter six. Just you need to remember in our counter res property, we need to provide first going to provide a counter name, then we need to mention from where we want to start our counter. And if I do not provide any value to counter reset property, I'm going to remove this value and the set this file, then you can see it work serially. By default counter reset value come with zero. That's why it print from 1234. Now you decide you don't want to print number in counter. You want to print Alpha etics. For that, just you need to mention upper my counter coma you need to mention upper Alpha Alpha. If I set this file, you can see the result. Now it print Chapter A, Chapter B, Chapter C, Chapter D. At the same way, you can print it lower case, in to change upper to lower. Lower Alpha. Up to stifle, you can see the result. This time, you can see it print small letters, Chapter A, Chapter B, Chapter C, Chapter D. And if you want to print Roman Vu, you can, you need to pass lower Roman. You can see now we print Roman numbers, and the last value is upper Roman. So if I pass upper And so this file, you can see it prints Roman numbers in upper litter. Not only that, you can create subcunter inside the counter. Let me show you the example. For the next example, again, I create a new html document named index two style. As you can see, we have heading one tag, then below this heading one tag, we have some heading to tag. After every H one tag, we have H to tag. We have three H to tag. These are all sub heading. And now I want to run to different counter for heading and different counter for subheading. So first, I'm going to create counter four H one tag. So first, I'm going to call counter reset property. Counter reset, counter reset section. I'm going to name it section. And then I'm going to create H one before. So here I want to type H one, semicolon, colon, colon colon, posit selector before, then inside the cierssF will to call the content property. Contin. Then in double codes, I want to print section. Section space. Then I'm going to paint the counter. And I said the round press is we need to provide the counter name, and our counter name is section. Then after print this section, I want to print, then I want to print a colon sign. That's it. And then we need to increment the counter. So we need to call counter increment property. Counter increment counter increment, and I'm going to pass section. And I'm going to set this file. After set this file, you can see the result. First, it prints Section one, then it print, Section two, then it prints Section three in our heading one tag. Now, we need to create counter four sub headings, and it's going to work when we have only H one tag. So to create this subcunar, we are going to jump into the H one tag. Then inside the H one text section, we are going to create the counter rest. Count ar reset, and I'm going to pass a name, and I'm going to name it subsection. And I'm going to increment with one, so I'm not going to pass any value. Then we need to create before four H two, H two, colon, colon, before proceed to selector, before. Then inside the clirass I want to copy this section and I'm going to paste it here. First, I'm going to replace section with subsection, copy the value and name content section with subsection. Then in our counter function, we need to change the value. Section two subsection. Also, we need to change in our counter grement section. After set this file, you can see the result. Inside every section we have subsection, and also we assign counter to every subsection successfully. So this is our counter word. I hope you enjoy this process. Thanks for watching this video. Stay tuned for the next tutorial. 90. CSS Caret color : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn about a new property, which is correct color. So let's see how we can use this property practically and what is the benefit of using this property. So as you can see side by side, I opened my so studio code editor and my browser using if server extension, and I already created an TML document named index dot HTML. So in our body tag, we have a pro. Also, you can see the t from in my browser. We have some input field, first name, last name, age, email, and hobbies. Now the quien is what is cart? If I click on any input field, as you can see, if I zoom it little bit, as you can see, a Karsalblink hair. This is called caret. If you want to change the blinking Karzal color, just you need to use a property called carret color. Let me show you how you can use it. As you can see, I already select the input tag and text area. Inside this selection, I'm going to use caret color. Arrete color and I'm going to say it red. If I set this file and think any of the input field, now you can see it changed my car or color. Now you can see it changed the carat color. Now it becomes red and it's applied the carret color in all input field. Also in our text area. You can use any color format, hexa, RGBA, et cetera. If you pass auto, let me show you then it's going to apply the default color, which is that if I click on any input field, now you can see it return the black color. Also, if you don't want to show the carat for that, you can use transparent color. Let me show you. I want to replace Auto with transparent. If I set this file and click on any input field, now you cannot see my cart because now it's become transparent. But still, you can write anything in this input field. Add one. But you cannot see the carat. I hope now it's clear for you what is carat color. Thanks for watching this video. Stay tuned for the next tutorial. 91. @import Rule: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn a new thing in CSS, which is CSS Import rules. So why we use the input rule method? Suppose you have tutor two CSS file. Now you want to use one CSS file into another CSS file. For that, we use input rule. We don't need to link to file in our timLPage. Just we need to link main CSS file with our estimate page and another one going to play the supportive role, which you going to link with Min dot CSS file, and to import the CSS file into another CSS file, we need to use this rule at the red input. Then inside the double course, we need to pass the file name, otherwise, file path. Also, there is another method that you can define input. Is another method where you can use URL. If you want to provide absolute path, in that case, you can provide path like this using URL. In our first method, you can pass on the relative path, but in our second method, you can pass relative path, also absolute path. With that, it's come with another option where we can define media. As you can see in this example, Hero use a media called print. So whenever someone tried to print the page, in that case, it's going to apply this CSS, print style or CSS. I hope you are already familiar with this media. All print, screen, and speech. All type of media cover three type of media at once. Second one is print. It is used only for print purpose, and third one is screen. It is used in our mobile screen, touchscreen, tab, laptop, computer, et cetera, and last one is speech. Now, let's see how we can use this media rule practically. 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 Html document named index dot HTML. And as you can see, we create a basic web layout. Here you can see, we have header section, we have menu section, we have content section, sidebar section, and at the bottom, we have footarSection, and we do not put any color in this HTML page. And so if you notice, inside the head tag, we have a link tag. And in this link tag, here I link main dot css file. This is our Min dot CSS file. And in this CSS file, we write CSS visually for the structure, not for the color. That's why you cannot see any color in this page. And if you notice, you can see, also we have another file named color dot CSS. This file is separately created for colors, background color, header section color, menu section color, content section, color, sideboard color, et cetera. And now I'm going to input this particular color dot CSS file into main dot CSS file. Can directly use the colored dot CSS file with our HTML using Link tag, but I'm not going to use that. I'm going to import the colored dot CSS file into main dot CSS file. So I'm going to input this file. Just one thing you need to remember, you need to import the file at the top. So here, I'm going to type at the red input. Then inside the double codes, I'm going to pass the file path, which is colored dot CSS. And semicolon to this line. And I'm going to set this file. After I set this file, as you can see, now it put all the color in my layout. It feels colored to the header section, menu section, sidebar section, and footer section. Also, the background of this web page. And now I want to import printStyle dot CSS file. If someone tried to pin this web page, then I don't want to print sidebar section. Also, I don't want to print this manubar. I just want to print the exact content section. Or that her creative five print style CSS. Here we basically hide the sidebar and menu section. As you can see, menu and sidebar display none. Also, and also I increase the content with area 100%. And now I'm going to input this file using input rule method. So here I'm going to type at the rate Import, and this time, I'm going to use URL. And inside the double codes, I'm going to pass Printylet CSS, and I'm going to set this file. After set this file, you can see the result. And there is another problem. After input, the print style CSS, it remove our maneuver and our side was section. To resolve the problem, we need to define the media. We need to define the media purpose. For that, you need to define the media. So here, I'm going to type print. If I set this file, now you can see cyber section, also the menus section. But if I try to print the page, let me show you print. Now you can see in our print page, we don't have the menus section and the sidebar section. I print header, content and the footer section. So this is what we can do using print media. 92. Css Icon Fonts: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we're going to learn about icon fonts. We are going to learn how we can use icon phones in our tamale pages. But before we start our practical, let's see what are icon fonts. So as you can see, here I OpenE website template. And in this top bar section, as you can see, we have office address, sales department, open time, et cetera. But here you can see the icons before the text. Open time, call us and office address. Here you can see call icon, map icon, and clock icon. These are not an image. These are icon fonts. Also, you can see this icon at that section GR icon, Subot icon, documentation icon, and cart icon. We do not use images for that. We use icon fonts to create this icon. As like any other phons, these are all fonts. These icons are made with fonts. If we use images without font then it's going to increase our server loading time. Also, it's going to create our website layout very heavy. That's why we use icon fonts. The benefit of using icon font is all type of fonts available in a single file. We don't need to search for any type of icon in website. You can access thousands of images from one single file. Now let's see how we can insert it in our web page. For that, we need to go to Google and search for icon fonts. And here you can see a website, Font Awesome. This is one of the most popular website that provide icon fonts. Without it, there are a lot of sites which provide icon fonts. Even Google provides icon fonts. But in this video tutorial, I would like to go with Font Awesome. So I'm going to click this link. As you can see, it's redirect to this website. So this provide free version also it provides P version, but we would like to go with free version. So I'm going to click this button, start for free. After click, start for free, it's redirt to this page. Now, here you can see in this section, it teach how we can use this phone. We can use it in our web projects, desktop projects with APIs. In various projects, we can use these phons, but I would like to go in our web project. So here you can see the download option. Just click on Download option. After Click on Download options redid to this page. Now it's us. This is font awesome Verse six. This is the latest version. It release on April 2024. To download this font, just you need to go to the fontsom.com slash Download PAGE. From here, you can see the option for download. As you know, we are going to use this font for our web projects. For that, we need to use this option. We need to download this option, free for web. I already download this font. If you click this option, automatically, it's going to download this font. If you download this font, it will provide Cs file is file that you can use with preprocessors. Also, it provides SVG files. And don't worry. We are going to learn about SAS, CSS preprocessor and WIG graphics in our upcoming tutorial. So after I click this download button, it will be download in a Z file. Then you need to extract this file. After extract this file. As you can see, if I open this folder, it provides CSS file, CS file, as pile, script, SVG, web forms, et cetera. So at first, I'm going to open CSS folder. Here it provides all type of fonts, brands, regular solid SVG, et cetera. And if you want to use all of it, then you can use this file all. Now let's try to explore what is the meaning of all type of font. So let's get to the website and click on this menu option icons. If I click on ICOs, as you can see, here you can see Font Awesome Version six provide total 30,199 fonts. But it is only for proversion. Now, let's scroll down the page a little bit and jump to the font section. So I'm going to start to with solid forms. Here you can see all the icons are solid. And if you want light forms, then click on Light. Now you can see all the fonts are made with border line. Now these are not solid fonts. Similarly, if I select the thin section and uncheck the light section, now you can see icons border are more thinner than previous version. And if I show you the regular one, let me show you regular. Now you can see all the icons are made with 50 50. I want to say it made with solid. As it made with border line. So it divide our icon in a different style. So it provide all type of CSS for that. But if you want to use all type of font advance for that, you can use this one, this option. So we are going to use all fonts. So to copy this file and I want to move it in our current working directory. This is my current working directory, and I want to paste it here. With that, I need to copy another five, sorry, another folder, which is web fonts. So I'm going to copy this web font folder. Here you can see all type of fonts. So I'm going to copy the whole folder and I'm going to paste in my current working directory. For me and you, it is a difficult way to use web fonts. Don't worry. Also, I'm going to show you the easy path. Now, let's jump into the Wizard studio codeditor. So as you can see, we are in my code ieditor and this is my current working directory. Here you can see the Adt css file. Also we have a folder named web fonts. Now I'm going to open Adt Css pile. And now we need to link all the font which is inside our web fonts folder with this file. For that, we need to scroll down my page. We need to scroll down Aldo CSS page. And as you can see, we have source, and this source redirect to all the font which is inside the webfont folder. So we need to link it again. For that, for that, we need to change the current root directory. We need to redirect it won folder. So I'm going to rewope this to dot from every URL link. Because this folder is my current working directory. That's why we don't need to go two step further to link the folder. I know this is the very difficult way. This is not the easy way, but I need to show you that. And then I'm going to set this file. This is it. And now I'm going to open my previous project where we create a Bessy web layout. Did you remember this project Bessy web layout? Yes, we are going to apply all the icon fonts in this project. And now we need to link all dot CSS file in this web page. So inside the head tag after the title tag, I'm going to type link, link, and we need to provide the path of this file, all dot CSS, and I'm going to set this file. Now our icons are ready to use. Now, let's see which icon we are going to use. We are going to use home icon for home Link menu. So let's jump into the website. Then then you need to select the free option because we are going to use free version of font. That's why I would like to go with free option. And for home, I'm going to use this icon, house. So I'm going to click this icon. After click this icon, as you can see, it provides some option. We can download it as a SVG file. Also, it provides a Sable link. If I use the code, the exact code, then it's going to create the icon. Also, if you are coding with react, also it provide code for react. For VA and also it provide is very good. But we are going to use the font in our t page. So I'm going to copy this link. And if you notice our icon is solid. That's why it assign a class F is solid. And this is the icon of house. Also, it assign a class FA house. If I use the regular version, now you can see our class is still same if a house, but also it assigned another class named Aregular. At the same way, if I click on lighter version, now it assign a class, Flight, and it is a house. That's why it return I a house. And if I select this option, now it assign a new class, which is Fa dutne means dual tone. At the same way, if you click on this option thin, now you can see it provides FA thin glass. So we are going to start with solid class, F is solid. So again, I'm going to copy this code. So I copy this nip it, and I'm going to paste it before the home. So we need to go to the menu section in my a stable page. Then before the home, I want to past we need to paste it here. So if I set this file, now you can see the home icon attached with Home Menu option. And if you do not like solid icon, just you need to change the class name. Suppose I want to use Light Virgin. Light Flight. And if I set this file, up to set this file, as you can see, it's not going to work properly because I think if I select the light version, yes, it's a pro version. Only pro version can use this option. Now we have only one option. We need to go with solid. So I want to copy this code again and replace it with the older one and set this file again. So we have some limitation. This version is not free for all. In our free version, it provides only 1,392 icons. So we need to go with some older version of this font. As I told you earlier, I'm going to show you total two methods that we can use web phones in our web pages. This is the difficult one, and now I'm going to show you the easy method, very easy method. So as you can see, here I open a website, named wthschool.com. This website is a best resource to learn website development. Now, click on the CSS section. After click on CSS section, scroll down a little bit. Here you can see the option. Name CSS icons. Click on this option, and this will provide total three examples how you can use CSS icons. It provides fontosom CDN link. Also, it provides Boosterp icon CDN link. With that, it provides Google fonts. As I told you, we are going to use fontosom for this tutorial. So here you can see a option, name, read more about how to start with pontosom in our pontosomFive tutorial. Its free edition provide total 588 icons. Set fast only to copy this script tag. So I'm going to copy this script tag, and then I'm going to jump into my visual studio code editor. Then inset this head tag, at first, I'm going to paste this script tag. So a title, I'm going to paste this script tag, and I'm going to set this file. Next, let's get to the website again. Next, we are going to try some accessibility icons. So I click on this link, and as you can see, it provides some accessibility icons. Suppose you want to use this caption icon. For that, you need to copy this class. Then after I copy this class, let's jump into the studio code. Let me show you. So here, I'm going to use ITAC I. Then inside this ITAg I'm going to assign a class. And as I told you, we need to use the particular class to use the caption icon, which is fast AA closed captioning. I'm going to set this file. After set this file, as you can see, it's not working because here we need a particular J code. For that, let's back to browser again. For that, you need to log into this website. It will provide you the JavaScript code, Wontosom JavaScript code, something like that. This is your personal pontosom CDN link. Just copy this code and back to the browser and replace this code, replace the old code with code. And the set this file. After step this file, now you can see the result. I print caption sign, and then I'm going to duplicate this line multiple time. Total three time. And now, step by step, I'm going to increase the height of this font. So for that, we need to use style attribute style. As I told you, our icons work as a font, so you can use the font properties to manipulate this font size. So I'm going to use font size property, font size, and I'm going to assign 24 pixel. If I set this file, you can see the result. As you can see, it increased our first font size. At the same way, I'm going to increase all the font size. So at the next font, I'm going to assign 36 week salt style font size 36. With that, I want to assign a new font color, and it is very simple to change color of this font. Just to use color property. Color, and I want red color. Then just set this file. After set this file, you can see the result. Then I'm going to duplicate this line again and this time I'm going to remove both the lines because you don't need to try this much of cold air. I'm going to increase the value. This time, I'm going to use 48, pixel, and here I'm going to use green color and set this file again. Now let's try other icons. So again, I back to the website and jump into the CSS icon section and redirect to pontosm be tutorial. From here, according to situation, you can get various forms. Suppose if you want alert fonts, so these are the alert fonts that you can use in your website. And if you want animal icons, just stick on animal icons, you can see the result. It's provide all type of icons according to your needs, date and time, design, editor, education, et cetera. Suppose I'm going to use this one, this By icon. But this time, I'm not going to use this class name. I'm going to use the Unicode. Just only to use only one class name FAs. Let me show you. I'm going to copy this UICode and let's back to the with the studio code editor. So here, I'm going to create a button, button, and in this button, then inside this button, I'm going to use ITAg I. And in this I tag, first, I'm going to Fine a class, and in this class, we need to use only one class name, AA is. Then I'm going to use the particular Unicode. We'll use this unicode to use the Bal icon. Also, I'm going to pass a text in this button and her I'm type button. And I'm going to set this file. Now you can see this button tag come with a ball icon. And if you want to increase the button size, the ball size, otherwise, take size, you need to use font size property. Style, I'm going to use font size. And for this button, I'm going to use 24 pixel, and I'm going to set this file again. After I set this file, you will see the result. So this is how we can use different icons according to the situation. There are various website that provide this kind of fonts, but font toosos the best one. If you have pro subscription, then you are able to access all of it. So this is it for this tutorial. Thanks for watching this video. Stay tuned for our next Tutorial. 93. CSS Scrollbar Styling Tutorial: Hello, guys, good to see you back. Once again, I'm back with another tutorial related CSS, and in this tutorial, we are going to learn scroll bar style. Before we start our practical, let's see what kind of style we can apply in our scroll bars. As you can see in this example, we have total six different scroll bar. We have solid scrollbar, we have scrollbar with box shadow. We have scrollbar which is made with border, we have gradient scrollbar, et cetera. To create this kind of scrollbar, CSS introduce some new properties. These are not properties. These are poseido elements. So let's try to understand the poseido elements. The positive elements are particularly introduced to style scroll bar. The first positive element is scroll bar. The second positive element is scrollbar thumb. The third one is scroll bat track, and fourth one is scrollbar corner. Some browsers do not support this element. Only Chrome, Safari and opera support it properly. Also, we do not use this property directly in our browser. We need to use prefix, webkit, and after using webkit prefix, it look like that. After two colon, we need to type hyphen webkit, hyphen, then we need to pass the positoelmin name. So without talk too much, let's start the practical and see how we can use it. As you can see, side by side, I open my Rizal studio code editor and my browser using if server extension, and I already create an tML document named index DotsTMl. So as you can see, Hary created devilment and also we set an ID taste. With that, also you can see a vertical scroll bar. And I'm going to style this scrull bar, and I already apply some CSS in this taste deep. Here we set with 250 pixel height 400 pixel. Also, we set margin border and overflow, overflow auto. That's why you can see this scrull bar. So at first, we need to select the DV element using its ID name. Has DAG, taste, taste, colon colon, hyphen, webkit. We need to use this prefix without using prefix, I think it's not going to work. So I'm going to type webket scrollbar. Then inside the Cali resis, using this posto glass, we can define scrollbar width. We can define custom scrollbar with. So I'm going to take with with 20 pL. If I set this file, you cannot see anything because you need to apply a background color. So I'm going to use diagram property background, and I'm going to use gray color. After set this file, you can see the result, and also you can notice the thickness of the scrollbar. And now we need to apply scrollbar track. So I'm going to upgate this section, and here I'm going to type scrollbar dash, Track. Here, I'm not going to mention. Just want to mention the background color. And for now, I'm going to apply green color. And I'm going to set this file. After set this file, as you can see, it define our track. Also, I'm going to comment out this background color from scrollbar. Remember, our cars are move on scrollbar track, not this scroll bar. To make it more clear, let me apply some border radius. Sometime border radius, I'm going to apply ten pixel. After set this file, you can see the border. This is our scrollbar track area, and now I'm going to apply our third property, our third posito element, which is scroll bar thumb. So I'm going to dug this section. And I'm going to replace Jack with thumb. With that, I'm going to change the thumb color. Otherwise, you cannot understand the thumb. I'm going to apply yellow color, and I'm going to set this file. After I set this file, you can see the result. Now you can see our scrollbar thumb work properly. Also, you can apply gradient colors. So I'm going to apply linear gradient colors. So I'm going to duplicate this section and comment out previous line. And here, I'm going to type linear gradient. And here, I'm going to pass to the two color red, and our second color is yellow. After stud this while, you can see the result. Also, we can apply the gradient color in our track. Let's make this scroll but track a little attractive. So here I'm going to apply gray color. And I'm going to set this file. Let's use some lighter version of this gray color. No accurate gray, this much of gray. And I'm going to set this file. Yes, now it's looking pretty fine. Also, I'm going to apply little box shadow. So I'm going to type box shadow. First, I'm going to insert it. Insert, then from XX is zero, from YX is zero, and for the blurness I'm going to use six pixel. And also we need to apply the shadow color. So type RGBA RGBA inside the round brass, red for red, I'm going to pass zero. For green, also I'm going to pass zero and for blue, also I'm going to pass zero. And for the Alpha value, I'm going to pass 0.3. I want 30% transparent. If I set this file, if I set this file, you can see the result. After assigning the box shadow, it looks like a three D shape. Now our scrollbar look a little attractive. With that, I'm going to use the similar type of box shadow in our thumb area. So I'm going to copy this section box shadow, and I'm going to paste it here. I'm going to set this file. After set this file, you can see the result. So this is vertical scrollbar. Also, you can apply horizontal scrollbar. For that, we need to pass an image. So hero type mag dot source, and if I show you my current working directory, there is an image image dot JPG. I'm going to pass the file path, image dot JPG. I'm going to set this file. After set this file, here you can see the horizontal scroll bar, and both the scroll bar follow the same property. Now, if you notice, you can see at the corner, we have a space. To fill this corner area, it's also come with this positive element, which is scroll bar corner. For that, I'm going to duplicate this section and replace thumb with corner. And at the corner, I'm going to use only the background color. I don't need to use wer radius. Yes, you can if you want to use it. So type background, and I want background red color. If I set this file, you can see the result. Also, you can use gradient color if you want to use. So I hope now it's clear for you how we can style our scrollbar. For that, we need to use some Posido element selector, which is scrollbar, school word track, school word thumb, and scroll word corner. And if you want to play with the school width, yes, you can. If you want to reduce it something ten pixel, and then subs file, you can see the scrollbar. And it is applied the width property only the vertical school word. At the same, if you want to mention the height, then it's going to apply the horizontal school word. Now your scroll word designing and behavior control is in your hand. Utter mentioned this school bar width, then we need to provide scroll bar track where our school bar going to move, and then we need to create the thumb element. And at last, we can control the school bar corner. So I hope now it's clear for you how we can use these properties. So thanks for watching this video station for the next tutorial. 94. CSS Display Flow Root Tutorial: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn a new value. This value is related display property, which is flow root. In our previous tutorial, we already covered these values related display probity, but there is another value introduced in display property, which is flow root. Now, let's see where we can use this value. Suppose we have a deep element, and inside this deep element, we have another deep element. So this is our parent deep element, and this is our child deep element. So whenever we use float property to child element, then it create a issue. It not matter whatever value you use. It may be right or left. And the issue look like that. As you can see the parent deep close above the childiv element and the child and the childi element go outside to the parent deep. To resolve this issue, we already have two solution. Our first solution is we need to use overflow property in our overflow auto. But this solution is not work properly all the browser. Sometimes it do not work on Internet explorer. So this solution is not suggested. Without this, we have another solution, which is gear fix. To use clear fix, we need to use Aptar Positoselector. We need to use this pasito class in our parent. And then we need to use three CSS property, contain a blank content, then display property and tear property. Also, this solution is not perfect because here we need to type multiple lines. We need to take upra selector, we need to create, we need to take three properties, and we call this method car fix. And this is also not a permanent solution. But now CSS introduce permanent solution, which is called display flow root. So 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 if server extension, and I already create an estimate document named index dot HTML. So as you can see in our body tag, we have a parent Deep tag, and inside this parent Deep tag, we have a child Dip tag. And you can see the result in my browser. And also, I style these Deep elements. This is what paren Deep element. Here we set with 600 pixel, and then we set margin 55 50, and also we set two pixels solid border. Then in our child tag, we use 100 pixel and 100 pixel height. With that, its background color is red. And now I'm going to use float property at my child element. So HemotypeFloat, float, let. Up step this file, here you can see the issue. Now childp element move out from the parentib element. To resolve this problem, CSS introduce flow root value. So in our parentib element, I'm going to use this property. Display flow Root. And I'm going to set this file. After set this file, you can see the result. As you can see, now it resolve our protein. If I use float, right, and the set this file, you can see the result. Now it move our child element at right side. Also, it do not destroy our parents structure. I hope now it's Clearfo what is the usage of this value? If you use this value, we don't need to use overflow, otherwise, clearfake. So this is it for this tutorial. Thanks for watching this video Stun for the next tutorial. 95. What is CSS Grid Layout: Hello, guys. Welcome back. In this tutorial, I'm going to introduce you what is CSS grid and how it's work, why should we use CSS greed? The first eft is, it's a two dimensional grid system. It's new layout system. We call it two dimensional because we can handle rows and columns together. Our second benefit is grid layout replace float layout. We don't need to use float property anymore like Margin tier and we don't need to focus on float laid and float right. We can create layouts very easily. Our third benefit is it create our code very fast and clean because we don't need to focus on float properties and it increase code readability. Our fourth benefit is, we don't need to use any CSS framework like bootstrap, foundation, materialized CSS, et cetera B if you understand grid properly, then you don't need to use any framework. Because you can handle all the things with CSS grid. Let's try to understand how actually grid works. Suppose this is a deep and inside this deep, we have six different deeps and we call this structure grid system. Without using float and margin, we can provide gaps there and we can handle it together. We call this parent container is grid container. To create this grid container, we need to use CSS property in our parent deep which is display property, display grid. When we use a display property grid, it automatically assumes this parent container as a grid container. As you can see all the items on this dive, we call it grid items. Here you can see a individual leave, we call it grid cell here you can see some lines between these deep and we call it grid line. Here you can see four grid lines. These are all vertical lines. And here you can see a gap between these two cell, we call it gutter. Similarly, these lines are working vertically. As I told you, it's working two dimensional and we can handle it very easily, and it's work like table cells, row and columns. Here you can see, according to this structure, we have two grid row in our image, and here you can see in yellow borders, we call it grid columns. And here you can see a gap between rows and columns, and we called it grid area. In our upcoming videos, we are going to understand how we can create grids. In our upcoming video, I'm going to cover all the grid properties in this tutorial series. We are also going to learn how we can create a beautiful layout using these grid properties. Here you can see the browser's name which can support our grid system. Internet Explorer doesn't support grid system. Age supported, Firefox support it, Chrome support it, Safari support it, and also Opera support it. Most of the time we are work with Chrome Saffer and Firefox. Thanks for watching this video, stay tuned for our next Tutorial. 96. CSS Grid Building with Rows & Columns: Hello, guys. Good to see you back. In this tutorial, we are going to learn how we can create grits. We are going to start with two properties. Our first property is Greet tablet column, and our second property is Greet template Row. So let's start the practical and try to understand how it's work. Here you can see, I already create a ETMal document, and I open this TML document using Life server extension. And in our right side, you can see our web browser. So first, I'm going to create a De where I'm going to create a grid container. Dev and also, I'm going to assign a class to this deep class container. And inside this deep, I'm going to create six other deeps deep and I'm going to set as class, item, and item one. I'm going to duplicate this deep for five time. Here I use multiple classes, and I'm going to change the class's name. Item two, item three, item four, item five, and item six. Inside this deep, I'm going to type some text. First, second, third, fourth, fifth, and last one is sixth. If I set this file, here you can see all the tips, first, second, third, fourth, fifth and sixth. First, I'm going to set a background color to this container, dot, container, background, gray. I set this file, here you can see the result. Also, I'm going to assign wed to this container, with 700 pixel. As I'm going to provide margin to this container. Margin. For top, I'm going to use 50 pixel. For lift, I'm going to use zero. For bottom, I'm going to use zero, and for p, I'm going to use 50 pixel. If I set this file, here you can see the result. Now I'm going to provide different color for different items. So I'm to create a selector item one. Also I'm going to set a background to this item. If I save this file, you can see the result. Now I'm going to duplicate this item multiple time. For item two, I'm going to say orange color. For item three, I'm going to say green color. Or item four, I'm going to say yellow color. For item five, I'm going to say blue color, and for item six, I'm going to say purple color. If I set this file, you can see the results. Larry can see all the color in our deeps. Let's back to our parent D, which class is container. I'm going to use a property which is display and I'm going to use display grid. If I set this file, here you can see there is no changes because we do not create row and column to this grid. First, I'm going to create columns. I'm going to use greed template column. Here we can mention how many column we want. With that, we can mention column width. Suppose I want two columns, our first column is 200 pixel width and our second column is 250 pixel width. If I set this file, here we can see it's create our columns. Our first column take 200 pixel width and our second column take 250 pixel width. Here you can see in one row we create two columns. Suppose I want to change first column width, something 350 pixel. If I set this file, you can see the column width. Similarly, we can set height using another property. Let me show you. Great template rows. Here we can define how many rows we want. Here you can see, we have total three rows in our parent continuity. For our first row, I want to say 100 pixel height. If I set this file, here you can see the result. It's apply for our first row only, and for our second row, I want to set 200 pixel height, and for our third row, I want to set 100 pixel height. If I set the file, here we can see the result. If you notice, it doesn't effect our container width, which is 700 pixel. Not only that, we can add another column to this D. For this, first, I'm going to reduce the value of this first column, 150 pixel, and for our third column, I'm going to take 150 pixel once again, 150 pixel once again. If I set this file, here you can see the result. Now it creates three column, and here you can see for our first row, it set height of 100 pixel, and for our second row, it set height of 200 pixel, and there is no third row in this container. If we had third row in our container, it's going to set 100 pixel height. Let me show you. I'm going to duplicate this item once again. And if I set this file, sorry, we need to duplicate our deep, not the selector. If I duplicate this D and set this file, here you can see the result. Here you can see for our third row, it create 100 pixel height because we mentioned 100 pixel height for our third row. Here you can see a blank space, and now I want to fill this blank space with our third column. For these, we need to use a property, which is auto. If I set this file, here you can see it fill the area with our last column. I' going to fill all the remaining space with our third column. Suppose I want to change our second column with 100 pixel. If I set this file, you can see the result. If I use Auto for our second column width and if I use this Valu for our third column width, and if I set this file, you can see a result. Now you can see our first column take 150 pixel width and our last column take 100 pixel weight. And our blend space covered with second column because we use auto value for our second column. Let me show you one thing. If you use Firefox or Chrome browser, just press Ap 12. It's open Developer option in your browser. If you highlight the container dip here you can see a option named GET. As you can see the properties, display GED. As you can see a GED icon here. It's called GED Editor. If you click on it, here you can see a lot of options. For now, I don't going to extend it. I will extend all the things later, so I close it. But if I click on this grid option, here you can see some line and also you can see the line numbers and we call it grid lines. It's only possible if you use display grid property. Here you can see we use pixels, but we can use percentage also. Let me show you. Suppose I want to use two column. For first column, I want to use 40% and for our second column, I want to use 30%. If I set this file, here you can see the result. Our first column cover 40% area of our total With of container. And now I want to use third column for our third column, I'm going to use Auto Vin. If I set this file, you can see the result. Our first column take 40% or second column take 30%, and our third column also take 30% because our first and second column take 70%. If I -70% from 100%, the remaining value is 30%. That's why it take 30%. Not only that, we can use pixel with percentage. Suppose for our first column, I want to use 100 pixel. If I set this file, you can see the result. Our first column is 100 pixel and our second column take 30% of our container width and our third column cover the remaining space. Not only that, there is another unit which is Fer means fraction. Suppose I want two column of one Fer and another one is one FR. If I set this file, here you can see it our container deep. Our first column take first half and our second column take or second half. If I use another one Fer value and set this file, here you can see, it's create total three column and all the columns take similar width, similar width, it's equally divide the container width, which is 700. If I use two aer value for our third column and then set the file, here we can see our third column take two times space than our first column and second column. Here you can see we can control grids without using float. Next, I'm going to use another property which is grid gap. Let me show you. I'm going to use 15 pixel and if I set this file, here you can see it provide equal gap between rows and columns. If I click on this grid option, you can see it. Now you can see it clearly. In the next tutorial, I'm going to explain you clearly. There is another unit which can we use as a grid template column value, which is repeat. Let me show you. Repeat is basically a function. Suppose you want two column with equal width. In our first parameter, we need to pass how many column we want. In our case, two, and then you need to pass the width size, which is 150 pixel. If I set this file, here you can see the result. Here we need to type the width value multiple time. If we want four column, we need to type four here. If I set this file, here you can see the result. It creates four columns with same width. For now, I'm going to use two column. With that, I want to use one effort column. Yes, we can do it. Just type one FR. If I save this file, here you can see the result. First, it create two equal size with column and then it cover the remaining space with our third column. Similarly, we can use percentage value and pixel value here. Let me show you. Suppose I want 40% column. If I save this file, here you can see the result. Similarly, we can use our fraction unit in our rows. Not only that, we can use fraction unit for our rows. But before, I'm going to set a height to our parent container. Height 700 pixel. If I set this file, here you can see the result. Now I want two row with equal height. I'm going to use refit function, two row with one F or height. If I set this file, here you can see the result. Here you can see it's equally divide our rows. This value is only apply for two rows first and second. If I use three and then set the five, here you can see all the three rows are equally divided. Their height is equal. Similarly, we can use pixel value here. Suppose for our first row, I'm going to use 100 pixel. For our second row, I'm going to use 30%. For our third row, I'm going to use one For unit. If I set this file, here you can see the result. I hope now the concept is clear for you. These two properties are most important to create a grid structure. Our first property name is grid template column, and our second property name is grid template Row. In our next tutorial, we are going to understand what is grid gap. Thanks for watching this video stay tuned for our next tutorial. 97. CSS Grid Gap Tutorial: Good to see you guys. In this tutorial, we are going to learn a new property related CSS grid. Which is CSS grid gap? We have total three property related grid gap. Our first property is grid row gap, and our second property is grid column gap, and last one is grid gap. Let's try to understand how grid gap property work. Here you can see a gap between grid items, we call it grid gap. If it come with row wise, then we call it row gap. And if it come with column wise, then we call it column Gap. Let's start the practical and try to understand how it works. Here you can see side by side, I open my visual studio coitor and my browser using if server extension, and I already created TML document in my directory. Here you can see, we have total two grid columns with Oi for value and we have total three rows in our grid, 100 pixel, 150 pixel, and 100 pixel. Between these items, I want to put a gap. Maybe row voice, maybe column vie. First, I want to use Row Voice gap. I'm going to use a property grid row gap. And I want to assign ten pixel gap between these rows. Let me show you ten pixel. If I set this file, here you can see the result. Let's increase the value 30 pixel. Here you can see the gaps between rows. You can increase the gap size, how much you want. This is row gap. If you want to space between column wise, then you need to use read column Gap property. Let me show you. I'm going to type ed column gap. I'm going to use 20 pixel gap between columns. If I set this file, here you can see the result. Here you can see row gap is 30 pixel and column gap is 20 pixel. Not only that, we can use Stan property for these two properties. For these, we need to use read gap property. Let me show you gap. First, we need to pass row value and then we need to pass column value. For row, I'm going to use 20 pixel and for column, I'm going to use 30 pixel. If we use red gap property, we don't need to use this property anymore, so I'm going to remove it. If I set this file, here you can see the result. The distance between row is 20 pixel and the distance between column is 30 pixel. If I use equal value for row gap and column gap, 30 pixel for row and 30 pixel for column and set this file, here you can see the result. Now I want to show three column in our container. I'm going to type C, repeat column three. If I set this file, here you can see the result. Also you can see the similar gap between grid items, and here you can see a blank space because we use three different row size. If I remove this one, mean last one and set this file. Now you can see there is no gap. Our first row height is 100 pixel and our second row height is 150 pixel. I hope now it's clear for you what is Bit gap propriety. Thanks for watching this video, stay tuned for our next tutorial. 98. CSS Grid Items Positioning Tutorial: Once again, I'm back with a new tutorial related CSS grid. In this tutorial, we are going to learn CSS grid positioning. Let's try to understand what the grid items are and what is the meaning of grid item position. Here you can see a paren deep and we called it grid container. All the deep inside the paren container, we called it grid items. Now the question is, what is the meaning of positioning? Suppose you want to move Grid three item in fifth place, and also you decide to move Pip tans third place, something like that, and we called it great positioning. As you can see, we move the third item in fifth place. Similarly, we move the fifth item in third place. So related to this kind of alignment, we have some CSS properties. Let me show you. As you can see, we have to seven CSS properties like grid row start, grid row end, red row, grid column start, et cetera. At last, we have a short end property named grid area. So let's jump into the visual studio coordinator and try to understand how it works. Here you can see, I already create a TML document and I open my browser and my codator side by side. If I show you, here you can see, we have a parent container inside this parent container, we have total six deep. It's mean six grid items. As you can see, every grid item colored is different. At first, I'm going to move the first grid item into the sixth place. And similarly, I'm going to move the six grid item into the first place. As you can see, we already create our selectors. Item one item two, item three. As I told you earlier in this tutorial series, we have a browser option in our console, which is grid lines. Let me show you. Just select your browser and praise Ep 12 mean debloper mode. I'm going to open this panel, bottom of my browser. I'm going to press this option. Here you can see a option in my pen container, which is grid. If I click on it, here you can see some lines. Now you can see grid line numbers. You can see it row wise. Also, you can see it column wise. In this tutorial, we are going to understand what is the use case of these lines. Let's jump into our first item selector, which is item one. As I told you, I'm going to move this first item in six position. At first, I'm going to use a property which is great row start. At first, we need to move this grade item in second row. As you can see, this is our second row. I'm going to type two here. If I set this file, now you can see our first grade item move into the second row and also we need to declare the position. For this, we need to use another CSS property, which is grid row N. Once again, if I show you my grid lines, here you can see, our end position is three. That's why we need to pass three. If you robot use grid row property, maybe it creates some trouble when you responsive your web side. If I set this file, here you can see, there is no changes, but it is good manner to use this property. And now we need to work with columns. As you can see, we need to move this grid item, third position. For this, I'm going to use another CSS property, grid columns stir. Here, I'm going to set three. If I set this file, you can see the result. We successfully move our first read item in sixth place. Also we need to declare the position of this column. Read column A. As you can see, our row end in fourth position, so you need to pass four. If I set this file, here you can see there is no changes. It's not mandatory, but for responsive purpose, it's very important. And now I want to move this fourth item in first position. For that, I'm going to copy this code, and I'm going to jump into our fourth item selected and I'm going to pass the code. So our starting row is first, so I'm going to type one and our ending row is two. Similarly, as you can see, our columns start with one and end with two, Sumo type, columns start, one, and column end two. If I set this file, here you can see the result. We successfully move our fourth container in first place. But the important thing is, we do not change our timus structure. Here you can see our extremist structure. Using CSS grid properties, we can change their positions without changing their actual structure. Now I'm going to show you shortened method all of these properties. Now I want to move the fifth item in first place. So I jump into the fifth item selector, and then I'm going to use a different CSS grid property. If you want to create shorthand for row, then you need to use grid row property. Let me show you grade row. First, we need to provide this starting row position, which is one, and then you need to use slash then we need to provide ending row position, which is two. Similarly, we have shorthand property for column, which is grid column. Let me show you. Our columns start with line number one and end with line number two. If I set this file, here you can see, we successfully move our fifth grad item in first place. But what about fourth breed item? We do not remove fourth breed item from this container. It still exists in the first place. Just item five, overlap the fourth one. That's why we cannot see the fourth one. Not only that, we have another shorthand of this property. Using this shorthand, we can pass port value at once, which is grid area. Let me show you. Suppose I want to move the sixth item in second place. For these, we need to provide row starting point and column starting point. Our row starting point is one and our column starting point is two, and then we need to provide row endpoint and column endpoint. Our row endpoint is two and our column endpoint is three. If I set this file, here you can see we successfully move our six container in second place. Just we need to use one CSS grid property, which is grid area. Just you need to remember, first, you need to provide row starting point and then you need to provide column starting point. Next, you need to provide row ending point and you need to provide column ending point. I hope now it's clear for you how row columns are work. There are a lot of methods we can position our grids. In my upcoming videos, I'm going to teach you all of them. In our next tutorial, we are going to learn how can we span our grid items? Suppose you want to span your third item with I just want to fill this blank area with this third item. Means it's going to take two column width. I recall this method, span. Stay tuned for our next tutorial. Thanks for watching this video. See you soon. 99. CSS Grid Items Spanning Tutorial: Good to see you guys. Once again, I'm back with a new tutorial related CSS grid. In this tutorial, we are going to learn CSS grid item, spanning. But before start the practice up, we need to understand what is the meaning of span. Let's simplify it. Here you can see a grid container, and inside this grid container, we have to six items. If you notice, you can see every D item with the same, and now I want to extend d1w. I want to extend item number one up to two item. Similarly, I want to extend item two rows, something like this. For item one, we use column span, and for item two, we use rowspan and other items automatically arranged at his own place. Let's start the practical and try to understand how it's work. Here you can see side by side, I open my visual studio coreor and my browser using light server extension. As you can see, we have total six grid item in our patent container and we arrange it serial. Let's start on the grid lines. I'm going to praise Atwel. And if I click on this option, you can see the grid lines. And now I want to spend our first item, column wise, I want to extend this column up to line number three. I'm going to type Bad column d three. You already know that item one is our first item. If I set this file, here you can see the result. Successfully span our first grid item, column one. If you notice you can see all the grid items automatically change their places. You can see that item number six has came down and we do not specify any height to our third row. That's why it looks small. Now I'm going to specify height for this third row, 100 pixel. If I set this file, now you can see the result. Our first row height is 150 pixel and our second row height is 150 pixel, but our third row height is 100 pixel. Once again, I'm going to turn on my grid lines. And now I want to extend our second item row wise, and I want to extend it from this point to this point. Means four. For this, we need to work with these two properties. I'm going to copy these properties and paste it here. I'm going to change grade row end point, which is four. If I set this file, here you can see the result. Now it's look like a web page. This is our header, and this is our side bar. Not only that, we can use shorthand property for this. Let me show you read row. If I comment out this to property, and if I type 14, and if I set this file, here you can see the same result. There is no changes. I hope now it's clear for you how spellings are worn. Let me show you one thing. Here you can see, we have to tell three column with one e or value. For this example, I'm going to comment down this property. Once again, I'm going to turn on the grid lines. Here you can see, we have to tell four column line in our structure. But what happened if we pass five value here, if I set this file, here you can see it extend our column with default value. Now we have total four column in our container. But here you can see, we do not declare four column, we just declare only three column. We can extend our grid item beyond the container. Then it automatically arrags the grid item according to the fraction value. But this is not the good practice, so I'm going to use four. If I set this one, you can see the result. Now I'm going to fix the third item in his absolute position. For this, inside the item three selector, I'm going to type grit Row. And also I'm going to turn on the grid lines. Our third item start from row number two and end up to row number three, our next property is grid column. And also you start from column number two and end at column number three. If I set this file, you can see there is no changes. This is the absolute position of third item. Now I cannot move this grid from this space, and now I want to extend second column width up to line number three. For this, I'm going to use grid column property. And our column start from line number one and end at line number three. If I set this file, you can see a different result because we already placed our third dip in that position, so our second grid item cannot take its place. Then it automatically shrink down. But if you notice, you can see we use only grid column property. We do not use grid row property. If I use grid row property, let me show you. Row and try to move this item in this place. Let me show you. But first, I'm going to turn on the red line. Our row start from line number two and end up to line number three. If I set this file, now you can see a different result. Now it's overlap each other. If you want to see the S item completely, then you need to use Z index probity. Let me show you. I'm going to type the probity name Z index. By default, it's come with zero. Sum root type one. If I set this file, now you can see the second item with completely. Our third item still exists behind this second item. Now I'm going to show you the different value that we use for spanning, which is span. Let me show you. Sum roo type, span, and I want to span our first item up to four column span, space, four. If I set this file, sorry, we don't have four column in our container. That's why it extends out column and create a new grid line. For that, we need to use span three. If I set this file, now we back to our old result. If I show you the grid lines, here you can see we have total four lines. This value work with grid item numbers and this work with grid line numbers. This is the main difference between two values. As we can span it row wise. Let me show you. Span two. If I set this file, now we span our first container, row is also column vois. Because we use index property for our second item, that's why our first item, do not cover the second item. I know it's little complicated, but I'm trying to explain it very simple. Not only that, we can use this value with this different value. Let me show you span two. If I set this file, here you can see the result. For now, I don't need it, I'm going to undo it. And also I want to change the grid draw end value. Two. Once again, I'm going to turn on the grid lines. Suppose we have a lot of columns in our container, and I want to extend the red grid item from beginning to end of this container. But I don't know how much column line we have. For these, we can use minus points. Here you can see a line number minus one. Remember, our last line number always start with minus one. So we can use the minus vo here. Let me show you. If I type minus one and set this file, here you can see there is no changes. I hope now it's clear for you how spannings are w. So thanks for watching this video. Stay tuned for our next tutorial. 100. CSS Grid Lines Naming Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn CSS grid line naming. In our previous tutorial, we use grid lines to spin our grid items. But in this tutorial, we are going to learn how can we assign line name, and how can we use the line name as value? Let me simplify it. This is our header item, and this is our sidebar item. To create this sidebar item, we need to use gdrawPperty and grid column property. In redraw property, first, we need to pass line starting point and then we need to pass line ending point. But in this tutorial, we don't going to use line numbers. We are going to create our own value name. As you can see, for starting point, I use sidebard start and for end point, I use sideburdN. Let's start the practical and see how it's worked. Here you can see, side by side, I open my user studio Creator and my browser using Lip server extension. I already create a stimal document for this example here you can see a web layout, which I create using grids. Here you can see a header, a maneuver for different boxes, and a sidebar and lust a footer, here you can see the container and all the DV inside this container. I create this layout using spanning. Let's jump into the container deep selector. Here you can see, we have total three grid column with one A for value. As you can see, we have total five row with different sizes. For header, I use 150 pixel height. For maneuver, I use 50 pixel height, and for our third row, once again, I use 150 pixel height. And for footer, once again, I use 50 pixel height. And here you can see, I span my header from beginning to end from one to minus one, and here you can see, we use gridline value for that. I'm going to turn on my grid lines using developer mode. And you can see the line numbers. This is not a very complex template, but sometime we need to face difficult templates or a very complex template. In that case, it's very difficult to remember these numbers and it can create very big problems. So to resolve this problem, we assign a name to these lines and we call this process grid line naming. So let's see how it's worked. First, I'm going to start with rows, and we need to assign these line names with these values. So for grid line number one, I'm going to use a name which is header start. Let me show you. First, I'm going to use square sis. Instead the square sis, I'm going to assign a name for our first line, header start. Just you need to remember you cannot provide pace between two orbs. And I'm going to turn on Word wrap. Otherwise, you cannot see my lines. You can use hyphens, underscore, or any other character. If I start this header, also, we need to end this header, and I want to end this header in row number two. I want to use square *** once again and instead the square ***, I'm going to type header end, header end. If I set this file, here you can see there is no changes. Now I'm going to show you how can we use these names in our value. In our gredro property, I'm going to type header start because this is our starting point. And for our endpoint, I'm going to use header end value. If I save this file, here you can see, there is no changes. So our names are worked properly. Let's jump into the menu section. Let's create a starting point for Menu. For this, we don't need to use another square basis. Just want to use a space between header end and Menu start point. For Menu start point, I'm going to use Manurt. I'm going to use Menu start name. Start to end this menu after 50 pixel, I'm going to use menu end name Menu end. I'm going to use these names in our Bedro properties. Let me show you. I'm going to copy the menu start name, and I'm going to repress two with this name. For our menu end value, I'm going to use menu end name. If I set this file, here you can see there is no changes. It's work very perfectly. Similarity, you can take names for all the rows. These line naming method are very helpful when we work with complex layouts. Now I'm going to name our columns. Here you can see we have to three columns. But if you notice you can see, we use repeat value here, and I use one effort value for three columns. How can we assign name for repeat values? There is two method you can assign name for your columns. Either you type one effort three time and every time you use these brackets. Otherwise, we can assign name with this repeat value. Let me show you. Before one for value, I'm going to use a name, which is call start. And after one effort value, I'm going to type call end. You can type any name as you want, but there is a problem. It's going to use call Start and called three time. First, it's going to use Call Start here, and then it's going to use call end here. Once again, it's going to use Call Start here and then it going to use Call end here and keep going on. How can we use it properly? For this, first, we need to type call Start. And then we need to assign from where our columns start. Our columns start from one smartype one. For endpoint, I'm going to use call end Call. Because I span up to three column, so I'm going to use three hair. You don't need to notice line number here, you need to notice how many column you want to use. If I set this file, here you can see there is no changes. So there is no problem. It's worked perfectly. Now I want to span our header up to two column. I want to use two hair. If I set this file, you can see the result. It used two column value for header item. I want to back to my old position, some to use three. We can use the same value for our menu columns. Let me show you some to copy the value and I'm going to replace with this one. Because our menu item takes a amount of column area, that's why we can use this value. If I save this file, you can see there is no changes. In that way, you can assign any name for your lines and you can use it multiple times. I hope the concept of gridline names is clear for you. Thanks for watching this video, stay tuned for our next tutorial. 101. CSS Grid Area Naming Tutorial: Good to see you back, guys. Once again, I'm back with a new tutorial related CSS Grid. Inglish tutorial, we are going to learn CSS grid area, name. In our previous tutorial, we learn about grid line naming. But in this tutorial, we are going to learn grid area naming. We use this method to position our grid items. Let's see what type of properties we have that we can use for positioning. Our first property is grid template areas and our second property is grid area. Let's start the practical and try to understand how its work. Here you can see in our previous tutorial, we create a basic layout using grid properties and here we assign names for grid lines. And using these names, we position our item and span our items. Now I'm going to create the same template without using grid row property and grid column property. We don't need to use line names for that. Here you can see, I have another table file, grid area at, and I'm going to use this template. At first, we divide this grid into a three column with one F for Value and we already have fibrous for header for menu, for boxes, and for footer. Now I'm going to assign a different name for every grid item. For this, I'm going to use grid area property. Inside this grid area, you can take any name. I'm going to use same name for that, which is header. And we don't need to use inverted codes for that. Similarly, I'm going to use the same property for every grade item. For Menu, I'm going to use the same name, Menu for box, I'm going to use box one. For box two, I'm going to use box two. For box three, I'm going to use box three. Similarly, for box four, I'm going to use box four. For sidebar, I'm going to use the same name, which is sidebar for Footer, I'm going to use Footer. If I set this file, here you can see everything is disappeared. Because we do not use any positioning, that's why items are gone. In our paren deep, I'm going to use a new property. Let me show you and our property name is great template areas, great template areas. Inside the grid template areas, I'm going to use double codes. Let me show you one thing. I'm going back to my old file. Here you can see my previous layout. If I press Aptl and turn on grid lines, here you can see we have put out three column in our structure and our header section use three column for that. So I'm back to my new layout and here I'm going to use this header name three time. Let me show you. So to copy the name, and I'm going to paste it here. Header, header, and header. For three column, I use this name for three time. If I set this file, here you can see the result. But if you notice, it leaves a blank pace because it expects six row in our grid structure, and here we just use one row. Once again, if I show you my old layout, here you can see our menu also use three columns. So inside the double codes, I'm going to use Menu name for three time. If I set this file and show you my layout, here you can see the result. Once again, I'm back to my old layout. Here you can see in our first column, we use box one. In our second column, we use box two, and in our third column, we use sidebar. I'm going to duplicate this line, and for our first column, I'm going to use box one name. For our second column, I'm going to use box two name. For our third column, I'm going to use Sidebar Name. We use these column names for our third row, once again, I'm going to dug this line. Here you can see our fourth row, start with box three, then come box four, and then come sidebar once again. I'm going to type box three, box four, and then come sidebar. In our last row, here you can see, we use three column for our footer. I'm going to use this footer name three time if Dov TER footer, footer, and footer. And semicolon to end this line. If I set this file and show you my layout, here you can see we successfully create our old layout without using grid row and grid column property. This is the second method that we can using to position our grid items. Just we need to use two properties for that. Our first property is grid area and our second property is grid tablet areas. So this kind of positioning technique is very useful for small projects. If your layout is not complex, then you can use this process. But if your project is more complex and big, I don't recommend to use this process. If you notice, here you can see, we use three column names for every row. If I remove one of the column name, any of the row, so I'm going to remove menu. And if I set this file, here you can see everything is gone. Because we use three column, that's why we need to pass three column name. If I set this file, once again, here you can see, now it's look perfect. And now, suppose you want to use two column for menu section. In that case, you need to pass dot here. If I set this file, now it's work. If you want to use menu item only in second column, in that case, you need to pass another dot before the menu dot menu dot. If I set this file, you can see the result. We can align our grid item and we can position our grid item just using dots. But you cannot use this dot middle of this two column. Let me show you. If I remove header from this place and use a dot and set this file, it can restroy your layout. Once again, I'm going to repeat this process how it works. At first, you need to use a property name greed area for every greed item, and then you need to assign a name. You can use any name for that. Then inside the parent container selector, you need to use a property which is grid template areas. Then you need to remember how many column you assign to this grid structure. According to my layout, here you can see, I use three column. So in every row, we need to pass three Valu and here you can see, we span our sidebar row is also. That's why I use this sidebar name in row number three and row number four. I hope now you understand what is grid area naming. Thanks for watching this video and stay tuned for our next tutorial. 102. CSS Grid MinMax function Tutorial: Hey, good to see you back. Once again, I'm back with a new tutorial related CSS greet. In this tutorial, we are way to learn CSS Greet MinMax function. Using this function, we can dynamically change rows and columns height. Let's start it. In this tutorial, we are going to learn two other values without Min Max. First one is max content, and second one is Min content. Let's see how we can change heighten width dynamically. Here you can see side by side, I open my visual studio coater and my browser using lip server extension. And I already create a TML document. As you can see, inside my patent container, we have eight different grid sales and we declare Ford column for our grid sales with one FR values. We also have two rows with 175 pixel height. Let's start the practical. Let's start the practical. As you can see in my first grid item, there is a text, name first. I'm going to insert more text inside this grid item. Luum 20. It's going to add 20 word inside this grid item. If I set this file, here you can see the result. Let me reduce some words and then I'm going to set this file. Here you can see it breakdowns our lines according to OID this grid item. But what happened if I use Max content value for our first column, let's use it. I'm going to use Max content value for our first column. If I set this file, you can see the result. Here you can see there is no line break for this paragraph and also overflow from the container with size. If we use this value, it would not going to break our lines. It's going to print all the paragraph in one line. It's not a very useful things for our real projects. I'm going to reduce some word from this paragraph. And then I'm going to save this file. Let's reduce some more words. Now it's look perfect. Now I'm going to add some more text in our fourth content, Lum, ten, and I'm going to save this file. Then I'm going to use our next Value for this column, which is Mint content. If I set this file, here you can see the result. It dynamically change the eight according to the biggest word of this sentence. As I'm going to add more text in this item. Let's add more text. Dam eight. If I set this file, here you can see, our text overlay the grid item. To solve this problem, we can add minimum content value in our row. Let me show you. I'm going to remove 170 pixel value and here I'm going to type Mint content value. If I set this file, now you can see it said the grade item height, according to the text area. Suppose I want to add 50 watt paragraph in our seventh item. I'm going to jump into the seventh item and I'm going to type Lorem 50. If I set this file, here you can see, here you can see, according to the text size, it's change height and width. It's going to consume minimum height and minimum weight according to this text. That's why this value name is main content. And now I want to fix the minimum height of our row. I'm going to remove some word from this text. Then I'm going to set this file. Now I'm going to use MinMax function to set a fixed height. Let me show you. I'm going to use Min Max function here. Min Max. Inside this parenthesis, and here we need to pass the two value for minimum size of pro and for maximum size of pro. Suppose our minimum row height is 175 pixel and for maximum, I'm going to use main content property. Because I want to change the height according to this content size, if our content take more than 170 pixel height. If I set this file, here you can see by default, our row come with 170 pixel height. But as you can see in our first row, it takes more than 170 pixel height because it contains size take more than 170 pixel for our maximum value, we use main content. That's why it can take as much height it want. Min Max function is very useful for our rows. Here we say minimum value for our item height. But if our content take more height, then we can use main content value as maximum value. But what happened if I say 200 pixel maximum height, let me show you. If I set this file, here you can see, by default, our second row take 175 pixel height, but our first row extend up to 200 pixel and then our content overflow from this item. That's why we refer to use main content as max size. Main content. Now it can hold the all content in our row and now I'm going to use MinMax function as a column value. Let's use it. For our first column, I'm going to use the MinMax function. I'm going to set a minimum width of this column, which is 150 pixel. Also, I'm going to take 200 pixel for max width. And here you can see we already set maximum container width, which is 700 pixel. But I'm going to use percentage value in this place, 80%, and it's going to make our web page more responsive. If I set this file, here you can see the result. Let's add more content to our first column. Lorom six. Here you can see our first column take maximum width of 200 pixel. If I increase the maximum width size, 300 pixel and then set this file, now you can see the changes. By default, it's going to take 150 pixel width, and it can extend up to 300 pixel. After that, it's going to break down our lines. Now I'm going to use 200 pixel for our minimum width. If I turn on my developer option and I select this content, here you can see the maximum width of this content is 300 pixel. If I try to make it responsive, and then I select this item, here you can see the minimum width of this item is 200 pixel because we already set a minimum size to this column. Similarly, if we scale up our window, let me show you. And then select this item, you can see it cannot extend with more than 300 pixel. I hope now it's little clear for you how it works. If I use percentage value in our maximum size, let me show you. 60%. Then set this file. Now you can see a different result. It's going to take 60% width of this container. Here we can use percentage value, air value, pixel value, et cetera. But if I reduce the browser size and then it's going to stop at 200 pixel width, we cannot scale down our first column more than 200 pixel. I hope now it's clear how main Value and Max value are worked. Thanks for watching this video and stay tuned for our next tutorial. 103. CSS Grid Implicit & Explicit Grid Tutorial: Good to see you guys. Once again, I'm back with a new tutorial and in this tutorial, we are going to learn implicit grid and explicit greed. Let's see what is that. Here you can see side by side, I open my visual studio coheor and my browser using ipserEtension. As you can see in my parent container, we have total eight grid cells. At first, I'm going to set with height. At first, I'm going to use grid template column value, read template columns, and I'm going to create two column with one effer value. For these, I'm going to use repeat value. Repeat two column with one e or value. If I set this file, you can see the result. Also I'm going to say row height. For this, I'm going to use Crete temperate root property. But I'm going to say three rows height from this four row. I'm going to use repeat value once again, repeat three row comma 100 pixel value. If I set this file, you can see the result. Also, I'm going to provide gap between these cells. So to type, read, gap property. 20 pixel. If I set this file, you can see the result. So here you can see, we just defined two column size and three row size. But we have to tell eight cell in this structure. We do not style our seventh grid item and eight grid item. Suppose we dynamically extract the data from the server, and I want to show this data in our seventh and eighth column. For these, we need to set height, but we already define height using grid template rows probity. So what are these columns? How can we set height to these columns? Let me show you something. If I praise Eptel and show you my developer toolbar and click on this grid icon, here you can see some grid lines. As you can see, we style three row and two columns, and we call this structure explicit grit, because we explicitly defined this area using these two property. And this one that we not defined, and we called it implicit greed. So to style this implicit grid, we have some new properties. Let's see it. Here you can see, we have total three property related implicit grid. Our first one is grid auto rows, our second one is grid auto columns, and our last one is grid auto flows. Let's start the practical and try to understand how its work. After grid gap, I'm going to use our new property, which is grid autoros So type, grit auto robes. Here we can define our implicit grid row height. For our implicit item, I'm going to define 50 pixel height. If I set this file, now you can see now the implicit grade item height is 50 pixel. If we add more cell to this container, let me show you someone who duplicate this line two time and set this file. Now you can see it automatically set 50 pixel height for these grid items. For now, I'm going to delete these columns. I don't need it and set this file. Here you can see when we add a new cell, it's going to add row is. But now I want to add new cell column wise. For that, we need to use another value, which is grid auto flow, so type, grid, auto flow. It's come with two types of value, row and column. By default, is work with row. But here I'm going to use column. If I say this file, now you can see the result because we already defined three row in our explicit grid, then after three row it going to add all the sales item column wise. Here you can see we do not define any column size to this grid item. It's take with according to this text size, and now I want to assign we to our implicit grid. For that, we need to use a property which is grid auto columns. And here I'm going to provide 0.5 e or value for our implicit grid. If I set this file, here you can see the result. Our explicit grid columns take one e or value and our implicit grid column take half e or value. If I add some more column to this container, let me show you then set this file. Now you can see, it's also take 0.5 e or value according to this grid item. This is our implicit grid and explicit grid. I hope now it's clear for you, thanks for watching this video. Stay tuned for our next Tutorial. 104. CSS Grid Items Alignment Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn CSS grid item alignment. In our previous video, we'll learn about how can we create layouts using CSS grid items and how we can position these items. But in this tutorial, we are going to learn about horizontal alignment and vertical alignment. We have total six property related CSS grid alignment. Align item, justify item, place item, align self, justify self and place self. Let's start the practical and try to understand how its work. Here you can see side by side, I open my visual strew codeor and my browser using life server extension, and I already created TML document name index dot TML. Here you can see we have total ten grid items. Our first six grid items are explicit grid item, and our last four grid items are implicit grid items. Here you can see our explicit grid item height is 100 pixel and our implicit grid item it is 50 pixel. Now I want to spend my fifth grid item, and I want to spend it row wise. For that, I'm going to jump into the item fifth selector, and here I'm going to use a CSS property which is grito. Here I'm going to spend this item up to two row, some to type, span, and then I'm going to pass two. If I set this file, you can see the result. And here you can see our tenth grid item and I want to spend this read item column wise. I'm going to jump into the item ten selector, and here I'm going to use a CSS property, which is grid column. I'm going to type grid column. I want to span it up to two column. If I set this file, you can see the result. Here we spend our item, row wise, and here we spin our item column wise. Let's start the alignment. First, I'm going to cover vertical align. For that, we need to use align item and align self property. These properties came with four values. Let me show you. First one is start, end, center, and stretch. If I use start value, it's going to place our content, start of this container means in that place. If we use value, it's going to place our content in that place. If we use center, it's going to place our content, center of this grid item, and stretch is our default value. Once again, I'm back to my visual studio codator now I'm going to jump into the parent container. So first, I'm going to use a CSS value, which is align items, sound type align items. I'm going to use our first value and our first value is center. If I save this file, here you can see it align our content center. And this is our vertical alignment process. If I show you my grid lines, here you can see it clearly. As you can see, this is our grid item, and this is the content inside this grid item. As you can see, it press our content middle of this item because we use align items center. But what happened to our fifth item? According to this line, it align our content end of this grid item, but it is not. Because we span our fifth grid item, that's why it used two items, and according to item, it center the content. Also you can see the same alignment for our implicit grid items. Now I'm going to use end value, SotEND. If I set this file, now you can see the alignment. Here you can see it align our content, end of this item. Similarly, if I use start value, let me show you. And then set this file, you can see the alignment. Here you can see it align our content, start of this item, and our last align item value is stretch. Let me show you. If I use this value and set this file, it's a default alignment positioning. It's not very important one. It's a default value. For now, I'm going to use center Value. And now I'm going to talk about aligned self. What is align self? Here you can see all the item content are aligned center, and now I decide to align our third grade item differently. I want to say, I want to use Align end value for this third item. I'm going to jump into the third item selector. And for this kind of alignment, we need to use align self property, Sumtyp align self. And here I'm going to use end value. If I set this file, you can see the result. If I turn on my grid lines, here you can see all the contents are aligned in center, but our third grid item align at end. We can use this property only in individual cell, not for the whole container. So now it's clear for you if we want to apply alignment, all these items for that, we need to use align item property. And if we want to apply in individual items, for that, we need to use aligned cell property. Now I'm going to talk about horizontal alignment. For horizontal alignment, we need to use two property, justify IM and justify self. It's similar to our previous one, and we need to use same value for that, start center, and stretch. Let's start the practical. Once again, I'm back to my visual studio coreator and I'm going to jump into the parent container. Now I want to align our content horizontally center. For that, we need to use a property, which is justify IM. And our value is center. If I set this file, here you can see the result. If I turn on my grid lines, you can see it clearly. It horizontally centered our content. Similarly, if I use different value, and then set this file, now you can see the result. Now you can see the end of this grid item. Similarly, we have another value, which is start. If I set this file, you know the result. It horizontally align out content start of this let item. If you want to move your content, lift side, then you need to use start, if you want to move your content, right side, then you need to use end. As you know, stress is our default value, so I don't going to explain it here. Now I'm going to talk about justify self propriety. Suppose you horizontally centered your first item. For that, we need to use justify el property. Let me show you. Here I'm going to use Justify el property. I'm going to use center value. If I set this file, you can see the result. If I turn on my grid lines, you can see it clearly. If you need to align your content individually, you can use justified cell property. Similarly, you have total three value for that, center, start and end. Now I want to talk about two new properties, place item and place el. Place item is a short end up, align item and justify item. If you want to use this value in one line, then you can use it. In this property, first, you need to pass align item value, and then you need to pass justify item value between them, you need to provide a space. Similarly, we have place cell property. This is for individual grid items. First, you need to pass align cell value and then you need to pass justify elf value. Let's see the practical how its work. Once again, I'm back to a visual studio creator. For now, I'm going to comment out this two line. First I'm going to use place item property. I'm going to type place items. As you know, first we need to pass align item value and then you need to pass justify items value. Our first value is center. And our second hilo is Sir and now I'm going to set this file. If I set this file, here you can see the same result. There is no changes. You can use this value this way or that way. It's totally on you. Next, let's see how place cell value is work. As you know, it's work indivisually. In our item two, I'm going to use this property. Place self. First, we need to pass aligned cell value and then we need to pass justified cell value. I want to provide center. Our justified cell value is also center. If I set this file, you can see the result. It's center our content horizontally and vertically. So I hope now it's clear for you how place self and place items are work. So thanks for watching this video. Stay tuned for our next Tutorial. 105. CSS Grid Tracks Alignment Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn about CSS grid track alignment. To alignment our track, we have to to three property, align content, justify content, and place content, and plus content property is a shortened version of align content and justify content property. Let's try to understand what is grid item track. Here you can see, side by side, I open my Visual Studio ordator and my browser using if server extension. I already create a TML document named index dot TML. Here I'm going to use the same grid structure which I use in my previous tutorial. Here you can see total ten grid items. As you can see, we spend our fifth grid item row wise, we also spend our ten grid item, column wise. At first, I'm going to reduce the column width. Let me show you. I'm going to reduce one effer value and I'm going to type 150 pixel. If I set this file, you can see the alignment. As I'm going to increase the container height. So I'm going to use height property. Height, 750 pixel. If I set this file, you can see this space. Now I'm going to show you how can we use align content and justify content. But first, we need to understand what is justified content. We use justify content for horizontal alignment, and we have total seven value related justify content, start, end, center, stretch, space around space between and space evenly. Our last three values are used for content property. Let me show you how it's worked. So once again, I'm back to my Wiser Studio code editor. At first, I'm going to turn on my grid lines, so I'm going to praise Eptel then I click Grids here you can see the grid lines. Now I'm going to use the ified content value. At first, I'm going to use center value. If I set this file, you can see the result. Here you can see all the grid items together move to the center of this container. Using justify item property, we can center our content inside these items. Using justified content property, we can align our grid items inside the container. Using justified content, we can move the whole track. Similarly, we have another value, which is end. If I said this file, you can see the result. Horizontally, it move our grid items end of this container, and start is our default value. Let me show you. If I set this file, you can see the result. Now I'm going to talk about our three new values. Our first value is space between. I'm going to type space between here. If I set this file, you can see the result. If we use space between Value, then you're going to provide the remaining space between our grid items. As you can see, it split our grid items end to end. But if you have three column, let me show you. So I'm going to pass three here. And then set this file, here you can see the result. As you can see, it put our second column center, and it split our blank space two part. And for now, I'm going to use two column. Our next value is space around. Let me show you. If I set this file, here you can see the result. If we use this value, as you can see, first, it provides a space, then our grade item, and then you can see the similar size of space to time. Then once again, our column and a blind space. You can see the equal space left and right. As you can see the same amount of space after first column. Similarly, you can see this space before the second column. You can see the more space in center, and our next value is space evenly, sum to t space evenly. If I set this file, here you can see it's pretty similar to space around value, but there is a basic difference. The main difference is you can see the same amount of space between our great items. If this space size is one effort, you can see the same amount of space before and after the column. So this is our justified content property. We basically use it for horizontal alignment, and this property work with grid tricks. Let's talk about aligned content value. We use aligned content property for vertical alignment. And as you can see, there are seven value for this property. Start, end, center, stretch, space around space between and space evenly. We already know about this four value. But in this tutorial, we're going to learn space around space between and space evenly. Let's back to the practical. Here you can see our grid container height is 750 pixel. So I'm going to type this property name, which is Align content. And our first value is center. If I set this file, here you can see the result. If I turn up my developer mode, now you can see it clearly. As you can see it vertically centered our content. Similarly, if I use end value and then set the file, now you can see it put our grid structure end of this content. As you know, start is our default value. But now I'm going to use a value name space between, so to type space between. If I set this file, here you can see the result. Here you can see it put our first grade item and our last grid item into end here you can see the spaces between all the grid items. This is the use case of space between value. Let's jump into the next value, which is space around. So to type space around. If I set this file, now you can see the result. This value going to provide the space, top of the content and bottom of the content. Suppose it provide ten pixel pase top of this grid item, and it also going to provide ten pixels pase bottom of this item, and thence come read gap area. Once again, top of this third item, it provides ten pixel pase. In that way, it's over our last value is space evenly. So to type space evenly. So if I set this file, here you can see it provide same amount of space, top and bottom of this item. This is the use case of these values. Let me show you one thing. Here you can see, we span our column 102 time. I'm going to remove the greet column property from item ten. And now I'm going to spend the items. So I'm going to preste it here. If I set this file, here you can see a gap. Here you can see a unfilled space. If you are working with complex grid structure, sometimes these problems are awkward. If you want to solve this problem, we have another property, which is grid auto flow. Let me show you. So type, grid, auto flow. As you know, we have to turn two types of flow, row Voice and column Vise. I'm going to use row vie. If I set this file, here you can see there is no changes. But if I use another value with this, let me show you. I'm going to use a new value which is dense. If I set this file, here you can see it put our eight grid item in the blank space. If I use this value, then it's not going to unfill the blank space. I hope now it's clear for you what is grid tracking. Please stay tuned for our next tutorial. Thanks for watching this video. 106. CSS Grid Auto Fill & Auto Fit Tutorial: Hello, guys, good to see you back. In this tutorial, we are going to learn auto field and autofit properety. Using these properties, we can control grid width. Let's start the practical and see how it works. Here you can see side by side, I open my visual studio coordinator and my browser using web server extension, and I already created a TML document. Here you can see a container and inside the container, we have total four grid item. As you can see, our container with is 700 pixel and we use distal grid property. And now I'm going to say it with the height to these items. For now, I want to use two column with one eher value. So I'm going to use grid template column property, and I'm going to use repeat value, repeat two with one eer value. If I set this file, you can see the result. And also, I'm going to provide height to our row. I'm going to use grid template column row property. And once again, I'm going to use repeat value. Two rows with 150 pixel height. If I set this file, you can see the result. Suppose I don't want to use fraction value. I'm going to type 100 pixel. If I set this file, now you can see the result. Now our column with 100 pixel. With that, I want to show three column in our row. If I set this file, you can see the result. Now I want to adjust our fourth grid item in this place. For these, we need to use two values, autofil and autofit. Let me show you. In this place, I'm going to type autofill. If I set this file, you can see the result. It automatically set our fourth gig item up to the third gig item. Similarly, if I use the autofit value, let me show you and set this file. Here you can see there is no changes. But there is a basic difference. If I use autofil value, it's going to create extra track. Let me show you. So I'm going to type auto fill once again. And if I turn on my Developer toolbar and click on this grid icon, here you can see there is a space for three grid items because our container with this 700 pixel and we set our grid item with 100 pixel. That's why we have a space for three grid items. But if I use autofit Value, let me show you and then set this file, and then run on my grid lines, here you can see it do not create extra track lines. It creates the track according to the grid items. Suppose I want to shift our fourth column end of this container, so I'm going to use grid column end value. Grid, column N, and I'm going to set position minus one. If I set this file, here you can see there is no changes because autofit property doesn't create extra trig, but if I use autofil property, let me show you then set this file. Now you can see the result. If I run on the grid lines, now you can see it clearly. Because autofil property create extra column, that's why we can move our fourth grid item end of this container. This is the main difference between autofil and autofit value. Now I'm going to use Min Mx function for our column. I'm going to remove this one and set this file. First, I'm going to tie autofit and then I'm going to use Min Max function. I want to set minimum container with 150 pixel and maximum up to one effort value. If I set this file, you can see the result. But what happened if I reduce the container width, so I'm going to type 70% container width. If I set this file, here you can see our fourth grade item shrink down. If I show you my computed section, here you can see now our container width is 546 pixel and we set our minimum item with 150 pixel and if we multiply 150 pixel with four, it's going to return 600 pixel. As you already know our container width below then 600 pixel, that's why it shrink down our fourth grade item. If I increase the container width let me show you. Now you can see it set our fourth grad item in our first row. If I show you my continuer width, here you can see it's above 600 pixel. That's why it fit into this row. And similarly, if I show you my grid item width, here you can see, our grid item width is 167 pixel. We cannot reduce our grid item below then 150 pixel. If we try to reduce our grid item with forcefully, let me show you here you can see it shrink our grid item in the second row. And if we try to reduce more, here you can see it also shrink our third grid item in the second row because we cannot reduce the grid item width below then 150 pixel. Without using media query, just using autofit value, we perfectly create our container responsive. Similarly, if I increase the browser width, here you can see all the grid item in a single row. If you notice you can see it also increase the item width. Now the item width is 245 pixel. If you want to show all the grid item in a single row, then you should have 600 pixel minimum container width. If I reduce browser width too much, and increase the continued with percents, something 85% is, and also I'm going to increase the minimum width, so I'm going to increase it up to 300 pixel. If I set this file, now you can see total four row. Now it's look like total responsive. As you can see, we set height for two rows, 150 pixel height. I hope now the concept is clear for you, what is autofil value and autofd value. So thanks for watching this video. Stay tuned for our next tutorial. 107. CSS Grid Fit Content Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn a new property related CSS Grid, which is fit content. So let's see how we can use it practically. Here you can see, side by side, I open my Visual Studio codator and my browser using Lifesaver extension, and I already create a TML document named index dot TML. Here you can see, inside the parent container, we have total six grid items. Basically, fit content property working like mix with property. So let's use this property. So I'm going to remove the previous one. And I'm going to type Suppose I want to show two column using fit content. So to type fit content. And inside the parenthesis, and I'm going to say 200 pixel maximum width for our first column. And similarly, for our second column, I'm going to use fit content property. And for our second column, I'm going to use 400 pixel maxwde If I save this file, here you can see the result. Here you can see for first column, we take 200 pixel width, and for second column, we take 400 pixel width. But if you notice you can see our item with the according to content size. Let's take another column with one Eer value. So to type one ER. If I set this file, you can see the result. If we said fit content value, we cannot extend our column more than 200 pixel. Similarly, we cannot extend our second column more than 400 pixel. Let's have some content in our first item. Inside the first item, I'm going to type dum. 30. If I set this file, here you can see the result. If I turn on my grid lines and show you my cell width, here you can see our first grid item extend up to 200 pixel. If we use fit content property, we cannot extend with more than 200 pixel. Similarly, if I add more content in our second grid item, let me show you and then set the file, here you can see the result. If I show you my cell size, here you can see it extend up to 400 pixel, not more than 400 pixel. Because I said maximum width of this grid cell using fit content property. For our third column, we use fraction value, so it can change its size according to the content. Basically, this technique is very useful for image gallery. Also, you can notice we cannot see the whole content in this item. For this, we can use MnmxFunction in our rows. Let me show you. So I'm going to remove this one, and I'm going to say Man max. Inside the parenthesis, here we can set minimum height for our grid item. I want to say 200 pixel minimum height. Then if you want to extend the Grill height according to the content, for that, you can use main Content function. Let me show you Amin content. If I set this file, here you can see the result. Now it's look perfect. We learned about main content property in our previous tutorials. I hope now you understand what is the use case of fit content property. Thanks for watching this video, Stay tuned for our next tutorial. 108. CSS Grid Order Property Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn a new grid item positioning property, which is water property. So let's see how we can use this property. As you can see, side by side, I open my Visual Studio creator and my browser using Lip server extension, and I already created a TML document named index dot TML. Here you can see inside my patent container, we have total six grid item. So using water property, we can change grid cell position. Suppose you want to move first grid cell in sixth position. For this, you can use Water property. In our previous tutorials, we learn about positioning. But in this tutorial, we are going to position ourselves using water property. Suppose I want to move the item one in six position. For this, I'm going to jump into the item or selector, and I'm going to use Water property. Order. Here I'm going to pass one value. If I set this file, here you can see it automatically move our content in the lust position. Watering start from opposite direction. That's why it's come to the lust place. And similarly, if I use zero value and then set the file, here you can see, there is no changes in order. Zero is the default value of this property. But if I pass order two and then set the file, here you can see, it's also come to the first place because there is no order one. Suppose now I want to move our second item in first order. For that, I'm going to jump into the item to selector, and I'm going to type order propriety. Order one. If I set this file, here you can see the result. Now, this is our order one position. Now suppose I want to move the fourth item in third position. Let's jump into the fourth selector, and I'm going to type order three. If I set this file, now you can see the result. This is our water one position, and this is our two position, and this is our three position. First, we water our item one in second position. It's come to the second position, and then we water our item two in first position. It's come to the first position, and then we water our fourth item in third position and you can see the result. It's come to the third position. As you can see, we do not work with third item, fifth item, and sixth item, it has came forward. Suppose now you want to move the third item behind the fourth item. So I'm going to use water propriety once again, water, and I'm going to pass four value. If I said this file, you can see the result. Now you can see our third item came through the sixth position because we use four value, so our first order position is this one. And this is our second order position. And this is our third order position, and this is our fourth order position. So now it's clear for you how it's work. So thanks for watching this video, stay tuned for our next tutorial. 109. Nested Grids Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn about nested grids. So let's try to understand what is nested grid. Here, you can see a grid container, and inside this grid container, we have to to these grid cells. Now you decide to add more grid cells inside this grid cell. Then you need to convert this grid cell into a grid container, and then you can add more grid cell inside this container, something like that. We call this whole system nested grids. Using nested grid, we can convert a parent grid cell into a grid container. Let's start the practical and see how we can create it. As you can see side by side, I open my visual studio coordinator and my browser using light server extension, and I already create a TML document named index dot TML. As you can see in my parent container, I have four read sell and now I want to add more read sell inside the fourth grid cell. For these, we need to use display grid property for item four, inside the item fourth selector, I'm going to use display property, display grid. Now it convert our cell into a GET container. Now we can add more grid cell inside this container. Let me show you. I'm going to remove this text and inside this div, I'm going to create four more Dev Dev dot SUB b one, and I'm going to duplicate this line three times. And also I'm going to number in their class name sub two, sub three, and sub four. Inside these grid cells, I'm going to type A, B, C, and D. If I set this file, you can see the result. As you can see, we create four read cell inside the fourth container, and now I'm going to assign width to our cells. For this, I'm going to use grid template column property. Greed template columns, and I want to assign two column with one F value, one FR, one FR. If I set this file, you can see the result. Let's set a background color to this deep. Otherwise, it's not going to be visible. So I'm going to select item four. Inside the item four, I'm going to select all the deeps. Then inside the cariverss background, Read. If I save this file, you can see the result. As you can see, there is no gap between these cells, so I'm going to use grid gap property. Read, gap, ten pixel. If I set this file, now you can see the cells clearly. As you can see, inside a paratentGrid container, we have total four cell, and then we convert our fourth grid cell into a grid container. Inside this container, we also have four grid cells. We call this process nested grid. Using the inside a grid item, we can insert more grid items, and also you can insert more grid items inside these sub grid items. Suppose you want to insert four more grid items inside this cell A. Then once again, you need to follow the similar procedure. First, you need to use display property grid for this sell, and then you can add more grid item inside this sell. If I show you my developer tool bar, here you can see inside this grid, we have another grid structure, and you can see the grid lines of this grid structure. If I show you my layout section, here you can see in grid overlays, we have total two grid system, our main container grid system, and next our overlay grid items system, and you can turn off and turn on your grid lines according to your choice. Thanks for watching this video. I hope now it's clear for you what is nested grid. Stay tuned for our next tutorial. 110. Overlapping Grid Items Tutorial: Good to see you back, guys. This is our last tutorial related CSS Grid. In this tutorial, we are going to learn what is overlapping grid items. So moving forward and let's try to understand what is that. Here, you can see a grid container. And inside this grid container, we have total three grid item. And as you can see, items are overlapping each other. And we called it overlapping grid items. And now you want to green one game first, something like that. So let's see how we can create the overlapping greed items. With that, we are going to learn how we can change the stack order of these greed items. Stack order means Z index. So let's start the practical and try to understand how it's worked. Here you can see side by side, I open my Visual Studio codtor and my browser using if server extension and I already create a TML document named index dot HTML. As you can see, I already create a grid structure. There are three grid item in this grid structure. As you can see, our container with is 400 pixel and our column with is 200 pixel and also our row height is 200 pixel. Let's try to overlap the grid items. At first, I want to span our red grid item. I want to span it up to two column. For these, I'm going to use grid column property. One from column one, two, span two. If I set this file, you can see the result. We span our item two column. As I'm going to span this item row wise with two column. Let me show you. I'm going to use grado PupityRadow from row one, span up to row two. If I set this file, you can see the result. So now our first item span up to two column and two row, our second item and third item is our implicit grid items. Now I'm going to assign a maximum width, all of these grid items. As you know, we use this item plus all of these grid items. So I'm going to use max Width property, I'm going to type max width 200 pixel. If I set this file, you can see the result. And now I'm going to align our first cell vertically. I'm going to type, align self sir if I set this file, you can see the result. If I show you my grid lines, here you can see it take full area. Because we use Aligned cell property, that's why it look like smaller. If I comment out this property and set this file, you can see the result. But to create a overlapping grid items who need it, so I'm going to undo the comment and set this file. Now I want to move our second item center of this page. For these, I'm going to use same properties for item two. If I pass the code and set the file, here you can see it overlap our first grad item, but I want to place it middle. I'm going to use aligned el property, Align center. If I set this file, you can see the result. We vertically align our item, center of this container. Now I'm going to horizontally center this grid item. For this, I'm going to use and justify self property, Justify self center. If I set this file, you can see the result. For our third grid item, I'm going to use se property. But I want to align our end of this container. I'm going to use align self end. And also justify self end. If I set this file, you can see the result. I don't need this orange background color, so I'm going to remove it. Now, all the greed items are take same amount of area. We just align the items, start, center, and end, but their column size and position is same. Now I'm going to add some text in all the items. I item one, I'm going to type Lum 15. It's going to add 15 watt character. It can add 15 wat paragraph in our item, and I'm going to copy the paragraph and I'm going to paste it in our second item. Also in our third item, if I set this file, you can see the result. Hey, we need to add more character to overlap this item. I'm going to paste this character once again. If I set this file, now you can see it's overlap each other. Now I'm going to show you how can we change the stack order of this item. To change stack order, we need to use our old property, which is Z index. Now I want to bring the first item to the forefront. For this, I'm going to use Z index property. I'm going to type Z index one. If I set this file, you can see the result. You can see it came on top and now I want to bring the orange item top of the. For these, we need to use Z index two value. So to type Z index two. If I set this file, you can see the result. Now it's clear for you how we can control the overlap areas. Now let's see if I remove all the alignment of this container. And then set the file. Here, you can see the result. Now all the grid items are still exist in the same place. Now I want to show our green grid item. For this, we need to use Z index value once again. Z index three, if I set this file, you can see the result. I hope now it's clear your doubt about overlapping. Thanks for watching this video, stay tuned for our next studio. 111. What is Flexbox: Hello, guys. Good to see you back. This is the introduction video of CSS Flexbox. Let's try to understand what is Flexbox. Basically, Flexbox is a new module in CSS three. It's make alignment very easier in different direction and different order. It gives container the ability to expand and shrink elements to best use all the available space. This is the best way to use all the available space. Our next point is CSS Flexbox layout replace float layout. Similar to the grid layout, it also can replace float layout. It made our job very easier. Using Flexbox, you can create one dimensional layout very easily. CSS grid is not one dimensional. It is two dimensional, but CSS Flexbox is one dimensional. You cannot handle row height and column width together. At a time you can handle only one dimension. Row, otherwise column. Suppose this is our main container inside this parent container, we have four subdps. We call the container flex container, and if you want to create it flexbox, then you need to use display propriety. Display flex. In our parent container, we need to use this property, and then it convert into a flex container. All the items inside the flex container, now they are flex items. As I told you earlier, flexbks work in one dimensional way. Row wise, otherwise column wise. If we talk about rows means horizontal way. For that, we call the axis main axis. Otherwise, you can call it row. If I talk about vertical dimension, then we call it cross axis. Otherwise, you can call it columns. Let's see a little demonstration how we can use a flexbox. Here you can see side by side, I open my visual studio Creator and my browser using if server extension, and I already create a TML document named index dot HTML. As you can see, there is a parent deep, which classes container inside this parent container, we have total four items. As you can see, we use different classes for all of this item one, item two, item three, and item four, I already set a background color to all the subdeps. As you can see, our parent container with is 600. As I set a background color, margin and border to this parent container. Now, if I want to make it flex container for these, we need to use display property, display and I'm going to use flex value. As you can see, we have put all four row in our parent container. If I set this file, as you can see, it automatically save all the items in one row. Now it's little clear for you when we convert our parent container in a flex box, whatever item in our container, it's come in one row. In our upcoming tutorial, we are going to learn some new properties. Let's see the properties. Are a total 12 property that you can use with flex box. Flex direction, flexap, flex blow, flex grow, flex syn, flex basics, flex, justify content, aligned content, align item, align self, at last water. For alignment, we use this propriety and we already learn about it in our grid chapter. In our upcoming video, I'm going to cover all the properties. Thanks for watching this video, stay tuned for our next tutorial. 112. CSS Flexbox Flex Direction Tutorial: Good to see you guys. In this tutorial, we're going to learn what is flex direction property. Let's see the values of this property. As you can see, we have total four values related CSS flex direction, row reverse, colum and ClumRvers. And row is our default value in this property. So let's start the practical and see how it work. Here you can see side by side, I open my visual sto coordinator and my browser using if server extension, and I already create a TML document, named index dot TML, as you can see in my document, there is a container, and inside this container, we have total four flix item. And as you can see, we already convert our container Flexbox. And you already know that if we use the flex property, then it put our items in a single row. And in this tutorial, we are going to talk about flex direction property. This property is related to container, not the items. I'm going to use it after display property, and I'm going to type flakes direction, our first value is row. If I set this file, here you can see there is no changes. As I told you, row is the default value. If you use it, it's not going to effect on your structure by default, row follow the left to right direction. But if I use row reverse value, let me show you and then set the file, now you can see the result. Here you can see it's reverse the order of our item. Now the direction is right to left. This is a use case of row reverse value and our next value is column, let me show you. I'm going to type column. This value works vertically. If I set this file, you can see the result. Basically, it follow top to bottom order. As you can see, first, second, third, fourth, if you want to arrange it bottom to top, then you need to use another value, which is column reverse. If I set this file, you can see the result. Here you can see our first item came to the bottom. Then come second and then third, and our last item came to the top position. It's basically change the direction from bottom to top. If I use only column value, then the direction will be top to bottom. This is the flex direction property. As I told you earlier, it's work on one dimensional way. At a time, it's work with row wise, otherwise column wise, and you cannot handle row and column together. I hope now the flex direction property is clear for you, thanks for watching this video, stay tuned for our next tutorial. 113. CSS Flex Wrap & Flex Flow Tutorial: Good to see you guys again and back with a new tutorial related flexbox. And in this tutorial, we are going to learn what is flexAp and flex flow. These two new properties are very important in our flexbox. So without further discussion, let's start the practical. As you can see, side by side, I open my visual studio coeator and my browser using lip server extension, and I already create a TML document named index dot HTML. Here you can see in our container, we have total four flex item and our container size is bigger than flex items. If I increase the flex item in this box, otherwise, if I reduce the container width, in that case, items are overflown to this container. Let me show you. I already create six other flex item, and I'm going to uncommens dip tags, and I'm going to set this file. Now you can see we have total ten flex item in our container, and now I'm going to reduce the container width. Using width property. So I'm going to type with 400 pixel. If I set this file, here you can see the result. Here you can see flex items are overflown to this container. Similarly, if I use height property and increase the height 200 pixel and set this file, you can see this result. But if I change the flex direction, let me show you flex. Direction, column and then set the file. Now you can see, once again, flex items are overflown to this container. To solve this problem, we have another flex property, which is Flex RAP. Basically, flex Rap has three value, NoAPRap and RF reverse. NoAP is our default value. If you use or not, it's going to overflow your data. Let's see how it works. For this, I'm going to use flex direction row and also I'm going to set a width of this container. With 400 pixel. If I set this file, you can see the result. And now I'm going to use flex Rp property, flexAp. At first, I'm going to use nob value. If I set this file, here you can see there is no changes because this is the default value of this probability, so it's not going to effect the flex items. If you want to wrap it, you need to use Rav Value. Et me show you. If I set this file, now you can see the result. Now you can see our container with this steel 400 pixel, but it perfectly wrap our flex item inside this container. As you can see it automatically come to the next line. Let's have some margin between this ex item. I'm going to type margin five pixel. If I set this file, you can see the result. Now it's clear for you when data overflow from the first line, then it automatically came to the next line. Then it's automatically come to the next line. But if I change the flex direction colum also I want to use height property, height 200 pixel, and I'm going to comment out the wide property. If I set this file, now you can see the result. You can see it's set in vertically order, first, second, third, fourth, fifth, six, seventh, eight, 19. I hope now it's clear for you how items are set in vertically order. Now I'm going to use the next value of this probability, which is rap reverse. I'm going to type rap reverse. If I set this file, now you can see it is just reverse the order of items now it'll start from the right side and ended lip side. If I change the flex direction, rows and set with up this container. And commute out height and set this file. As you can see, our items start from the second line of this container. First, second, third, fourth, fifth, sixth, seven, eight, 19. Basically, we use p property to control overflow data. I hope you got the point, and our next property is flex flow. What is flex flow? It is a shortened property of flex arrive and flex direction. Using one property, you can control both the properties and we can use it in one line. I'm going to use flex flow propriety, flex flow. Here, first, we need to provide flex direction value and then we need to provide flex rep value. First, our flex direction value is colum our flex p value is rare. I'm going to comment out this two property and also need to comment out with property because we use colum value and I'm going to uncommen the height property. If I set this file, here we can see is work perfectly. If I use not a value here, and set this file. Now you can see our flex items are overflown to this container. Basically, Flexplo is one liner of the two property, flex direction and and flixAp. I hope now the concepts are clear for you what is FlexAp and Flixlo. So thanks for watching this video, Stay tuned for our next tutorial. 114. CSS Flexbox Justify Content Tutorial: Hey, again, I'm back with a new tutorial related flexbox and in this tutorial, we are going to learn justify center property. Let's back to the computer stream. Basically, we use justify content property for horizontal alignment. This property come with total six value. Let me show you. Our first value is flex start. It is also a default value. Then come flix end center, space around, space between space evenly. It is very similar to our grid property, justify content, and we already learn about it in our grid section. Let's start the practical and see how its work. As you can see, side by side, I open my Visual Studio coorreator and my browser using webserver extension. Inside the patent container, we have total four flex item. Now I'm going to align it using justify content property. Sound type, justify content. At first, I'm going to use center value. If I set this file, you can see the result. As you can see, it move all the flex center of this container. And next, I'm going to use flex end value. Flex end. If I set this file, as you can see, it shave all the flex item right corner of this container, and flex tart is a default value of this property. If I use this property, let me show you and set this file. As you can see, it's a default value. If I use any flex value or not, it's going to return this result. Our next value is space between. Sound type space between. If I set this file, as you can see, it move our first item and last item end to end of this container. If I remove the margin, now it's more clear for you. As I'm going to remove the padding one. Now you can see the result and I'm going to add all the space between these items. It equally divided this space between flex items. Our next value is space around. Let me show you. If I set this file, now you can see it provides equal space first and last of this item. And between these items, it provides double space. As you can see, it provides equal space before the first item and uptur the first item. Similarly, it provides equal space before the second item and uptur the second item. That's why the gap between items are develop this first gap, and our last value is space evenly. If I use this v and set this file, as you can see, it provides similar amount of gap between flex items. I hope now it's clear for you how we can horizontally align our flex items. Thanks for watching this video, stay tuned for our next tutorial. 115. CSS Flexbox Align Items Tutorial: Hello, guys. Good to see you back. Once again, I'm coming with a new tutorial related CSS flex box. In this tutorial, we are going to learn align item property. We use align item property for vertical alignment, and we have total five value related align items property, FlextrtFlx center, stress, and baseline. If we use flexart value, and then it's going to put my flex item top of this container. If we use flex N value, then it's going to put my flex item bottom of this container. If you want to align center vertically, in that case, you can use center value, and stretch is our default value, but baseline value is different one. Let's start the practical and see how it's wormed. As you can see, side by side, I open my visual studio coorretor and my browser using ipserverEtension. As you can see, we already create a continuer and inside this container, we have total four flex items. As you can see, we use display flex property. Using this property, we can convert our container as a flex container. I'm going to use this property, which is align item, align items. Our first value is stretch. If I set this file, here you can see there is no changes because it's a default value. We are work with vertical alignment, so we need to increase the container height, height, 500 pixel. If I set this file, you can see the result. By default, align item use stretch value. Now I'm going to use the first value, which is flex start. If I set this file, as you can see, now the vertical alignment of this item is top of the container. Similarly, if I use flex end value and set this file, as you can see, all the items are aligned in bottom of this container. If you want to align this item, center of this container, you can use center value Align item center, you can see the result. It align all the flex items center of this container. Let's add little height in our third item. I'm going to use height property in our third item, height 50 pixel. If I set this file, as you can see, now our third item height is 50 pixel, and now I'm going to talk about baseline concept. If I use flex end value, flex end and set this file, as you can see, as you can see, items are end at baseline. But if I use start value and set this file, now the baseline end in to. And now I'm going to talk about our last value, which is baseline. But at first, I'm going to increase the third item font size. Font size. I want to use font size property. Font size 34 pixel. Now also I'm going to reduce second item font size. I'm going to use font size value once again and I'm going to use ten pixel for that. If I set this file, you can see the result. Now you can see the text baseline alignment is different and now I want to align this text in the same baseline. For that, we need to use baseline property. Let me show you align items, I'm going to use baseline value. Baseline. If I set this file, you can see the result. Now all the texts come in same baseline. If you want to use horizontal alignment, yes, you can use with that. Just you need to use justify content property. Let's use it. Justify content center. If I set this file, you can see the result. As you can change flex direction. As you know, by default, our flex direction is wrong. Let's change the flex direction. Flex direction. I'm going to use column value. If I set this file, as you can see, now our Ant property work in horizontally, not the vertically. If I use flex N property, and set this file, as you can see, it's aligned horizontally because we change XX direction and YXs direction using flex direction property. Now let's follow the opposite cross axis. So this is it for this tutorial. I hope now the concept is clear for you what is align item property. So thanks for watching this video. Stay tuned for our next tutorial. 116. CSS Flexbox Align Content Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn CSS align content property. In our previous tutorial, we'll learn about align item property. This property also used for vertical alignment. As you can see, we have a lot of different value related align content probability. Flex start, flex N, center, stretch, baseline, space around space between and space evenly. In our previous tutorial, we'll learn about align items. Both the properities are used for same purpose, but there is a different between two this probability. Align item used for single row alignment, but align content used for multiple row alignment. Suppose you're content not covered in a single row, it wrapped and come to the next row. Then we need to use Align content property. Let's start the practical and see how it works. As you can see side by side, I open my visual studio Cater and my browser using lip server extension. As you can see, I already created TML document named index dot HTML. Here you can see in my parent container, we have total ten flex items. At first, I'm going to assign to this container. After height, I'm going to type we with equal to 450 pixel. As you can see, our data is overflown to this container. In this case, we need to use FlexRp property, someone to type flex rap. I'm going to use Rab value. If I set this file, you can see the result. In our previous tutorials, we'll learn about flex rap properety. Now you can see overflowc items came to the next and as you can see, our items are already stretched. Let's use our property align contained. So type, align contained. Our first value is stretch. If I set this file, as you can see, there is no changes because stretch is our default value. But if I use flex dot value, and set this file, now you can see it's move vertically top. Similarly, if I use flux and value and set this file, now items are move vertically in. Similarly, if I use center value, then set the file. Now all the items are center of this container. Our next property is space between, Somlote space between. If I set this file, you can see the result. This value going to fill all the space between two rows. If I use space around value, let me show you and then set this file. Here you can see whatever space we have top of the row, it going to double it between this row and then come same amount of space, bottom of the last row. Then come our next value, which is space evenly, some type space evenly. If I set this file, now you can see it a same amount of space between rows. This property only work when we have multiple rows. If I remove some flex item from this container, let me show you and then set this file, you can see, all the items are more vertically centered. Now this property not going to work properly. If I use different value, something space between, and then set this file, you can see it is not work. This property exactly work when we have multiple rows. Otherwise, it's not going to work. If we have single row in that case, we need to use Align item property. I hope now it's clear for you what is Align content property. Thanks for watching this video, stay tuned for our next tutorial. 117. CSS Flexbox Align Self Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn CSS ex box aligned cell property. This property also used for vertical alignment, similar to align item property. As you can see, for this property, we have some similar values. Just we have one new value for this property, which is auto. Thence come flex start, flex end, center, stretch, and baseline. Now the question is, what is the difference between align item property and align cell property? Aligned cell property vesically used for individual items. Suppose you want to vertical align individual flex item. In that case, you need to use this property. As you can see in this image, remaining one flex item, all the flex items that came to the top of the container because for this particular cell, we use align cell property. Because of this, we have been able to differentiate. So let's start the practical and see how it's worked. Here you can see side by side, I open my visual studio coretor and my browser using p server extension. I'm going to use my previous SML file for this example. As you can see in our fix container, we have total five flex items. And as you can see, by default, items are stretched. First, I want to align all the items top of the container. I'm going to use align item property. Align item Flextrt. If I set this file, you can see the result. Now I'm going to use aligned cell property because now I want to align one individual cell. Suppose I want to move number three cell end of this container. Then we need to jump into the item three selector, and we need to use this Aligned sell. I'm going to use flex end value flex end. If I set this file, you can see the result. We successfully move a individual cell end of this container. Remember, this property is used for vertical alignment. Let's move number two cell center of this container. For these, once again, I'm jumping to the number two selector, and I'm going to type AlignellPperty. AlignL center. If I set this file, you can see the result. Let's talk about our new property which is auto. If I use auto value in our item two and then set this file, here you can see it's back to the group. Now, this value is related to parent container alignment value. Let's change the parent container alignment. Align items center. If I set this file, as you can see, our auto value automatically follow this alignment. If we use align self auto, then it's relatively work with align items value. If we use center value is also act like a center value. If we use flex endvalue is also act like a flex end value. Just you need to remember, Alan SEL property only work with Flexbox sales, not the Flexbox container. I hope now it's clear for you what is Alan Cell property, and what is the Ukage of this property. Thanks for watching this video, stay tuned for our next two tudio. 118. CSS Flexbox Order Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn about water property. This property works the same way we did in the grid. Let's start the practical and see how it works. Here you can see side by side, I open my Visual Studio coator and my browser using Lifesaver extension, and I already create TML document named index dot HTML. As you can see, instead the flex container, we have total six flex item. If you remember using WR property, we can change sales positions. Suppose you want to move fourth cell in number two position. In that case, we need to use War property. So I'm going to jump into the item five sector and I'm going to type water. At first, I'm going to pass zero value. This is the default value. If I set this file, here you can see, there is no changes in their order. But if I pass minus one, let me show you and set this file. Now you can see, now you can see our fifth item move first place in this order. By default, all the cells water property value are zero. Water start from minus value. For item five, we use minus value. That's why it came first. This is minus one. Also, I'm going to type minus one in fifth this. Minus one. Similarly, for our third item, I want to pass minus two, water minus two. If I set this file, now you can see it came first place in our water because minus two is less than zero and minus one. That's why it came first. As I told you earlier, lowest value came first. I want to type minus two in third place, minus two. First minus two, then comes minus one, then zero, zero, zero and zero. But if I pass one value in number one item, let me show you water one and then set this file, you can see it has came to the right side because one is greater than minus value and zero value. That's why it came up to zero. I'm going to pass plus one here. It's move lowest to greater value. Now, if I pass order two in our fourth item, let me show you order two, and if I set this file, as you can see, now it's skin to the last place because plus two is greater than zero and one. If I set this file, now it's clear for you. Now you can clearly understand how orders are word. We do not set any order in item number two and item number six. So by the fall, the water of these items are zero. I hope now you understand the watering. Now the question is, why we use the water property? When you want to make your website responsive, then water is the most important property. In dexter view, you want to follow this water. But in mobile view, you want to move item four in first place. In that case, water property are very useful. I hope you got the point. Thanks for watching this video, stay tuned for our next tutorial. 119. CSS Flexbox Flex Grow Tutorial: Hello, guys. Good to see you back. Once again, I'm come with a new tutorial. And in this tutorial, we are going to learn a new property, which is Flix Row. So let's start the practical and see how it's work. As you can see, side by side, I open my Visual Studio Ceator and my browser using Lifesaver extension, and I already created a TML document named index dot TML. And as you can see in our parent container, we have total six flex items. So let's use our new property. Basically, flex groove property not work with container. I work with flex items. As you can see, there are a common class name name items for all the flex items. I'm going to jump into the items selector. I'm going to use our new property, which is flex grow flex grow. Here we need to pass numeric value, if I pass zero and then set this file, as you can see, and there is no changes. If I pass one value here, I'm going to type one and then set this file, here you can see all the space are equally divided to flex item. I hope now it's clear for you how flex group property work. If I pass two here and then set this file, as you can see, there is no changes. Because I equally divided the space, all of the lex items. That's why it's not going to work. I'm back to my old position one, and I'm going to set this file. Now I want to increase item to width. Yes, we can do it. At first, we need to select the item individually and then we need to use this probity, flakes, grow. Here I'm going to pass two. If I set this file, you can see the result. You can see here, now it's double compared to other cells. Similarly, if I pass three and then set this file, now its size is triple compared to all similarly, I'm going to use the same property in our item four. I'm going to type, flakes grow, and I want to expand the width up to four time, so I'm want to pass four here. If I set this file, you can see the difference. If I remove the margin between cells, now it's more clear for you. Without item two and four, all of the cells are one. For item two, Flex group property value is three, and for item four, Flex group property is four. This property only work for flex item Width. Basically, we use this property when we need to provide equal with all of the sales. I hope now it's clear for you what is Flex group propriety. So thanks for watching this video. Stay tuned for our next tutorial. 120. CSS Flexbox Flex Basis Tutorial: Hey, once again, I'm back with a new property related CSS Flexbox. In this tutorial, we are going to learn what is flex basis? This property is pretty similar to max With property. Basically, it handle flex item width. Let's see how we can use it practically. As you can see side by side, I open my visual studio codator and my browser using if server extension, and I already create a HTML document named index dot HTML. As you can see, inside the flex container, we have total 66 items. As you can see, we use display property, flex, and also we use flex wrap. We used flex Rap probity because if item overflown then came down. That's why we use flex Rap and for every flex item we set a common width. As you can see, flex grow one. We learn about this property in our precase tutorial. That's why all the items that take same amount of space. Let's use the property flex basis. I item one selected, I'm going to type flex basis. And here I'm going to pass 250 pixel. If I set this file, as you can see, now our first flex item width is 250 pixel. Now it's work like maximum width. Let's trn on the developer toolbar. If I save this dip, as you can see, our first item with is 250 pixel. But without our first item, all the dips that take same amount of space. But if I try to shrink down the browser size, let me show you. As you can see, it's not going to affect the width of this item one. If we reduce the browser width, as you can see, now it shrink down. Because this property worked like a maximum width. We can reduce the width of this item below the 250 pixel, but we cannot stretch the width of this item more than 250 pixel. Now I'm going to use flex basis property all of this item. I'm going to comment out this line and I'm going to type flex basis 100 pixel. If I set this file, at first, I'm going to increase my browser panel width now you can see still our first item width is 250 pixel. But without our first item, every items widths are 100 pixel. If I try to increase the browser size little with, let me show you, as you can see, item five mop to the right corner. Because without first item, every items trying to maintain 100 pixel width and also they are trying to fill the space of this browser. Now let's try to reduce the browser width and see what happened. If I try to reduce the browser width, as you can see, most of the items are shipped to the second row because we use flexer property. Otherwise, they are going to overflow into this container. But if I reduce it, little more, as you can see, as you can see, there is no space for two item in a single row. That's why they are shrink down. But as you can see, we reduce the item one width. But remaining item one, still all the item widths are 100 pixel because they have space to extend up to their full width. But if I reduce it more and more, as you can see, all the items are reducing their width. So I hope now it's clear for you this property work like a max width. Not only that, this property also work like a minimum width also. Let me show you. If I comment out this line, and if we use flex group property for all of this item and set this file, as you can see, all the items are came to the one row. We use Flexbsis property only for item one, and for remaining one, we use flex group property, and our flex grow value is one. As I told you, it's work like a minimum width property also. Let me show you. If I try to reduce the container width, as you can see, it going to effect all of this item width without item one. If I try to reduce it more, as you can see, it not going to effect item one. Without item one, all the items are reducing their width. If we try to reduce it more, as you can see, our last item shipped to the second row. But our item one still maintain the same width 250 pixel. If we use flex Basis property with flex row, there is a minimum width. But if we use flex basis propriety only, then it's going to act like a max with. Not only that, here we can use percentage value also. Suppose I want to use 50%, 50%. If I set this file, as you can see, it still work properly. Let's increase the percentage value, 90%. If I set this file, now it's clear for you how it's work. Now every time our first item going to take 90% width of this browser. So this is up to you what kind of value you are going to use. I hope now it's clear for you what is Flex's basest propriety. Thanks for watching this video. Stay tuned for our next tutorial. 121. CSS Flexbox Flex Shrink Tutorial: Welcome back guys. In this tutorial, we are going to learn what is flex stream. So let's jump into the computer screen and see what is that. Here you can see side by side, I opened my visual studio Coreator using Lifesaver extension, and I already created a TML document named index dot TML. And here you can see the for different fix item one, two, three, four, and this is our fixed container. If I show you here you can see, we use distal fix. And in our common class, I use fix zero property, fix 01. That's why item widths are equally divided. But in this tutorial, we are going to learn a new property, which is flex syn. So let's start it. So first, I'm going to remove fix roo property, and I'm going to set W W 200 pixel. If I set this file and resize my browser with, you can see the result. Here you can see our container with is bigger than items width. As you can see, all items with are 200 pixel. Now I want to use this flexing property in our item one. But at first, I want to tell you what is the meaning of flexing. Basically, we use flexing property to create our flex item responsive. If you want to make your items shrinkable, then you need to use this property. Here you can see it shrink the item Width. Let me clear the concept. In our item one, I'm going to use this property, flex shrink. One is the default value. If I set this file, here you can see there is no changes. But if I use zero value and then set this file, now you can see, Hey, I did some synamista. We need to use this property inside the item one, not all the items. I want to move this property in our item one. If I set this file, here you can see item one did not change its shape. Now our item one is not shrinkable. Now it maintained the fixed width 200 pixel. If I increase the browser width, you can see the result. And if I shrink down other flix item to the limits, let me show you here you can see our other flix item overflown from this container. As you can see, our first item did not shrink because we use flexing value zero. Now it's clear for you. For shrink, we can use zero and one value. If we use one value and then set this file, now you can see the result. Here you can see now it shrink our item. If you want to turn up the shrink, then you need to use zero value. Now I'm going to show you another thing. You already know if I use zero value, we can turn up the shrink. But if I use one value, then we can shrink our flex items. Now, without zero or one, we can use different values. Let me show you. If I use two hair, I set this file, you can see the result. It shrink down our first item compared to other items. Similarly, if I use three value and then set this file, you can see, again, it shrink down our item one. If we do not use zero value, then our item is always shrinkable now I'm going to show you the second method. How can we use this string property in a different way? For that, at first, I'm going to remove the item width. Then I set this file and also I'm going to use string value one. And now I'm going to use flex Basis property. Flex basis. Flex basis 200 pixel. Flex basis means dynamic weed. Now you can see we cannot apply any wet to all the item. We apply with in our item one using flex BesisPpity. Now, if I set this file and try to reduce the browser width, as you can see, when blend space is over, and if I try to reduce it, you can see our item one also shrink down. Now the question is why shrink down? Because we use one value. But if I use zero value, and set this file, now you can see our items are overflown from this container. But if I pass to value and then set this file, as you can see, it won't work. If I use value one, and set this file, you can see there is no changes. In this method, our other values are not going to work. If you want to cover the remaining space, in that case, you can use flex grow value. Let me show you. In our item four, I'm going to use flex grow value. Flakes grow. One, if I set this file, as you can see, our item four covered the whole blank piece. If I reduce the browser with, you can see our item four automatically shrink down and when shrink over, now it effect on item one. I hope at that point, it's clear for you. Now I'm going to set with to this container. As you can see, we do not use any width to this container, and now I'm going to set container with. Here I'm going to type with WIDTH with 600 pixel. If I set this file and increase my browser width, now you can see our container size is fixed, and now I'm going to reduce the container width. I'm going to use 300 pixel. If I set this file, you can see it shrink all the items. Also the item one. And if I shrink down the container little with something to 50 pixel, and then set this file, here you can see it's also work because we use one value here, flexing one, but if I use zero value and then set this file, you can see a different result. Here you can see other items are overflown from this container. I hope now it's clear for you what is flexing property. So thanks for watching this video, stay tuned for our next tutorial. 122. CSS Flexbox with Margin Auto Tutorial: Today in this tutorial, we are going to learn what is auto maargin in Flexbox. Let's jump into the computer screen and see how it's work. Here you can see side by side, I open my visual studio coordinator and my browser using Lifesaver extension, and I already create a TML document named index dot HTML. As you can see in my browser, there is a paren container, and inside this paren container, we have a DTM. This is our flix container, and this is our fix item. Now I'm going to show you how we can get different result using Margin autowl. So in our item, I'm going to type Margin. Margin. And I'm going to use Atovil If I set this file, you can see the result. Here you can see it horizontally and vertically aligned center. But the tiin is why? Because there are a lot of free space inside this container. That's why it's aligned in center. Now I'm going to use margin lip auto, margin lab. If I set this file, as you can see, here you can see it automatically shipped to the right side of this container. Our item leaving the space on the left side and shipped to the right side. If I use margin top auto top, then set this file, now you can see it's coming down from the top because it has free space at the top. With that, I'm going to use margin let property. Margin let and once again, I'm going to use auto Valu. If I set this file, now you can see our flex item shipped to the right bottom corner of this container. I hope now you can understand how we can get different alignment just using auto Vu. Let me show you another example. Suppose we have a container, and inside this container, we have to tell four flex item. Here you can see the items, item one, item two, item three, and item four. I say different background color to these items. And now I'm going to use our margin auto Velu I'm going to use it inside our item two Margin, right, auto. If I set this file, you can see the result. Here you can see our item two take all the available space inside the container, and it's provided use margin and shaped item three and item four, right side of this container. Similarly, if I use margin lift property, let me show you margin, lap and then set this file. Now you can see it provide all the space, left side of this item two. And if I use the same property from item one, so I'm going to cut this property and paste it here. If I set this file, now you can see it provide all the space before item one, and it's moved all the item right side of this container. So when you work with the responsive side, you can use this tree to align your flex item. So I hope now it's clear for you, using Auto Value, how we can create different layout in flex box. So thanks for watching this tutorial stay tuned for our next tutorial. 123. CSS Flexbox Nested Flex Tutorial: Hey, this is the last tutorial related flexbox property, and in our acoing tutorial, we are going to cover some real like projects. In this tutorial, we are going to learn what is nested flix. Let's jump into the computer screen and see how it work. As you can see, there is a container and inside this container, we have put three D item. If we convert our parent container into flex container, then we call this De flex item. But if we use display flex property in a particular item, in that case, it would be a nested flex container, and these are also flex item inside this container. So let's start the practical and 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 a TM document named index dot HTML. And here you can see a parent div item, class container. And inside this container, we have to t for Flexbox item. As you can see, in our container class, we use display property flix. First, I'm going to change the direction of the six items. So here, I'm going to use flex direction property. Flex direction. I'm going to use Clumvi. If I set this file, you can see the result. We already set 100 pixel height to our items. Now I'm going to add three more DV inside our second item. Here, I'm going to add total three more DV. At first, I'm going to create a D with sub item class sub item. Also, I'm going to use another class name sub item one for our first D. Then I'm going to duplicate this line total two t. So I'm going to praise sheep pared down arrow, sub item two, and sub item three. Here you can see, I set a common class name sabem also we set different class name for each items. Then inside this diviem I'm going to type A, B, and C. If I set this file, as you can see, it return our items row wise, and now I'm going to convert our second flexbox item into a flexbox container. Here I'm going to use a proper D name display. Display flix. If I set this vile, as you can see, by default, it arrange our item in a single row. Now let's set a background color to our items. For that, item two, greater than sign dot our class name, which is sub item. Then then inside the class, I'm going to set background color. Background. Why. Also, I'm going to set a text color. Color Black. If I set this file, you can see the result. Now I want to equally divided our nested flex item inside this container. For that, I'm going to use a property named flex Grove. Flex Grove flex grow wine. If I set this file, you can see the result. Let me give a margin to our items that can tar you. Margin one pixel. If I set this file, you can see the result. As you can see, we have a parent fix container inside this parent flex continuer, we have P four flex IN, and we convert our second flex IN into a Nested flex container, and inside the NSTP fix continuer, we Protal three flex item, A, B, and C. I hope now it's clear for you how we can create nested fix items. It's not a very difficult one. It's a very easy process. So thanks for watching this video, Say for our next Tutorial. 124. CSS3 Text Decoration Thickness Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn a new property related text, which is text decoration thickness. In our previous tutorials, we already learn about text decoration properties. Takes decoration line, takes decoration color, takes decoration style. Using these properties, we can put underline in any text. Also, we can change the underline color and underline decoration style. Not only that we can use O line also, but the problem is we cannot control the thickness. To resolve this problem, CSS introduce another property, which is text decoration thickness. So let's start the practical and see how we can use this property. So as you can see side by side, I open my users Studio codeeditor and my browser using Light server extension, and I already create an ML document named index dot HTML. So as you can see, we have H one tag, and here we use this property, text line center. And now I'm going to use another property called Text Decoration Line. So here I'm going to type text decoration, line. And this property come with total three value underline over line and line through. So I'm going to use underline. And I'm going to set this file. After I set this file, here you can see the underline below the text. And now I'm going to change the underline color. To change the color, we need to use property called Tax decoration color text decoration, color, and I'm going to use red color. Then I'm going to chase the decoration style. So here, I'm going to use another property called Tax decoration style text decoration style, and I'm going to use dst. If I set this file, you can see the result. And now I want to control the thickness of this underline. So we need to use the new property called Tax Decoration thickness. SunduttT decoration. Text decoration thickness. And here, I'm going to mention this size, and I'm going to take pain pixel. If I set this file, here you can see the result. So as you can see, it increases the thickness of this text. And if I make it solid, now it's more pure volume. Solid. After I set this file, you can see the result. And if you want to add more thickness, just increase the value. Suppose I'm going to pass 20 pixel and you can see the result. Also, we can apply it in our overline. Suppose if I pass with underline, I want to slip over line. If I set this file, you can see the result. Now we use underline and overline together. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 125. CSS3 Text Underline Offset Tutorial: Hello, guys, good to see you back. Was again I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn CSS text underline opposite. In our previous tutorials, we already learn about these properties. Takes decoration line, takes decoration color, takes decoration style. Using these properties, we can define color, thickness, style, et cetera. But if I want to provide gap between text and the underline, then we don't have any property. But CSS introduce a new property, text underline opposite. Using this property, you can provide the gap between text and the underline. So let's start the practical and see how we can apply this property. 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 TML document name index DotstM. And as you can see in our body tag, we have H one tag. So at first, I'm going to use a property called Tix Decoration line. Son type text decoration. Takes decoration line. Takes decoration line, I'm going to use underline. Next, I'm going to use another property Tikes decoration color. Takes decoration color. Takes decoration color, I'm going to use red color. Next property I'm going to use takes decoration style. Text decoration style. Takes decoration style, solid. And I'm going to set this file. After set this file, here you can see the result. Also, if you want to control the thickness, just unit use takes decoration thickness property. So tie text decoration, text decoration thickness. And I'm going to use ten pixel. And I want to set this file. After I set this file, you can see the underline, but there is a problem. We don't have any gap between text and the underlined. I want to provide gap between text and the underlined. For that, CSS introduced another property, which is text underline opposite. So to type text underline, opposite. And I want to provide 20 pixel gap. After sub this file, you can see the result. Now it provides 20 pixel gap between text and the underline. So this is it for this tutorial. I hope now it's clear for you. 126. CSS CurrentColor Tutorial: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we are going to learn a new thing, which is current color. In our reverse tutorials, we already learn about it. We have total six different color mode. Hexadecimal color name, RGB, RGBA, HSL, HSLA. Now CSS add another color mode, which is current color. Now let's try to understand what is current color and how easy to. Here you can see a deep element. And in this deve element, we have a heading a divider line, a paragraph, a deep block, and a button. Read more. Then in this parent de element, I add a property named color, and I say it color blue. After using this color property, blue, it's going to change the text color black to blue. But I want to apply the same color in this cat tag and this deep element. To apply this blue color to this DB element and this button, we need to use a property. We need to use background color property, and here we need to pass this value, current color. When I use this value, current color, it's going to check what color we use our color value. As you can see, we use blue color. Then it's going to apply the blue color to this deep element and this button. And we can use current color anywhere. We can apply it background color, border color, anywhere. So 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 ipserverEtension, and I already created an estable document named index dot DML. If you notice you can see in our body tag, we have heading one tag, then we have deep tag. And inset this dip tag, we have heading two tag and some paragraph and a paragraph and cut tag for button. And here we set an ID to this debilment taste. And also, we say with padding margin border to this debilment. And now I'm going to apply color property in this taste element. So here, I'm going to use a property called color. Color, and I'm going to use red color. Red. And I'm going to set this file. After set this file, as you can see, it changed the font colors. Now it's turn into black red, and now I want to set a border below to the subheading. For that, we need to select the subheading. So Hemoti has tag, the parent element, which is taste. Taste, then I want to select H two element. H two, then the cols, I want to set border bottom property. Border boton. And I'm going to pass two pixel, two pixel, solid border, and for color, I'm going to use current color. I'm going to use current color venue. And I'm going to set this file. After set this file, as you can see, if you notice our border color is red. This is possible because in our parente element, her use color property, and we say red color. And now if you want to change the color, text color, also the border color, you need to change once. Suppose I want to apply green color. Green. Upset this file, as you can see, as you can see, it changed the font color. Also it changed the border color. At the same way, if you want to apply green colored parentive element border, also you can use this Vu current color. So I'm going to copy this Valu and replace black with current color. And I'm going to set this file. Urasep this file, you can see the result. And if you want to apply current color to this cat tag, yes, you can. Let me show you. So Hemo select has tag, taste, then I want to select this class read mood. So I copy the class name and Hem type dot read mood. Then inside the Caris is Hemo to use a property called background. And I want to pass current color. After set this file, as you can see, our anchor type background color become purple because by default, it's come with purple color. If I comment out this line and set this file again, as you can see, here you can notice our text color is purple. That's why it said background color purple. Now, there is a problem with current color. If I try to change the font color, let me show you. So I'm going to use color property, color, and I'm going to apply red. And then I'm going to set this file. After I set this file, you can see the result. Now you notice with the font color, it's changed the background color. Now, both the font color and background color become red. That's why our font is not visible in that section. But what? If I do the opposite, if I said colored, current color, and so I want to change red with current color. And I'm going to change the background color with red color. Then set the file. As you can septet the file, now our text is visible. Now you can see our font color is green because its parent element, font color is green, and background color is red. So you need to remember that it is not a good practice to use current color with background property. You can use it with color property only. Otherwise, you can use it with borders, et cetera. So this is it for this tutorial. 127. 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. 128. CSS !important Hack Tutorial: Hello, guys. It's good to see you back. Once again, I'm back with a new tutorial reel date CSS. And in this tutorial, we are going to learn about a hack, which is known as important hack. If you want to understand important hag then before you should have knowledge of CSS priority label, and to understand CS's priority label, first, you need to know how we can implement CSS in our tML page. We can use tag Name to make CSS selector. We can use pauptag, heading tag, body tag, whatever. So in that way, we can create the selector and styling the element. Also we can take class name and we can style the element. Then we can use the ID name, and also we can target the element. And the last method is inland styling. I want to say we can use style attribute in our estimate tags, and then we can style the element, and all the method come with different priority label. CSS always provide first priority inland styling method. Next, it provides priority ID, then class name, and at last, it provides priority tag name. Suppose in an estimate element, we use all the targeting methods. As you can see, here use same propriety, but the value is different. In that case, CS is going to provide priority inland styling method. That's why it's going to give font color orange color. Let me clear the concept with more detail. As you can see in this example, we have a paragraph tag, and her we assign a class name first, and here we assign ID second. In this paragraph, this is just a random text. This is just testing. In our CSS page, if I select this paragraph using its tag name, P and set color red, then this paragraph become red color. But if I select this same element using its class name first, then make it blue, in that case, this paragraph become blue colored. At the same way, if you use the ID name and make it green, then it becomes green color. But if you use the inline styling method, style attribute, and then color it tan, at the same time, it's going to make the text color tan. So CS is going to provide priority to inline styling method. So this is how CS's priority label work. But now I want to break this priority label. As you can see, at the same time, here we use different selection method to select this paragraph. But it provides priority to inline styling method. At the same time, we use total four different method, but this time, I want to give priority to the blue color, this class name. For that, we can use this hag. We can use Important hag, exclamation sign, then we want to type important. If I break the priority label and make this one important, in that case, it's going to apply the blue color to this text. Now it's going to provide the first priority to this selection method. This is not a hack. It's a technique that we can hack any CSS property. So let's start the practical and see how we can use it practically. As you can see side by side, I open my user's studio code editor and my browser using Live Server extension, and I already created an ML document named index dot HTML. So as you can see in our body tag, we have a heading one tag, and in this tag, we type hello world. And here you can see in this tag, we assign class name. First, also we assign an ID, second. Also, we select this H one tag in our style section using tag name H one. And now I'm going to change the font color. So here I'm going to use color property. Color ray, and I'm going to set this file. After set this file, you can see the result. And now I'm going to select the element using its class name. So here, I'm going to type dot first, there at the colors, I'm going to use color property. Color, and this time, I'm going to use blue colored. Blue. If I set this file, you can see the result. Now our text turn into blue color. As you can see, both the selectors select the H one element. First, to use tag name, they now use class name, but it provides priority to the class name. Next, I'm going to use ID. So HemotypHTag, second. Second, is that the Carles, I'm going to use color property. Color. And this time, I'm going to use green color. Green. If I set this file, now you can see this time it provides priority to the ID selector. No matter what, if I change the er, so I'm going to copy this section. Sorry, I'm going to cut this section and paste it before the class name and set this file. Also, it return green color. As I told you, this time it provides priority to our ID selector. And now I'm going to use Inland styling method. So here, I'm going to use style attribute style and I'm going to use color property, color. And here, I'm going to use orange color. Orange. And I'm going to sub this file. After I sub this file, now you can see it provides priority to the Inland styling method. But now, how we can use the important hack? Suppose I want to provide priority to the blue color. I want to say the clus selector. To make it important, just her into type space exclusion sign important. If I set this file, now you can see now this time it's going to important the ID selector. At the same way, if you want to provide priority to the red color, I want to say the element selector, to type the important keyword up the vil. If I set this file, you can see the result. And remember, this is not mandatory that you can use this hack only with the color property. You can use this important hack with any property. You can use it with font size, padding, margin, whatever. So this is it for this tutorial. I hope now it's clear for you how we can use this hack. Important hack. So thanks for watching this video. Stay tuned for the next tutorial. 129. CSS3 @supports Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we are going to learn a new selector, which is at date support. Now the question is, what does it basically do? Basically, we use this selector for feature detection in the browser. I want to say new CSS property otherwise value supported by browser. Suppose we have a CSS property called GED, display grid. This CSS feature is supported by Chrome, Firefox, Sapai, ge, et cetera. But to know that which browser going to support this property and value, we need to use the support selector. Using that, we can type different CSS for different browser. So basically, we use it for conditional based CSS. That's why sometimes we called it conditional rule. Now let's see how we can use it in our CSS. At first, you need to type Adiate support. Then inside the round resis, you can put your condition. Suppose we can check for display grid condition. So now the question is what it going to do? Whenever a user open the web page in their browser, then this support going to check this condition. Is that browser support display grid property or not? If it support the condition, then it's going to run the CSS. Suppose we type Addid support, and in our condition we pass display grid. If the browser support the grid value, then we can assign the main ID display grid. But if the browser is not support this property grid, then we can type different CSS for this element. Not only that, also we can set opposite condition using support, something like that. Add support, not disp grid. It's main if the browser is not support disagreed property, in that case, we can assign the CSS display block. Not only that, we can use the selector with multiple conditions. Let me show you that. As you can see with the support selector, here we used to two condition, display flakes or display webkit flakes. This is the prefix of Chrome browser. This is two different condition. If one of the condition is true, other one is false, then it's going to run the CSS. And if both the condition is true, also it's going to run the CSS to check the multiple condition, how we use or operator, but we have another operator, which is operator. So as you can see between the multiple condition we use and operator, I both the condition is not true, then it's not going to run the CSS. But if we use Okword if one of the condition is true, then it's going to run the CSS. So if the browser support grid and inline grid, then it's going to run this CSS. In this example, as you can see, He used to the two condition, but you can use a multiple condition at once. Just on to use or keyword, otherwise, and keyword between them. So let's start the practical and see how we can use this selector, a direct support. So as you can see, side by side, I open my visual studio code editor and my browser using Lifesaver Extension, and I already created an ML document named index dot HTML. So at first, I'm going to type Style tech. Style. And inside this style tag, I'm going to use support selector. At the rate supple supports. Then inside the round ress I'm going to set the condition. I'm going to say display, and I'm going to use flix display flix. Then inside the Cariss we are going to select our body tag. We are going to select the body tag. Body is the calibracs. I'm going to use background property. Background, and I want to apply background orange color. Orange. If this condition is true and this browser support flex property, then it's going to change the background color. If I set this file, as you can see, now, our body color background is orange. Now, let me use a propriety, which is not supported by Chrome browser. So for now, I'm going to remove dis flakes and her to type box decoration brick, box decoration brick, and I'm going to use slice property. Slice. Also, we need to remove this semicolon. We don't need this semicolon in our condition. If I set this file, as you can see, now it do not apply the background color orange because this property and value is not supported by Chrome browser. To use it, we need to use we need to use webkit prefix. So this property is not supported by Google. But if I use not cured supports not then apply the orange color. If browsers do not support this property, then it going to apply. So after set this file, you can see the result. Now you can see it apply orange background color to the body. Now, let's use multiple condition. For for that, I'm going to use operator. So for now, I'm going to remove this not cured and hemo type. Or in the round brress I'm going to type display flex. I'm going to remove this colon. I'm going to set this file. After I set this file, you can see still background color return orange because this time one of the condition is true. That's why it return orange. If both the condition become fails, then it's not going to apply the background color. Let me show you. So to make this condition fails, I'm going to apply the same property. I copy this property and replace the fails with that. Then I'm going to change the value of this property. Now I'm going to apply clone value. Clone. If I set this file, as you can see, now both the conditions fails, that's why we do not apply the orange background color to this body. So this is how operator work. Now, let me show you and operator. This time, I'm going to replace A with and and I'm going to sub this file. After sub this file, still, you can see it do not apply orange background color. And now I'm going to make both the condition true. If both the conditions fails, then it's not going to apply the background color. But if I make both the condition true, Sootide display flakes. Also, I'm going to change this condition, which is position absolute. And we need to remove this semicolon. We don't need to put this semicolon in our condition. If I set this file, now you can see it changed the background color because if we use operator, then you need to make sure if both the condition is true, then going to apply the background color. But if one of the conditions fails, then it's not going to apply this background color. So if I make one of the condition fails, box decoration break slice and zip this file. As you can see, again, it do not apply the CSS. But if I use or operator here and then zip this file, now it's going to apply the orange color because now one of the condition is true. So this is how support work. I hope now it's clear for you how we can use it. 130. CSS Placeholder Shown Pseudo Class Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related CSS. And in this tutorial, we are going to learn a new posto class, which is eslder shown. I know you are already familiar with placeholder. We used placeholder in our input tags. Just want to use this attribute placeholder, then we can type any text. And this text worked as a label. And whenever we try to type something in this input field, it hide this label text. And if you want to styling related placeholder, then CSS introduce a new posto class, which is placeholder shown. And it is work only with Total two tags, input tag and text area tag. So let's start the practical and see how we can use it. As you can see, side by side, I open my visual studio code editor, and my browser using Live Server extension, and I already create an TML document named index dot TML. As you can see in our body tag, we have a from tag, and instead this from tag, we have total four input field. We have to two text input field, one number input field, and one email input field. First, we need to provide name, then provide address, then we need to provide number, and at last, we need to provide email. I already style this input field according to my needs. And whenever I try to type something in this input field, suppose add one as you can see, it hide the label text. And now I want to show border to this input field until I type text in this input field. I want to say until you remove the label text. For that, we need to use placeholder shown poseido glass selector. So here, I'm going to type input. Then I'm going to use poseido glasses. And here I'm going to type placeholder shown. Then I said the class, here, I'm going to assign border. Border, I want C pixel solid border. With that, our border color is red. After set this file, as you can see, it apply red border color in our input fields. And whenever I try to write something in this input field, it removed the border color. It removed the border. Let me show you. Suppose if I type hello, as you can see, it removed the red border color. At the same way, if I type in the second field word also you can notice it removed the red border color. If our placeholder is active, only there we can apply these properties because here we use this Posido class, placeholder shown. And if I remove the content from this input field, then again, it apply the placeholder shown proprieties. So that's the main usage of placeholder shown Posido class. And remember, placeholder is not work on every input field. If I duplicate this section and change the input type input type date. They set this file, and next, I'm going to change the placeholder text entire date. And then set this file after set this file, here you can see the date field. But you can notice it do not apply D placeholder shown properties because this poseudoclas selector do not work on date, time, month, week, et cetera, and you need to remember that. And if you want to target any particular input field, yes, you can. Suppose you want to target only takes type input field. For that, here you need to use square sis. Then you set the square resis here you need to provide type. Type equal to inside the double codes, otherwise, single codes, you need to provide the input field type, which is text. If I set this file, here you can see the result. This time, this positoglass selector only work in text input fields. So this is how it's over. I hope now it's clear for you. Thanks for watching this video. Stay tuned for the next tutorial. 131. CSS List Style Type String Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. In our previous tutorials, we'll learn about style, and we are already familiar with is tile type property. And this property introduce a new value, string. Now, let's try to understand what is that. If we talk about unordered list, as I told you, we have total three value, disc, square, and circle, and it looks like that. If we use digs value, then it's going to return a solid dot. And if we use square, then it's going to return a solid square. And if you use circle, then it's going to return a unfilled circle. Now, without this three value, we can pass string value. As you can see in this example, here we use a shape. It is not an image. It is an ML symbol. At the same way, we can use different symbols, something like that. Also, we can pass string as a style type. In our case, Wow. Now, let's start the practical and see how we can use it. 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 estable document, named index dot stem. In our body tag, here you can see nodal list, and we have total five item in this list. And now I want to stayle this nodal list. For that, I'm going to select the UL tag. UL inside the Cariress I'm going to use the property is tile tie. Style type, and here, I'm going to use string value. To use this string value, just we can pass this string value inside the quotation. So inside the double quotes, I'm going to pass demo. After I set this file, you can see in my browser, it replaces all the bullet points with this string demo. So this is how we can pass any string here. Suppose if I provide space, hyphen, and the set this file, now it look more bitter. Also, we need to change the position. By default, it is opposite. So here I'm going to use a property is style position, style, position inside. If I save this file, you can see the result. Now, let me show you how we can use symbols here. To use the table symbols, we need to search for it Google. So just search for STL symbols. Lot of website provide a SML symbol such as three School, Toptal, et cetera. So I open one of this website. First, I'm going to open Top tell. So as you can see, there are multiple SML symbols. These symbols are not available in our keyboard. If you scroll down this page, you can find a lot of symbols. And now I'm going to use one of the symbol. Suppose I'm going to use I want to use this cloud symbol. To use this symbol, just you need to select the symbol and then press Control C to copy this symbol. And now we need to go back to our document. And here, I'm going to rip this demo with this symbol, Control V, this Cloud, and I'm going to set this file. After I set this file, if I open my browser, here you can see the result. Now, list type replace with the symbol. From here, you can use any symbol. Suppose if you want to use this phone symbol, just you need to copy this symbol and you need to paste it here. I'm going to replace Cloud with this symbol and then just provide a space and set this file. After I set this file, if I show you my browser, now you can see the resint. It replaces Cloud with this phone symbol. From this website, you can find all type up symbol. Suppose if you want to use currency symbol, then just click for currency. And if you want to use MT symbols, then click for math symbols number, whatever you want to use. At the same way, other website provide the same kind of symbols. So this is how we can use it. Here we can pass sting also, we can pass any symbol. So I hope now it's clear for you how we can use this new Video stream. So thanks for watching this video. Stay tuned for the next tutorial. 132. CSS Scroll Behavior Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related CSS. And in this tutorial, you are going to learn a new property related CSS, which is scroll behavior. At first, let me show you an example, what can we do using scroll behavior? As you can see, here I open a web page, and we had netbar and in our netbar we a pole three link, one, two, and three. And here, in this example, I use internal linking method. So if I click on one, then it's going to redirect to Section one. If I click on three, then it's going to redirect me Section three. But if you notice, you can see if I click on any of the item, our scroll word shift to the position. If I click on Section two, you can notice our scroll word going down. We can create this scrollbt transition using scroll behavior property. But what? If we do not use the scroll word transition property. If I comment out this property, scroll word behavior and back to my web page and rear my browser. If I click on Section one, as you can see, now, you cannot feel any transition. It instantly jump to this section. If I click on Section three, now you can notice now our scrollbar do not move. You cannot feel any transition. That's why scroller behavior is important. So let's study practical and try to understand it. As you know, in SDML we have Anca tag, and using Anca tag, we can create three type of links external link, internal link, and another one is email link. Without this, there are a lot of links we can create using NCat tag, such as download link, telephone link, so I'm not going to talk about that. Our main topic is scroll behavior. If you want to use scroll behavior, you need to use internal page ink, and we can use internal page link in our document. Otherwise, we can use it in a db element. Here we can use overflow hidden, otherwise, we can use scroll property to create this scroll bar. We can use scroll behavior when we have ana data to scroll in our page. If you want to use this property in your document, in that case, you need to use it inside the TML tag. And if you want to use it in a deep tag, then you need to select this dip tag, and you can assign scroll behavior propriety. And in this propriety, we can pass total two value, Auto and smooth. Auto is the default value of this property. It's not going to change anything. But if you use smooth value, then it's going to change your scrolling behavior. So without wasting your time, let's start the practice 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 Lip server extension, and I already create an ETML document named index dot html. So here you can see a basic layout. If I show you my estimate structure, here you can see, we have a neb bar. This is our n bar area, and we have to dull three neb item link. For now, we do not provide any link in our anchor tag. Then we have sections. This is Section one. This is Section two. And this section made with section tag, and at this section tag, we have H two tag, heading two. And as you can see in every section, we assign an IT. This is for Section one, ID one, ID two, ID three. Now, as you can see, we have enough scroll area in our page. Now I'm going to use internal linking. If I scroll down this page a little bit, as you can see, our Nb bar stick to it space. Here you can see here we use N bar position, top zero. That's why it stick to its own place. Now I'm going to use internal page linking. At first, I'm going to link Section one with number one ancha tag. To link this, I'm going to use its ID name one. So to link this ID, HTG one. This is internal page inking method. Then I'm going to link Section two, hashtag, two. At last, I'm going to link has tag three. And I'm going to set this file. After set this file, if I tlck on Link number two, as you can see, it redirect to Section two. At the same way, if I click on Link number three, it redirect to Section three. But the problem is, if you notice this scroll behavior, if I click on number one, instantly it's jump to number one section, but I don't want it. I want smooth transition in it. So to resolve the problem, we can use scroll behavior property. So here, I'm going to create a selector in our style section. Before the body tag, I'm going to select TML tag, the whole SML. Then inside the Cali resis, I'm going to use the property, scroll behavior. And I'm going to use smooth value. After set this file, and if I click on number three, now you can see a smoothing effect. At the same way, if I click on number one, you can notice it redirect to number one, but it scroll page. So this is what we can create using scroll effect. If you want to assign it in your role page, in that case, you need to select the TML tag. Otherwise, you can use it in a deep element. So this is it for this tutorial. Thanks for watching this video State even for the next tutorial. 133. CSS File Selector Button Pseudo Element Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, you are going to learn a new posto element, which is known as five selector button. Here you can see the list of all the posto elements, and we already covered this posito element in our previous tutorials. In this lead, it had a new positive element, which is five selector button. Now let's try to understand what can we do with file selector button. In HTML, we have a tag known as in and this input tag come with different type of vados such as text, email, submit, et cetera. At the same way, it has a value. Whose type is file input type file. After use file type in our input tag, we can see this kind of button in our browser. Choose File. After I click this button, we can choose any file type. I know you are already familiar with that. But if you notice you can see, always it's come with gray color. On the other hand, we can style buttons, we can style any other elements. But till now, we cannot change the color of this file dye. We cannot assign any color to this button. And if we want to do it, then we need to take Hellbog Java screen, and it is a very len process. I want to change the color of this input button, something like this. And this is possible only through the Posidoglass file selector button. Let's start the practical and see how we can use it. As you can see side by side, I open my results studio code editor and my browser using live server extension, and I already create an tML document, named index dot HTML. At first, I'm going to create the TML structure. So I'm going to use front tag. And inside the front tag, first, I'm going to create a label, label, and here I'm going to type a text. For this example, I don't need this four attributes. I'm going to remove it, and inside this label, I'm going to type upload five. After that, I'm going to use input tag. Input. Input, Ti I'm to set TIF. Also, I'm going to assign an ID to this input tag. ID equal to upluot. Then I'm going to set this file. After I set this file, you can see the result in my browser. So I done over estimable part. Now we style the input tag, this one. So inside the head tag, I'm going to type style tag. Style. We can target it using our ID name upload. Also, we can target it using its type. File. So I'm going to select it using its tie. So here, I'm going to type. First, I'm going to type the tag name input. Then inside the square ss, I'm going to provide the tie, which input type I'm going to select. So here, type equal to file. And now I want to change the background color of this input type file. But I cannot do it directly. We need to use the PosidoGlass file selector at first, we need to tie to semicolor. Then we need to pass the posito selector name File, hyphen selector, hyphen button. This is how we can use this selector. So at first, I'm going to change the background color. So type background color, and I'm going to set it red. With that, I'm going to change the border color. Bordered. I want two pixels solid border, and the border color is green. Now let's set the file and see is it work properly or not. After set this file, as you can see it worked properly. Now add some little pad padding. Ten Bigel from each of the direction. Also, I'm going to change the text color. Color. Why? Apres at this file, you can see the result. Now you might have tiin. What? If I remote this selector, if I remote the PostoGlass, let me show you. So if I remove the PositoGlass and just select the input type file and this at this file, you can see the result. It's not worked properly. Now it add diagram color to the whole section. That's why we need to use this Positroselector, file selector button. If I save it again, you can see the result. Now, if I click on this button, we can choose any type of file. Suppose I select this landing image. You can see the name of this image, landing dot JPG. Not only that, also you can use Hobart PosidoClass with that. So I'm going to duplicate this section, and this time, I'm going to use Hobart selector. Colon Hobart. This time, I'm going to change the background color only. I'm going to use the darker version of this red color, something like that. And I'm going to set this file. After I set this file, if I hober my cards down on this button, you can see the result. It's change its background color. So this is it for this tutorial. I hope now it's clear for you, how we can style our file selector buttons. So thanks for watching this video stay tuned for the next tutorial. 134. CSS Backdrop Filter Tutorial: Hello, guys, good to see you. Once again, I'm back with a new tutorial related CSS. And in this tutorial, we're going to learn a filter known as backdrop filter. Suppose we sten background image in our TML body tag. Otherwise, we can assume that we sten background image to a deep tag. Now, in this deep element, we have another deep element. Also, this deep come with background color, border, et cetera. Now, I psically don't want to provide any background color to this deep leen. Something like that. It's a transparent. Otherwise, I can fit it with low opacity. But now I want to assign a filter to the inner dip ignit and to make it possible, CSS introduced the filter, which is known as Brop filter. Using this filter, we can assign any effect to the inner deep element section. But we do not add any effect to our main deep element background image. Don't worry about it, we are going to do it practical. Also, this backdrop filtered property come with some predefined weight. Let me show you. So these are do that we can use with bagrap filtered. These are all effects, blur, brightness, contrast, drop shadow, gray scale, hue rotate, invert, opacity, spa, saturate, and none. Now let's start the practical and apply all the filter one by one. So as you can see, side by side, I open my results studio code editor and my browser using Live Server extension, and I already created an estimate document named index dot table. So as you can see in our estimate document, is at the body tag, we have a Da De ID container, and in our style section, I style this deep Em. Here I s with 600 pixel, height, 800 pixel. Also, you said border, 500 pixel, solid border. Then we add background image to this continent, background URL nature dot JPG. Now inside this continua deep element, I'm going to create another debt, some type deep and I'm going to assign an ID to this development, ID equal to Ian. Then I'm going to style this development in our style section. At first, I'm going to select this debilmin using its ID name, inner. Then the calices, first, I'm going to set weed. Weed, here I'm going to say 400 pixel. Next property, I'm going to use height, height, I'm going to set 250 pixel. Also, I'm going to say it background color. Background, and I want white color background. So I'm going to use Hix HH. Next property, I'm going to use border radius, border radius, and I'm going to set border radius five pixel. Also, we need to assign border with bordered border with, I want two pixel solid border, solid. And I want to say border color white. Hashtag KSH. And I'm going to set this file. After set this file, this is what it creates. Now, I want to remove the background color of this inundate plate. So I'm going to comment out this line, and I'm going to set this file. After set this file. Oops. He we need to use only border property, not with property. Border, only border. If I set this file, this is what it creates. Now you can see we have a transparent deep element with solid to pixel white border. And now we need to move this inner deep element vertically and horizontally center. And to align it, I'm going to use a property display flex. So in our parent container, I'm going to type I'm going to tie the property name display flake. And align it align items center, center and justify contain also center. After set this file, you can see the result. Let's increase the inner t border we to make it more thar. So to pass, five pixel. Up to set this file, now it's more visible. And now I'm going to apply backdrop filter in our inner deep element. So we can see the image filter effect through this deep element. Now it is time to use the property backdrop fitter, sum type, backdrop, backdrop filter. And first, and the first video, I'm going to use blurred. It is pin's favorite ve. Here I'm said blur to pixel. After set this file, now you can see the blood effect through the inner deep element. Now you can see the blood effect through the inner dip element. And if you want to increase the blood version, just increase the value. If I make it six pixel blur and then set this file, now you notice it make this portion more blur. Not only that at the same time, you can add, you can add background color to this inner deep element. Let me show you. Suppose I'm going to use this property background color, and here I'm going to use RGV value. We are going to use Alpha value for transparency. So type RG, BA, inside the round ress I'm going to type 255 white color, 255 and 255. And for Alpha Val, I'm going to take 0.2. If I set this file, you can see the result. And if I increase the value of transparency, if I make it 0.5 semi transparent and then set the sple now you can see more whiteness in this blood effect. And remember, we do not set any effect in the background image. Here we use effect in our inner deep element section. And if I use any content in this inatp element, it's not going to affect the content. Let me show you. So inside this innatp element, I'm going to add a heading to tat 'motie hello. Why? And I'm going to say alignment text alignment center, text align center. And I'm going to set this file. After set this file, you will see the result. Now you can see it not going to effectively quantate which is inside the inactive elimate. Now, let's talk about the next wow. So at first, I'm going to comment out this background color property. And then I'm going to dig at this line and comment out previous line, and I'm going to replace blur with brightness. Inside the long races, he will need to pass value in percentage. Suppose if I use 60% and this at this file, now you can see it reduce the brightness of this inner section. And if I make it 10% and this at this file, now you can notice more brightness drop in this portion. And if I pass 100%, this is the deferred value. Now it's accurate. But if I want to increase the brightness, we can pass more than 100% value. Suppose if I pass one 50% and this up this file, now you can see it increase the brightness of this inner section. If I make it 200, now it's more clear for you. So this is how we can use this feeder brightness. Now let's jump into the next filter, which is contrast. So I'm going to br this line and comment our previous line and rip this brightness with contrast. Then you said the rounder says, I'm going to pass 40%. Then if I satisfy, you can see the result. In this also need to pass percent d unit. Now you can see the doneness effect in this portion. And if I make it 100%, as like brightness, you can see the exact image. Now if I want to increase the contrast, suppose something one 50% and the set this file, you can see the result. Basically, contrast going to effect on colors. It can reduce the color amount. Also it can increase the color amount. If I make it 200%, 200% and the set this file, you can see more contrast at the section. Now you can notice at that portion, shadows are much more visible. Also, green color is highlighted. Now, let's talk about the next filter, which is u rotate. I'm going to duplicate this section and comment out previous line. And I'm going to tie back to filter H rotate. Then I set the round pra is here unit pass here unit pass degree unit. So here, I'm going to pass 120 dg degree. And if I set this file, you can see the result. If you work in Photoshop, then this option is pretty familiar for you. If you change the degree value, it's going to change the image color. Suppose if I make it 150 degree and the set this file, you can see different color on sleeps. And if I make it only 90 degree, you can see different result. And we can increase the value up to 360 degree. If I pass 360 degree and the set this file, this is what it w. Now it look exactly the same. And if I make it one degree one degree and let's set the file, now you can see there is no different. But if I increase the value a little bit, something 40 degree and this at this file, now you can notice the changes. Now, let's talk about the filter. So I'm going to duplicate this section and comment on previous one. And this time, I'm going to use invert Vale tie invert. This value provide you exactly like clean negative effect. So here, you need to use percent this unit. So if I make it 60% and then set this file, this is what it. Now it's looked like flam negative. And if I make it 100% and then set this file, now it's completely looked like flame negative. Now, let's talk about the next filter which is SIPEA So to duplicate this line and comment of previous line and replace invert with SIPEA. And also it take percent this unit. So for now, I'm going to pass 50%, and I'm going to set this file. After I set this file, you can see the result. Basically, it can provide you a little bit of vintage effect. If I make it 100% and set this file, you can see the result. Some popular movies and video use this filter. Now let's talk about the next filter, which is saturate. So I duplicate this line and comment on previous one and replace CPR with saturate. Saturate 100%. If I set this side, you can see the default image. If you reduce the value and make 10%, it's going to remove the color. Now it's going to look like black and white, something like that. And if you want to make it full black and white, just pass one person, otherwise 0%. It's going to make the whole image black and white. You can experiment with it to get different results. Not only that, you can use multiple feeder at once, it show him. So I'm going to duplicate this line and comment that previous one. This time, with that, I want to use invert. So first, I'm going to use blur value, blur and I'm going to use two pixel die. And then, then I'm going to use invert B. Invert. Invert value, I'm going to use 100%. If I set this file, you can see the result. Now you can notice with the dire also you can see the invert filter. So you can use multiple filter at once as much you want. Now, to make this effect more impactful, I'm going to use Hover effect. So at first, I'm going to select the inner dip tag, has tag, inner. Then Colon, I'm going to use Positoselector Hober then insert the Caira says, I'm going to use this filter bank draw. Copy this section and I'm going to paste it here. And also, I comment out this option, and I'm going to set this file. So if I over my cursor on this section, you can see the effect. Also, let's add some transition to make it more animated. So here, I'm going to use property called transition. Transition. And I want to add transition effect particular backdrop filter. So I'm tied back, drop filter. And for transition timing, I'm going to use 0.3 second. And I'm going to set this file. And if I over my cursor on this image, you can see the result. And if I increase the transition time, Sabin and set this file and over my cursor on this element, you can see the effect. Now you can see the beautiful transition effect. So this is it for this tutorial. I hope now it's clear for you how we can use backdrop filter. So thanks for watching this video, Sduned for the next tutorial. 135. 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. 136. CSS Text orientation Tutorial: Hello, guys. It's good to see you back. Once again, I'm back with other tutorial related CSS. And in this tutorial, we are going to learn CSS text orientation. The property call text orientation depend on another property, and we already covered this property in our previous tutorial, which is writing mode. Until you use writing mode property, you cannot use, you cannot use text orientation property. Suppose we have a deep element and instead this deep element, we have a text. Now I want to rotate this element at 90 degree, something like that. In writing mode property, we have to t two value, vertical RL and vertical Ea. If we use this to value, then we can rotate any text. Using writing mode property, we can rotate this text like this, but I don't want this kind of text. I want this result. In this example, as you can see, we type the text vertical. And if you want this kind of text deft for that, CSS introduce text orientation. Also, this property come with some predefined value. Let's see. It's covetotal four value, mixed upright, sideways, sideways right, and the mixed is the default value of this property. So let's start the practice and see how we can use it. Finally, 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 an est document named index dot TML. In the body tag, we have an ding named taste. And also inside this body tag, body tag, we have heading and a paragraph. Then I style this dip tag using its taste. First, we assign with 550 pixel. Then we assign a border, a solid black color border. Also we say for. 70 pixel aerial font, and there is it padding ten pixel. Now I'm going to rotate this whole deep section 90 degree. For that, I'm going to use a property called writing move here I'm going to use a vari called vertical RL, this one, RL stands for right to left. Now, if I set this file, as you can see, it rotate our text. If you change the orientation, then just interchange the value AR two RL, RL two AI. If I pass R and the satisfied, you can see the result. Now orientation start from left to right. But for this example, I would like to go with RL. And now I'm going to use another property called text orientation, text orientation. At first, I'm going to use this value upright. After satisfied, you can see the result. Now you can see our text become vertigal heading, paragraph, or text type in vertigal. If I use another video called mixed and this this file, now you can see it's back to the default wont. If you don't want any changes, then text orientation have mixed wave. Most of the time we use this effect where we need to type vertigally. Otherwise, if you have website where you need to put mended in otherwise any Chinese language, then you need these effects. Chinese otherwise mandarin always type in top to bottom. That's why we need upright, upright, and the remaining two other value, sideways and sideways right is not supported by any browser. It is not supported by Mozilla, not supported by Google, Opera, any browser. This is it for this tutorial. I hope loud it's clear for you. How can you use text orientation? 137. CSS Focus within Pseudo Class Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn a new posero class, which is focus with it. Now, let me show you how we can use this new class. As you can see in this example, we have a deep element, and inside this deep element, we have to t four fields, name, edge, Zender and a button. And now I want to change the background color of this deep element when I focus on any of the input field. If I focus on name, otherwise, Zener or a button, it going to change the background color of this deep element. Something like that. Basically, we focus the child element and style the parent element. It is not possible before, but now it is possible because now we have the new glass focus within, and we need to use this Posido class in our parent deep element. It could be parentp otherwise any parent element. If we focus any of the input field which is inside this parente element, then it's going to effect the parende element. Now let's start the practical and see how we can use focus within in our projects. As you can see side by side, I open my Visual Studio code editor and my browser using Live Server extension, and I already create an ML document named index dot t. As you can see this TL page, we already create a login form. In this login form we have total four input field, such as entered username, entered password, login button, and Cancel butt. So as I told you, we are going to use we are going to use focus within posterior glass. For now, you can see how is it from background color white. When I focus on any input field, as you can see it do not change the background color. Now I want to change parent emate background color, upper focus the element. After focus any of the input field is at this form. For that, we need to use a PositoGlass. So here, I'm going to type from colon and our positoGlass name is focus weening focus ing. Then inside the Carrass, I'm going to use Bagnoroperty. Background. And here, I'm going to send background color yellow. I'm going to set this file. After set this le, if I click any of the input field, as you can see, it's changed the background color of this form. Because as I told you, using this PosidoGAS selector, we can select the background dB element. We can select the parent deep element, and if I click outside of this form, again, it back to the white colored. This is how this positroGLs work. It can select the parent deep element using child De element. If you click any of the button or any of the input field, still it changed the color. I hope now it's clear for you, what can we do with this Pozioglas selector? Thanks for watching this video, stay tuned for the next two tio. 138. CSS Display Table Tutorial part 1: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related CSS. And in this tutorial, we're going to learn this the table property. We already learn about this the property in our preface tutorial. We learn the flex, the grid, this the inline block, et cetera. But they come with another d which is table. In our previous tutorials, we already learn about display properties such as inline block, inland block, last active flicks, grit, inland flick, inland grit, et cetera. But in this tutorial, I just try to cover this one. They will sell, they will row, et cetera. Now, let's try to understand what is table and how they will work with display property. Sometimes we need to create table in our web pages, something like that. As you can see in this table, we have to draw three row and two column. We can use this table in multiple ways. We can show stuben results, account details, et cetera. For that, STML provide a special tag. It is known as table tag, something like that. Inside the table tag, to create table row, we need to type TN and to provide the column, we need to use TD. According to this example, we create total three table row. And also, we have total two colon in each row. But now the problem is, I don't want to use any table tag for a table. I just want to use only the deep tags, something like that. I want to use Di tag to create the table sales, TV row and tab structure. As you can see in this example, Herald do not use any table tag, just to use deep tag to create the same structure. Our first tag, which is in black colored, it's going to work as a table tag. Then which is in le colored, it's going to work as a table row and the green one work as a table column. But it is not very easy to create table like this. To resolve the problem, CSS introduce a special property, which is display table. And we need to use this display table property at the outer div, which is the paren div element. And for the rows, also, we need to use a special property called display table row for the table cells, for our columns, we can use this table cells property. This is how it's going to create the same stable structure using display property. So let's start with practical and see how can we create the TME using this three for property. So as you can see side by side, I open my is Studio code editor and my browser using LiveServerEtension, and I already create an ML document named index dot HTML. So as you know, we are going to create TV using deep tag. So inside the body tag, first, I'm going to take a deep tag with ID name tib. So here I'm going to type has tag table, and I'm going to hit Enter. And inside this table tag, I'm going to take three column. For now, I'm going to take three column. I'm not going to take any row. So I'm going to type dot, and I'm going to assign class name to our columns. So our class name is call. And I'm going to hit Enter. In our first class, I'm going to type A. Then I'm going to duplicate this line two time. This is BN. This is B, and this one is C. Now we have a table width three column. And now I'm going to style this table. So at first, I'm going to select the ID Hastag table. Then inside the car resis, I'm going to use a property called display table. Next, I'm going to select all the columns. I'm type dot COL. Inside the Carli resis, I'm going to add border. I'm going to add border. Border, I want one pixel solid border and our border color is black. Aztag 000. And I'm going to set this file. Up to set this file, you guys see this result. Also, I'm going to add weed to this table. For that, hern tight weed, 800 psil. Also, then I'm going to add bored, bordered one pixel, solid border, and the border color is black. I want to set this file. Upset this file, this is what it creates. I think 500 pixel width is an up, so I'm going to make it 500. Up to set this file, as you can see in my table, we have total three row. But now I want to make them call. Up to A, I want to print B, then I want to print three. I want to print all of them in a single row. For that, I'm going to use this property again. So inside the call class, have type display. And I'm going to use display table cell, Tamil cell, and I want to set this file. Upset this file, you can see the result. Now in our we have only one row and three coal. Also, I want to make this table center of this page, so I'm going to use margin property in our table. Margin, zero and auto. Ups up this file, you can see the result. From bottom to top, it would add zero margin and from left to right, it add. Now, here you can notice all the table cells are equally divided because we don't have enough content to expand any cell. If I add something in this B cell, suppose low rim I want to add five word. Then satisfy, you can see the result. Now you can see it expand the B column and reduce the size of A and C column. Now we can provide fixed width to this middle column. Suppose you want to assign 200 pixel width to this middle column. For that, you can use Inland styling method. So hero type style equal to with 200 pixel. If I set this file, you can see this result. Now we cannot extend the table cell size more than 200. Now I'm going to add two more collars. I'm going to duplicate this line to time and I'm going to name it B and this one is E. If I set this file, as you can see, except the D column, all the columns are equally divided. So in this example, He create a TV with only one row and we have multiple column in this row. But if you want to create multiple row for that, we need to create parent D for all the column deeps. It is pretty similar to Tata. We know that in TV Tia tag represent Taviow and TD tag represent Tavil column. So let's create a row. At first, I'm going to select all of this section and I'm going to cut this section and then inside the DV tag, I'm going to create a row. I'm going to tie dot Row. Inside this row, I'm going to paste all the coups. This time, I don't need these unnecessary columns, so I'm going to remove D and E. As I'm going to place it inside the indentation level that you can understand row and column very cleared. With that, I want to create another row. So here I'm going to tie dot row. And inside this row, I'm going to create multiple columns. So first, I'm going to create some type D dot C. And I'm going to put a name which is D. Then I duplicate this line, and I'm going to make this one E. And I want to set this file. So in our first row, we have to le three column, and in our second row, we have to do two column. And then I'm going to remove the extra data and make this one B. With that, I don't need this style, so I'm going to remove it. And I think for now, I get to go with three column to understand it better. So I duplicate this slide again and I'm going to tie and save it again. So we have to do two do and three column in each row. Now the problem is after set this style, now you can notice we don't have any weight to our elves. This is because we do not style the row class, so we need to style the row. So I'm going to select this class, so I will type dot row inside the curly resist. I'm going to use the property. Display table row, this one. If I say this file, you can see the result. Now I'm going to add real student data in these codoms. For that, first, I'm going to pass rule number one, then I'm going to pass student name, add one, and last, I would pass total Marks, which is 250. Then again, in our second row, I'm going to pass Roluba two, and name is Rahul or scoop be capital and total number is 300. Then I duplicate this section, this row. Now we have total three, and this is Roluba three name is Ravi total mark is 350. Now let's set the file and see if it to work properly or not. Up to set this file, you can see the result. In our first column it prints all the roll number, then it reread all the names and at last we print total numbers. Now, let's add it padding to the sales. For that, we need to select column and add padding. Padding, all of the direction I want to add five pixel band, and I'm going to set this file. Up to set this file, this is what it looks. Now our table is ready, but we don't have any heading in this table. So in the next part of this tutorial, we are going to learn how we can add heading using these perties. So this is it for this tutorial. Thanks for watching this video stay tuned for the next tutorial. 139. CSS Display Table Tutorial part 2: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related display table property. In this tutorial, we're going to create header and footr using display property. To create this kind of heading in a table, ST will have special tag, which is TH tag table header. But we are going to create this heading section using deep tag to create this kind of header using deep tag, first, we need to take DV then insert this deep tag, we need to take this three column. As we need to use a special CSS property called display table header group, we need to use this property in the parade Develen. Using it, we can create heading of a table and at the same way, we can create table footer, something like that. As you can see, it's an employee table and we have employee number, nap, and celery. Here you can see this is our footer section, and at last we print total celery. To create this kind of footer, also, we need to take a deep tag and inside this deep tag, we need to create the columns and at the parent deep tag, want to use this ss property, display table footer group. This is how we can create a footer of a table. Let's start the practical and try to clear the coset. As you can see, side by side, I open my Visal studio code editor and my browser using live server extension. Here I open my previous estabil document. And as you know, in our previous tutorial, were using deep tags. But in this tutorial, we are going to create table header and table footer. So first, I'm going to create the header section. Inside this table blob, I'm going to take a deep tag, and I'm going to set IDHs tag table, underscore header. Then inside this block here, I'm going to create 23 co then. I copy this section and I paste it here. In our first column, I'm going to type row and in our second column, I'm going to type name. And in our third column, I'm going to type marks and I'm going to set this file. After set this file, this is what it looks. As you can see, it's not look like a table header. Now we need to style this deep element, table header. I'm going to copy its ID name, table header, and here, I'm going to type, hashtag, table header. Then inset Gali verses. Here I'm going to use a property display. Display, table header, go. This property. Also, I'm going to take a background color to highlight this role. Hero types, background, and I want something light blue color, light blue. Let's set the file and see is it work properly or not. After set this file as you can see, it's work properly. This is how we can create header of this table. Just we need to use this property. This play they will header. At the same way, we can create table footer. Let me show you. To create the footer, I'm going to copy this section and paste it inside this section, I'm going to change the ID name table header to footer. In our first column, I don't want to send any value, and in our second column, I'm going to type total marks. So do not nerds marks. In our last column, I'm going to print total marks. Which is 300 plus 350 plus 250. Now it's become 900 and I'm going to set this file. After I set this file, it looked like that because we do not use the display property. So first, I'm going to copy the ID name for this footer and then I'm going to select this. Then at the Cal first property I'm going to use display. Display and here, I'm going to use TV footer roof I want to set this file. After set this file, as you can see with create the footer. Also, I'm going to assign a background color, some type, background light green. I want to set this file. After set the background color, I think there is a problem in my code see, this is the problem. We need to remove it. Let's set the file again. Now you can see the result. As you can see, successfully create the footer portion. And if you want to make the text center, yes, you can you need to text align, align. You need to use center property. I'm going to use the sen property in footer and I'm going to set this file. With that, if you want to increase the font to it just you need to type font to eight. Font, weigh, and I'm going to use bond. I'm going to use the same property at the footer section, and I'm going to save it again. Now it looks like a complete tail. This is how we can create tavilhaded and footer section using deep tag. Just want to use this property with. But if you want to do the same thing using structure, proper Tim structure, for that, we need to use TH tag, but we can do the same thing easily with the display property. Now I'm going to show you how can we group table rows. We learn how can we group table header and tablefooter. Also, we can group table row and we can provide background color. Let me show you. For that, I'm going to move all the rows inside another deep. At first, I'm going to cut that portion. I select this portion and cut it. The, here I'm type another deep type Bev I'm going to assign an ID and IDName is row group. Row group. Then inside this row group ID, I'm going to paste all the rows. Then I'm going to use this ID as selector and jump to the style selection. First, I'm going to select this ID, then inside the alivss display, and I'm going to use row group in table row, go this one. I also going to set background color, background, and I want yellow background. I'm going to set this file. After I set this file, you can see the result. So this is it for this tutorial. In the next tutorial, we are going to learn coal group. Here we are going to learn how we can group any column. Suppose I want to group this column, I want to change background color of this room. I want to select all the columns. So we're going to learn it at the next tutorial. Thanks for watching this statue for our next tutorial. 140. CSS Display Table Tutorial part 3: Hello, guys. Good to see you back. This is the new tutorial related disp table property. And in this tutorial, we are going to learn table called groove. As you can see in this example, we have row number name and age. These are three colum and now I want to say background color to the name column, something like that. We already done the same thing for a row, but this time we are going to done it for a colum. To set the background color like that, CSS introduce another property, display called groove. Now let's see how we can use it. At first, in your table, you need to create a DV element, and as you can see in this Delmate a class called table C group. Basically, we try to create a table column group. Then you can mention the columns, how many columns you want to select and also you can ascend class to these columns. In our case, table column. In this example, HetyTtal two column. If you want more, then you can increase the column size. Also we need to use a special CSS property for this class, table call group, and we need to use this propriety. This play table column group, and for the column, we need to use this property. This play table column. This is going to create a color group and you can change background color with it. Let's start the practical and see how we can apply it. As you can see, side by side, I opened my Visual Studio code editor and my browser using Live Server extension and I already opened my previous Atable document name index dot t. Here we already create a table. Here we create table header, table footer, we have to doll three column, also we have to do three row. Now we need to create group using columns. So inside the table tag, here I'm going to take another dip tag and I'm going to assign ID call tbcll group. Table call group. Then inside this table call group, we are going to create total three colum because your table will have total three color. Here I'm going to type Dev dot and I'm going to assign class name called table color I'm going to duplicate it multiple time. If we pass any value in this column, suppose if I type this is COL call one, this is column one and I copy this value and psi here and replace one with two and replace this value one with three, and this at this file uppifle as you see, for now, it looks like that. But now I'm going to apply these properties. At first, we need to assign CSS property to this table call group. I copy this value and HemotyeHtag table call group. Then I set the calibss and here I want to use a property called this play this tb Column group. They will call a group, and also to select this child. They will C. Oops, there is a typing mistake in my class name. It should be E, not R. I correct it. And then I'm going to copy the class name and create a selector using this class name, Table C. Instead the cis, here, I'm going to apply the this lability. Display table coll This one, and I want to set this file. Up to set this file, as you can see, it hide all the data from the cols. Here you cannot see the data which we pass inside the dip Eins, such as Col one, call two, call three. Now we need to add different plusname to all of this column. Here type, this is l11. Then you copy the class name and this is L two. This is column two, this one is L three, column three. Basically, Hey group three different column roll name marks. Suppose now I want to add background color to the name color. For that, we need to select this column, call two. But before we apply the column background color, I want to remove the rogue book color. For that, as you can see, we need to remove this yellow color, so I comment out this line. Then I'm going to select this column group called two and create a selector. And inside the livers is, we need to apply the background color, some type background, and I want to say it pink. I want to set this file. After I set this file, you can see the result. We successfully group this name color and we set a background color to this name color. At the same way, if you want to add different color to the roll, yes, you can. Just to duplicate this e shot and select. This time, we need to select colon one, call one, and here I'm going to assign red color. I want to set this pi. You can see the result. Remember, you can only apply to property. You can change the background color of this column group. Also, you can increase column group width. Otherwise, you cannot apply other CSS properties. Let me preview that. Suppose in column two, I want to apply text line property, text align, and I want to make it center. I want to make all the name center position. So if it set this file, as you can see, it's not work. But if we apply with then then I'm going to set it 150 pixel and then at this file, you can see the result. Now it apply the we we can change the background color. Also we can apply with. Otherwise, we cannot apply thesis properties, such as textine, font size, et cetera. I'm going to comment out the line. I don't need it. This is only for example, and you need to remember that. Now let's talk about the last property of BSB, which is table cache. We can set heading using this lip purport. For that, inside this table tag here, I'm going to take a deep tag, DP and here, I'm going to set an ID called caption. Then inside this caption, I'm going to pass three tag. You can take any hearing tag. For now, I'm going to take three and types today information. Student info to set this caption, we need to select the class name. In our style section, some type dot caption inside the car verses, I'm going to pass the property. Display and here we need to use where you call table caption. Table caption this one. I'm going to set this file. After set this file, you can see the result. Also I want to make this capture center here I'm type text line, text align center. Then I want to make it uppercase, so I'm going to type text, transform, and I want to apply uppercase. Then I'm going to change the font color and I want to say font colored, color, and I want green color. I'm going to set this one. Here you can see we successfully create the table caption. We create the table header, table footer, we can group the rows. As we can group columns. We can do everything using this table property. Here, we don't need to create any proper table structure using TA tech, DD tag, we can do the same thing using Dip tag. I hope you like this tutorial. Thanks for watching this video Sadiun for the next Tutorial. 141. CSS Accent Color Tutorial: Hello, guys. Good to see you. Once again, I'm back with a new tutorial related CSS, and in this tutorial, we are going to learn a new property called ascent color. As you know, in a stable Fronk tag, we have to tell two special tags. One is check box, and one is radio. They both are input tags. If we want to get multiple values from multiple options, then we use checkbox and we use radio button when we need to get only one value from the multiple option. And wherever we check this box, otherwise, click this button. By default, it return blue color. But if you want to assign different colors, something like that, red, green, purple, yellow, in that case, CSS introduced a new property, and we call this property ascent color. Before ascent color property, we don't have any property that can change chapebx otherwise radio button colors. We can't change the default color earlier. To change this color, CSS introduced this property ascent color. So let's start the practical and see how we can apply this property. As you can see side by side, I open my is studio code editor and my browser using light server extension, and I already create an TML document named index dot HTML. So in our body tag, we have only one heading tag, and inside the body tag, here we see for family area and for size 16 pixel. Now inside the body tag, at first, I'm going to take from tag from. Then inside the fro tag. First, I'm going to take a level. I'm going to say level Hobbs. Next, here I'm take input tag, input, and our input type is Jack Wox. And also in toct a name for this input type name hobby. As hobbies, first, I'm going to type sports. Then I ubict this line multiple time and our next hobby is music, and our last ho is books. As you know, if you use checkbox, then user can select multiple options. Then for radiowtans I'm going to take another level. I'm going to take another lip. For label, I'm going to type ginger. Gender and here, I'm going to type input type. This one is radium. With that, we need to pass name name Zina. Then to pass, Valu male, and also we need to pass the let Min. Then I duplicate this line. This time I just change the value name, female. FE, not R, female, till I set this file. After set this file, you can see the result. These are on my checkbox option and these two are read due to button option. Now, if I click on any option, otherwise, multiple option, and if I take radio buttons, as you can see it return blue color. It's the default color. Now I'm going to style this input tags. Inside this style tag, I'm going to select input tag in then you set the cali verses. At first, I'm going to assign weed, we, 15 pixel. Also, I'm going to take height 15 pixel. I'm going to set this file. I set this file, as you can see, it increases the size of the check box and radio buttons. Now I want to change the default color. As I told you, we could change the color, we need to use a property called ascend c Ascend cur and you can put name, any color name, otherwise, any xa code, RG Value, et cetera. I'm going to type red cn, red, and I want to satisfy. After satisfied, if I click on any check box, as you can see now it sit on red courn. Also Wi radio buttons. You can use any type of color do. You can use HixA RGB, RGB, et cetera. Just one thing you need to remember. We can apply this property only with these two input tags, check box and radio. We cannot use it with textia, text, number, et cetera. We can only apply it with checkbox and do. This is it for this tutorial. Thanks for watching this video, stay tuned for the next tutorial. 142. CSS Prefers color scheme Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS. In this tutorial, we're going to learn about a new property, which is preferred color scream. Now, what is color scream? If you are Windows user, otherwise met user, then your user interface come with total two color mode, Lightp color mode and Darkap color mode. In Light aap mode theme, our browser and our browser layout come with light color, and I Darkap mode, our browser and our Browser Outer layout come with darker color. According to the user choice, user can select any of the light mode. Basically, before this media rule, we create website according to Light App mode, something like that. Here we use white color background, and black colored text. But what if users select the dark app mode? In that case, we need to compromise with the visibility. Something like that. As you can see the text turn rays visible compare with light a mode because this time it come with dark background color. Our text and the background both are in dark color. But now when we apply dark app mode, I automatically change the text color, something like that. Not only the text color, we can change thin color of this website. Also we can change any CSS property. It is possible because only for our new media rule, which is known as preferred color scheme. To use this media rule, at first, you need to type at the ate media. Then inside the round recess, you need to pass preferred color scheme, and you need to pass a id it is come with total two predefined wave, light and dark. If you choose light, then whatever CSS you write inside the clss it's going to apply only in light move if you choose dark, then it going only apply in dark move. Now, let's apply this new media rule. But before I apply this new media rule, I want to show you something. As you can see, open my browser and you can notice all are in light color. Now I'm going to change the color mode of my system and to change the color mode, just you need to search for dark. Then go to the SSW session and here, you need to search dark and from here, you need to select this option. Turn on dark mode. After open this setting, from here, you can choose any mode. So as you can see, Hart provided dropdown and by default, we already select light color mode. If I select dark color mode, then you can see, automatically, it's change our default browser color. Now our browser become dark. Inner layout outer layout become dark. At the same way, if I back to the white color mode, let me show you. I'm going to select light again. Now you can notice our browser again come with light colored. Now, according to this color mode, we can define different CSS for our website. Let's start the practical and see how we can apply it. As you can see side by side, I open my user studio code editor and my browser using if server extension and I already create an estiML document named index dot HTML. Now, as you can see in our body tag, we have a heading two tag and a Panagra. Now, at first, I'm going to assign a default background color to this body. So inside this style tag, I'm going to tie body at first, I'm going to select the body there inside the calses I'm going to assign background property, that round and I want to assign orange color, and I'm going to set this file. To use the media rule, as I told you, first, we need to type at the rate media. Then inside the round verses here, we need to type prefer color. Scheme here I'm going to apply light color. Then inside the car resis, I want to change the bedron property. I'm going to copy the body type with the bedroom property then inside the css, I'm going to paste it here and this time, I want to apply pink color pink. I'm going to set this file. After set this file, you can see the result. Now it apply pink color because if I search our color board, now you can see our color bodies line. That's why it apply the pink color. Now at the same way, I want to create selected for dark mode. For that, here, I'm going to dbgate this section and this time, I'm going to select dark, this one. Also I want to change the color name, pink to light green. This one, and I'm going to set this file. After set this file, as you can see, there is no changes in my browser. But what? If I change the color mood, let me show you. I'm going to open this setting and now I'm going to change the color mode light to dark. After applied dark, you can see the result. Now automatically, you can see it apply the light green color as a default body color. And at the same way, again, we select the light mode, let me show you. Then as you can see, again back to the pink body color. As I told you, you can apply any CSS here. Suppose I want to change the font color when we apply dark color mode, Sumo type color, and I want light gray. Light gray. Also, I'm going to change the background color, and I want to apply dark gray color. So here from the color word, I want to apply this kind of dark color, this one, this color code. I'm going to set this fine. After set this file, if I change the color mod, let me show you light to dark, you can see the result. Now you can see my browser. Now it's clearly visible. Here we used to opsite color. For background, we use dark color and for the text, we use light gray color. This is how we can use this media rule. I hope now it's clear for you how we can use it. Thanks for watching this video statue for our next tutorio. 143. Aspect Ratio Tutorial: Hello, guys, it's good to see you back. Once again, I'm back with a new tutorial related advanced CSS. And in this tutorial, we are going to learn a new property called aspect ratio. Now, let's try to understand what is aspect ratio. Suppose I want to create a perfect square. To create the perfect square, we need equal height and equal width. Suppose we take 200 pixel width and 200 pixel height. This is how we can create a square. Now we have a new way to create this square now to create this kind of square, first on to take wed. Suppose in our case, 200 pixel, but for height, I'm not going to take any height property. Here we are going to use our new property Aspec ratio, something like that, Aspec ratio one by one. We are not going to use height property to create this square box. In aspect ratio property, we pass a ratio in which ratio, I want to take the height and u. As you can see, we use a ratio, what is one. Our first one stands for wed and the second one stands for height. I mean, according to width, we are going to use same amount of height. Here you can pass any ratio according to your needs. Let me show you another example. Suppose, in that case, here I'm going to create another deep element. This time, I'm going to take we 200 pixel and here I'm going to take height twice then with leadth to this kind of structure using aspect ratio, in that case, we need to take aspect ratio one by two, one is two, two. It's mean, basically we are going to take double up with value for the height. If you want to take height, habop with length, in that case, just uri to reverse the wide, then type two y one. Now you might have quien why I use this property? We can do the same thing using height property. Basically, we use this propriety for responsive websites. Let me show you an example. This DV is a squared dv element. But when we talk about responsive website, then most of the time we need to follow the mobile resolution otherwise laptop resolution. As you know, our smartphone come with different resolution. Their width is different. But most of the smartphone resolution is 322400-80 pixel. So when we design for mobile, most of the cases we set with 100%. So the width is become responsive, but how it can create perfect square using it? Because our height still 200 pixel. Now, width is 100%, but height is fixed. So here we can use our new property as fake ratio. Now, it automatically increase or decrease the height according to the width length, and it create a perfect square. Whatever resolution we have here bile, we don't need to worry about. It's going to create a perfect square. We mainly use this property to make our images responsive. Without resting your time, let's start the practical and see how we can apply this properunty. So as you can see, side by side, I open my visual studio code editor and my browser using life server extension, and I already created a estimate document name index dot DM. Now inside the body tag, I'm going to take a deviate. Su to type. And also, I'm going to assign ID to the deviment S type, HTAg and our ID name is taste. Inside this Dvariate here, I'm going to take a paragraph, Sue type, EM, and I want ten word. Also, I'm going to style this element using its ID name. I copy the ID name and upper body, I'm going to select this ID name and it's the cals is the first property I'm going to use W W 200 pixel. Then I'm going to say it background uber background, and I want u Ballard also I want to say it border. Border. I want two pixels solid border. Solid, and our border color is black, Hatag 000. I'm going to set this file. After set this file, you can see the result in night browser. And now I want to transform this element into perfect square. For this, I'm not going to use height property. Without using height property, I'm going to use property called Astete ratio. Aspect ratio one by one, and I'm going to set this one. After set this file, you can see the result in your browser. Here, first value one represent V and second value one represent high. And now I decide to increase the height of this rectangle. For that, now I want two time height according to the width length. Here I'm going to change the ratio one by two and set this file. After set this file, you can see the result. If I make it triple, then just pass three here and set this file. Now you can notice now, height is three times bigger than width. Also, we can do the opposite. Yes. If you want to assign 50 pixel height for that, just into type 21. If you set this file, you can see the result. Now, sorry, the Wi is 200 pixel and the height become hundred pixel because here you set with 200 pixel. Let me tell you one thing. Suppose you want to create a square, a perfect square. In that case, you can take only one win. Suppose her I'm to take only one. After set this file, still you can see this square. If both the value is same, in that case, you can take numeric value only for once. Now let me show you another thing. Now you can see so you have limited text in this DB element, and I'm going to increase the text size. So I'm going to duplicate this section multiple time, and I'm going to set this file. After set this file, it's going to increase the height of this element. Let me show you. As you can see, now, we still 200 pixel and height become more than 200 pixel because her use aspect ratio one. If we use aspect ratio one, then our content not going to overflow from this container. It's going to increase the height of this container. So in our case, aspect ratio will work as a minimum height property. Always it going to assign 200 pixel minimum height and the content is and if the content is bigger than its area, then it's going to increase the height. But what? If you don't want to increase the height, in that case, you can use overflow property. Just into type overflow, overflow auto. If you set it auto, then you can see the scare ba in your Delem. Now again, height we go to 100 pixel because of aspect ratio. Not only that, this aspect ratio probability also work with height, let me show. In that case, I'm going to assign height weight. I comment out this line weight and her type height, 300 pixel. Also, I'm going to commit out overflow property. Here I'm going to take one by one, one is two, one. If I take this ratio, if I set this file, again, it going to create a perfect square. Because this property will work with ratio. If you provide one of the value according to this value ratio, it's going to create the other property value. If you want to decrease the width, just even type, just interchange the ratio two. If you set this file, you will see the result. Now it assigned 100 pixel width to this element. But this time you can notice our data is overflow from this container because here we assign fixed height to this container. And if you want to resolve this problem, just you need to use the same property overflow at it were to resolve the problem. Instead of decrease the width of this element, if you want to increase it, then you need to take bigger value 40 with ratio. Suppose I want three times bigger width compared to height. Here pass three to one and set this file and you can see this result. Now, continuer width becomes 900 pixel. Because three time of 300 is 901 of the most important thing you need to remember, you cannot use height and width propriety together. Then this Spec ratio property is not going to work. Let me show you. I'm going to apply both the property. If I save it, as you can see, now width become 200 pixel and the height become 300 pixel. Now, our Espe ratio will not going to work. If I try to make it perfect square, still, it's not going to work. But what? If we do not apply both the property, let me show you. I'm not going to apply both the property and comment out it, so I comment out it and set this file, now you can see the result. Now you can see it creates a perfect square Ag Now by default, aspect ratio say to wid value Otto and according to the wid value, it increases the height. That's why a need create a perfect square box. Now, we depend on content size of this paragraph. If I drag and increase the window size, as you can see, according to the content size, it increase the height and width of this container. Now let's see how we can responsive our images. At first, I'm going to delete this deep element. Then also, I'm going to comment out these lines. After that, inside the body tag here, I'm going to take a image tag.yimageimage, and as source, as you can see in my current working directory, there is an image named nature dot JPG. I'm going to pass the image source path nature nature dot JPG. If I set this vile, you can see the image in my browser. And as you can see in here you can notice, image Wi is higher than image height. Now I want to make this image a perfect square. Inside this tie tag and where to create selected using its tag Name image. He tie Image. Is the carnivals is, the first property I'm going to use with, and I'm going to set with 400 pio. I'm going to set this file. Up to set this file, you can see the result. According to image with, it changed the image height. But I want to make it a perfect square. For that, I'm going to use a property called aspect ratio aspect ratio. I'm going to take ratio one by one and I'm going to sub this file. After set this file, here you can notice it made a square, but the problem is it stretched the image. Now, high DO is equal, but it destroyed the image. Now, how we can resolve this problem? To resolve the problem, we have another property, which is known as object fit. And here I'm going to type cover object feed cover. If I set this file, now you can see the result. Now you can see we have the square image and also it will distort the image. If I reduce the image with something 200 pixel, also you can see it distort the image. Still we have square box. Also, we can change the ratio. Suppose I want to create a rectangle, here I'm going to pass one by two ratio and set this file. Now you can see the result. Without distorting the image, it adjusts in any rectangle or square box. Now I'm going to turn this image into responsive image. For now, I'm going to use this tie one by one, and for mobile testing, I'm going to use a media qui Hemotype at the rate, media skin, and inside the roundss I'm going to set the condition. Helm type max with and I'm going to pass 500 pixel. It's mean in the Wi is less than 500 pixel, then we can apply different CSS to this element. Is that the calibrass I'm going to ascendn to this, I'm going to ascend different wet to this image. First I'm going to select the image ING, then inside the calibrs hero type with 100%. Whenever screen become less than 500 pixel, then it going to set 100% to this image. As you can see we use the expect ratio one is to one. So let's set the file. After set the file, now you can see our image is squared. If I reduce the browser width, let me show you so here from the inspect, I'm going to change the dimension of this browser. I'm going to reduce the browser width. So as you can notice, whenever this vio means with below the 500 pixel, it going to say image width, 100%, something like that. As you can see here we use aspect ratio, that's why it created a perfect square. This is how we can responsive our image according to the mobile screen. And if I increase the browser window width, again, it becomes a small square image. So I hope now it's clear for you, how we can use aspect ratio propriety to make our images and website responsive. Thanks for watching this video schedule for our next two io. 144. CSS Display Mode @media rule: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS, and in this tutorial we are going to learn CSS dis learning. It is a new media rule. Now let's try to understand what is the meaning of it. What is this emo? When we need to open a website, we need to use a special software called browser and currently we have multiple browser options in market like Chrome, age, Safari, Firefox, Opera. These are all popular browser in market. Without that, there are more browser. But if you notice, you can see in every browser, we have common control, this control bar. Every browser come with this URL bar. Here we can provide the URL and access the website. Also, it come with navigation button and some options. Also at the right side, it provide open netap option, bookmark option, and menu option. Now, CSS provide us to control to manipulate the browser layout. If you want to hide all of these, you can it known as this them and we can change browser mode in three different ways. First value is browser. It is the default value. If we use browser, then it provides all the controls. It provides URL bar navigation, bookmark, Nutap, et cetera. This is the default mode and it is known as browser display mode. Then we have another option called minimal UI. If we use this mode, then it's going to remove the navigation bar, URL bar, bookmark option. It's going to show there's more control in our browser. At last we have other display mode, which is full screen mode. When you open a website in our browser and we praise F 11 key, then then it's going to shift our browser window into full screen mode after activate the full screen mode, it hide all the controls. Now, according to your website display mode, you can change your website UI design. I want to say you can change CSS style of your website. That's why CSS introduced a new media query known as display mode. Now let's see how we can use this mode. At first, we need to type at the rate media. Then inside the round process, we need to use a property called display mode. Here you can use any of this value. Suppose you can use full screen minimal UI and browser. According to this value, you can change the CSS property. You define different degraund color at full screen mode. So when user click F 11 key, then it's going to transform your browser into full screen mode. Also, it's going to change the background color of your website. Now, let's start with practical and see how we can use these three different modes. 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 create an TML document name index dot DML. As you can see in our body tag, we have heading tag inside the style tag, her style the body section. He assigned a font fab area. Now I'm going to set a display mode inside our style tag. He type at the rate media and inside the rounders, here I'm going to type display mode, display mode, and I'm going to assign full screen. This one. Then inside the coless we can style according to our needs. Next, I'm going to get this slide. This step, I'm going to set browser, default. And her I'm type browser. Then I'm going to duplicate this line again and this time I'm going to set mode, minimal UI. Then inside the full screen mode, I want to change the font color. Here I'm type, first I want to select the heading one tag, H one, then inside the Calibra says, here I'm going to use a property called colored, color and I'm going to set it green. Then I copy this selection and paste it inside another display mode. Here I'm going to set colored red. And at last, I'm going to set it for minimal UI, I'm going to set it blue, and I'm going to set this file. After set this file, now you can see it activate our default mode, Mins browser. That's why our font color turned into red color. As I told you, this is the default mode. Here you can see all the controls in my browser. Here you can see the navigation buttons, reload option, URL bar. And other options. Now I'm going to praise after select the browser F 11. If I praise F 11, now you can see our browser turn into full display mode, and also you can notice it's still the font color. Now our font colors turn into green color. As you can notice there is no URL bar and other options, and it occupy the whole screen for the browser. If you want to back to the normal default mode, then again, you need to praise F 11 button. I hope now it's clear for you what is the difference between full screen mode and browser mode? Last, we have another option called minimal UI. It's work when you convert our website into a WAP. Otherwise, we can create a shortcut, icon in Textop. We need real server to apply minimal UI. Otherwise, we cannot create the shortcut and open it as a minimal UI. But I can give you a little demonstration how a minimal UI look like. Let's go to the is Studio code editor. So as you can see, how we create a button name open minimal Window and in this button, link with this function, open custom Window. And here we use a Java Script code. We create a function. W going to open a customo Window? At first, we create a blank window and I set with 500 pixel and height 300 pixel and we name it my minimal window. Then in this window, we write a contact. Here we write a stimaltag H one, and ins estimate tag with type, this is my custom HTML. I'm going to set this file. After set this file, if I try to click on open minimal window as you can see, this is how a minimal window look like. This window is different from four screen window. We don't have any navigation bar on it. As we don't have URL bar menu option, but we have minimize option, maximize option, and close bar and close button. But the problem is, it is opened by a live server. That's why I cannot apply this median rule on it. Here I just try to show you how a minimal window will look like. This is it for this tutorial. Thanks for watching this video, stay tuned for our next tutorial. 145. CSS Fullscreen Pseudo class Tutorial : Hello, guys. Good to see you back. Once again, I am back with a new tutorial related CSS, and in this tutorial, we are going to learn a new Posido class, which is full screen. This is the list of Posidoclass which is available in CSS, and I already covered a lot of Posido classes in our previous tutorials. And in this list, CSS add a new Posidoclass, which is known as full screen. Now let's see, what is the mini oct? What can we do with full screen positoglass? Suppose we have a browser and inside this browser, we have a DV element. In this Deelement maybe it's filled with text otherwise images. As you can notice a button below it. Now, if I click this button, I want to fullscreen this deep element. Something like that, and to make it full screen, we need to use little JavaScript. Now, after make it full screen, I want to change CSS tiny. Suppose I want to change background color, otherwise, I want to change text color and to make it possible, CSS introduce this Posidoglass full screen. After we convert this dive into for screen, it's going to activate this Posidoclass according to this Posidocls tying, it's going to apply these styles on this DV element. Let's start the practical and see how we can apply this PosidocAss. As you can see side by side, I open my isal studio code editor and my browser using if server extension, and I already create an tM document named index dot TM. And as you can see in our body tag, here we create a box deep. Also inside this deep, we have a paragraph. There we create a button, go full screen, and I already style this deep element and our body section in our style section. Now the problem is our button is not working. We need to use JavaScript for that to make it work. If you do not knowledge about JavaScript, then do just what I'm doing. I want to make this deep full screen when I click this button. I'm going to use a event event from JavaScript, some type on tick this one. It's mean whenever I click this button. Then we need to target this box using its ID name. For that, we need to use document dot get element by ID. Inside the round verses, inside the single codes, I'm going to type the ID name box. After target this box, I want to apply a new method from Java Screen, which is known as full screen. Sumo type dot is a method Sum type request full screen, this one. Also, we need to use round presses because it is a method and semicolon to in this line. At first, we target this element, the box deep element using its ID name. I type document dot get element by ID. Now I'm going to set this file. After I set this file, if I click this button, it's going to turn this deep element into full screen mode, something like that. If you want to exit this full screen, then just click Scape key. Now we are able to apply this posito glass for screen. I want to change the background color of this deep element. Why we make it for spin? Now, let's make this selector. I'm going to t first I'm going to t box dive has tag, box, colon, and we need to use the posito class for spin. Then inside the carlivorss we can apply the properties. Now I want to change the background color. So type background, and I want to make it light green, this color. Also, I want to change the font size. Font size, I want to make it 22 pixel. Now, let's set the file. After set this file, I'm going to click this button again, full screen. As you can see, now, its background color become green colour, light green colored. Also, it increases the font size. S is full screen posito class. If you want to quote this full screen, just praise Scape key. And next, I want to add a heading one tag in this box. Let me show you some type H one and inside this H one tag, I'm going to type hello world. I'm going to save it again. Now I decide when I make it for screen, I want to change only the paragraph color paragraph text color. For that, we need to create a different selector. Let me show you. For that, I duplicate the first I duplicate this section, then I'm going to target this paragraph only. So inside this box Posidoglass full screen, I want to target the paragraph, so I type P and then I want to change the font color. I'm going to type color and I want to make it red. I'm going to set this file. After set this file, if I make it full screen again, now you can see it changed only the paragraph font color. I make it red. This is how we can use this Positoclass. Also, you can use the same positoclass with not positopls. Let me show you. Suppose I'm going to do we section and here, I'm going to use another positoclass, not positoGlas. If box in naught, then inside the roundresses, I'm going to move this positoclas full screen. Then I target this P tag incent this box tag, and I want to make it. I want to change the colour. I want to make it green color. So if I set this file, now you can see, now you can see the paragraph, it has the font color. It makes it green because we do not activate full screen mode on it, and if I make it full screen, it's going to become red color. If I back to the old stage, again, it become green color. This is how we can use this PosidoClass. We can use this positoClass with any other CSS properties. I hope now it's clear for you. Thanks for watching this video. Stay one for our next tutorial. 146. Sass Introduction Tutorial : Hello, guys. Welcome back. In this tutorial, I'm going to introduce you what is SAS? Why we need to use SAS? And how can we use CAS? Our first question is, what is SAS? SAS stands for syntactically awesome style sheets. It is basically a CSS extension. We will do the same work in the CAS file. As we do in the CSS file. Otherwise, we can call it CSS preprocessor. Nowadays, it is very necessary that you should have knowledge of any CSS preprocessor. There are two famous CSS preprocessor, SAS and less. As compare s, SAS is more popular because SS come with more advanced feature than less. If you complete this course, I want to say if you learn CS then automatically, you can understand less. Just you need to face little syntax difference, nothing else. Now the question is, as I told you earlier, it is worked like CSS. Then why CS is more popular than CSS? Because there is some reasons. Let me show you. First of all, it is very easy to manage. When we work with CSS, it creates very lengthy files. Sometimes it's very difficult to manage lengthy files. But if we talk about SAS, it is very easy to manage. The next reason that made it more popular, it increases our coding speed as compared normal CSS. But it is effective with when you work with big projects, not the small projects. It is not very handy with small projects. Suppose you want to create a five page website. In that case, it's not very handy. But if you work with complex and multi page website, then it is very handy. The last thing that made it more popular, which is cross browser compatibility. When you use CSS, some features are not support in old browser. Sometimes it creates some big issue, but there is no issue with SAS for its inbuilt feature, it's work with any old browser. Suppose if you work with Internet Explorer seven, otherwise, if you work with letters version of Chrome browser, then you cannot see any difference in the output. It is work in the same way as it work in the letters version. Now let's see how we can use CS file in our STL file. The strange thing is we cannot use CS file in a sml. Yes, it's true. We cannot use CS file directly in Atmel. Even browser cannot understand SAS code. Browser can only understand CSS files, not the CS file. So why we need to create a CS file, we need a compiler SAS compiler. It compiles CS file and convert into CSS file. So you need to indect CSS file on your ETL document, not the CS file. But you need to type your code in the CAS file, not the CSS file. Then you compile the SAS code and convert into CSS file. Now the question is, what is SAS compiler? In the next video, we will know what is Cs compiler. Now, let's talk about features OSS, and we are going to cover these features in our upcoming tutorials. Our first feature is variables. We can store value in variables as like programming language. Our second feature is nesting. Using nesting, we can assign a class into another class. Otherwise, we can use a class into another ID. This is a use case of nesting. Our next feature is partial and inputs. We can create small cs file and we can import it as modules. Our fourth feature is vixens. Using mixins, you can reuse your code multiple times. Our fifth feature is extends. Suppose you type some code in a class, but you want to reuse these codes in another class. In that case, you can use extends. Our next feature is operators. Operator means arithmetic operators. If you need to execute any calculation, in that case, you can use these features like addition, multiplication, division, et cetera. Our next feature is functions. Our SAS come with some veiled functions, and you can use these functions. As you can create your own functions like programming language. Then our second last feature is conditional directives. If you want to execute some conditional work like Is condition, then you can use this feature, and our last feature is loops. I know you are already familiar with JavaScript and other programming languages. Then I don't need to explain what is loops and what is the usage of loops. You can use any kind of loop like four loop, Di loop, while loop, et cetera. These are all available in SAS. Now let's talk about SAS syntax. Basically, CSR came with two types of syntax, SCSS syntax and SASS syntax. These are basically extensions. SCS SAS. Basically, they're in, but there is a minor difference. Suppose we have a CSS syntax. And as you can see, we take total three different type of selectors NebuL Nb AI and Neb anchor. As you can see, first, we need to type NebUL CSS values. Then we need to type Nb AI CSS value. At last, need to type Neb anchor CSS values. But if we need to use the same code in SCSS syntax in that case, we need to type like this. We need to select Nab element one type. Then inside the alivss we need to type all the syntax, UL, LI and A. Basically, we call this system nesting. We are going to learn more about it in our upcoming tutorials. But if you type the cell syntax in SAS code, then you need to type like this. You don't need to use any calivrass and any semicolons. You don't need to use any semicolon after a property. It's pretty similar with Python programming language. But for this tutorial, I'm going to use SCSS syntax, this one. Otherwise, it may confuse you. Now, let's talk about what kind of knowledge you need to start su. For CAS, you should have basic knowledge of STML and you should have good knowledge of CSS. As I told you earlier, ultimately, CS file compiled into a CSS file. So you should have knowledge of proper CSS syntax. And if I talk about codditor, you can use any codditor. For this tutorial, I'm going to use VS code. You can use any cod editor. So this is it for this tutorial. In the next tutorial, I'm going to talk about what is CAS compiler and which compiler we are going to use for this tutorial. So thanks for watching this video. Stay tuned for our next tutorial. 147. Download and Install sass compile: Hello, guys. Good to see you back. In this tutorial, we are going to learn what is SAS compiler and how can we download the SAS compiler, which can help to compile our CS file into a CSS file. As you can see in my browser, I open SAS official website, SAS hyphen lang.com. As you can see, it provides some basic introduction of SAS. If you have time, then you can read it. Next, here you can see a option name Install. Just click on. Then it's redirect to this page. If you scroll down a little bit, here you can see to different method. Here you can see a compiler list, and here you can see another method that you can install your SAS using NPM. For this tutorial, I don't going to use any node package. I would like to go with compiler, and I'm going to use a different compiler, not this ones, and our compiler name is Koala. As you can see, these are most of paid compilers. That's why I'm going to use a free compiler, which is Koala. Just you need to search Koala SS compiler in your browser, and then you need to click on this link, qualaapp.com. This is the official website of this compiler. As you can see, Koala is a GUI application for as SAS Compass and CoffeeScript. We use it for compilation purpose for these languages, and you know that these are all preprocessor languages. Basically, using this application, we can compile all of these languages. At first, we need to download this application. For download, you need to click on this green button, Download. As you can see, our download is already start. And next, you need to open your download folder, and here you can see the setup of this application, Koala setup. Now I'm going to install this application in my computer. Installation process is very simple, you need to double click on it. After that, you need to click on next, and then you can choose your directory where you want to install it. This is the default location, just click on next. As you can see, I already installed this application, so I don't want to install it again, but you need to complete your installation process. It can take two or three minute to complete the installation process, and after I complete the installation process, it open automatically. For now, I'm going to cancel it. So after complete the installation process, you need to click on the Koala icon to open it. Just into double click on it. As you can see, first time is totally empty. And from this point, you can add any SAS file or a is file. At first, I'm going to jump into my editor and create a CS file. As you can see, there is a folder Nam Demo, and inside this Devo folder, there is another folder Nam CSS. And inside this CSS folder, I'm going to create a CS file. Let's create a new file inside this folder. Style dot SCSS. Otherwise, also you can use SASS syntax. But as I told you earlier, for this tutorial, I'm going to use SSS syntax. Also you can see the SAS icon in this place. Now, let's add some SAS code in this document. I already copy some SAS code and I'm going to paste it here. This code is for demo purpose, so you don't need to understand it. From the next video, I'm going to talk about it. As you can see, we create our CS file successfully. Now, we need to create a CSS file in the same folder with the same name. I'm going to create a CSS file in this folder, style dot CSS. That's it. And we need to keep this file empty. We don't need to type any CSS code in this file. We need to leave it blank, and now we need to open our KoalaOptare. I'm going to open our KoalaOptare. So as you can see, side by side, I open my Qarafopter and my current working directory. And here you can see two different file as file and a CSS file. And now we need to move this CSS folder in this application. Just I'm going to drag this folder and place it here. This is it. Here you can see it automatically peak all the CSS file and the CS files. Now I'm going back to our code editor and I'm going to make some changes in our CS file. Here you can see in my editor, I open my CS file. With that, I also open my CSS file. If I show you my CSS file, as you can see, now it's totally empty. Now I'm going back to the CS file and I'm going to set this file, control. So if I set this file and show you my CSS file, here you can see the proper CSS code. So this Kana application compile the SAS code and convert into a CSS code. Here you can see with Nap tag, it select ULTAgO but in our CS file, inside the Nap tag, we use UL tag. As you can see in our CS file, we use Napkword one time. But if I show you CSS file, here you can see it used Nap tag three time with UL tag with LI tag with ANCA tag. Now let's make some changes in our CS file and see what happened. So here I want to increase UL paddy 20 pixel, Summer type, 20 pixel. If I set this file and show you my CSS file, here you can see our changes are properly reflect in CSS file. Just you need to remember you don't need to change anything in your CSS file. The best option is close your CSS file and then just work with on the CS file. I hope now it's clear for you how CS compilers are worked. So thanks for watching this video. Stay tuned for our next tutorial. 148. Sass Variables Tutorial : Hello, guys, good to see you back. In this tutorial, we are going to learn SAS variables. But at first, let's try to understand what is variables and why we should use variables. Here you can see we create a selector of body tag. Inside this selector, we set background color, red, and font family aerial. With that, I'm going to take two other selector H one selector and Spenselector. Now if you notice, you can see there is a common thing. They are colors, color red. For body, I use red background color, and for each one tag, I use red font color, and also I use the same color for span tag. As you can see, red is the common color. Suppose we have used the same color in ten places. And now we need to change the color. Then we have to go ten places to change the color, and it takes a lot of time. For that, sus introduce variables. In variables, we take name for a value. In our case, color red, and our variable name is primary dash color. And you should remember or the variable name, you need to use dollar sign. At first, we need to take a name of variable, then we need to store value in this variable. Next, we need to depress the color name with this variable name. The main benefit using variable is when we need to change the primary color. Suppose I want to change the primary color red to blue. Then just we need to make changes in the variables, not the all selectors. We don't need to type blue color name on the places. Just you need to make changes in variable. This feature is also introduced in CSS, but the old browsers do not support the CSS feature. But SAS could. Without wasting your time, let's start the practical and see how variables are work in SAS. Here you can see side by side, I open my Visual Studio Ceaor and my browser and already you can see, I create a basic webpage layout. Here you can see the header, a manure, a sidebar, and also you can see the content part and a footer. If you notice you can see, there is a common color in this web page header and footer. If I hover these links, you can see the same color, background of this anchor tag. Also if I hover my sideware items, you can see the same color brown color. Not only that, if I select all the content, you can see the same background color behind the content. Now I'm going to show you how can we use variables. So as you can see, our primary color is brown, so we need to found the brown color. Here you can see the color name brown. We use this color in Anchor hover, header section, footer section, a lot of this. Now I want to replace this color value with the variable limb. For that, we need to create a variable. So here, I'm going to create a variable. At first, we need to use dollar sign, dollar and our variable limb is main color. Min color. I'm going to use brown color. Now I'm going to replace the color names with the variable name, main color. So first, I'm going to replace top bar Anchor Hover selector, color or variable name. Also I'm going to replace it in header selector, main color. Then in our menu list item. Next, I want to replace it in our content section. And also I'm going to replace it in our sidebar. Next, I'm going to replace it in our footer section. So it's done. If I set this file and reload my browser, and you can see there is no changes. You can see the same header color, same footer color, and if I Ober my cuter in my menu links, you can see the background color. It's also brown. I successfully replace our color value with a variable. Now, I want to change the main color of this website, brown to blue. When I hbar my cursor in menu items, I want blue brdrown color. Basically, I want to say I want to change the main color, brown to blue. I'm going to type blue hair. If I set this file and reload my browser, you can see the result. You can see the blue color in header section, footer section, menu section, and sidebar section also. Now we don't need to change the color multiple time because now we use variable. Now you can put any color for one time, and it going to reflect it all the pages. This is the benefit of using variables. Just you need to use variable name as a value. Now if I show you my CSS file, here you can see there is no variables. Just you can see the color names, background blue. It's not only work with colors. You can put any type of value in variable. Suppose I want to change the font style all over the web page. In that case, we can use variable. I'm going to create another variable, and our variable name is main font, Dollar, main font. Colon. For now, I'm going to use aerial and now I'm going to replace all the font value with this variable. I'm going to replace Aerial font with this variable, main font. And also we need to replace in header selector, main font. At last, I'm going to replace it in our content header. Min font. If I set this file and reload my browser, as you can see, there is no changes. It's worked perfectly. You can see it print a real font all over the webpage. Now if we need to change the font family, then we need to change it multiple time. Now, let's change the font family all over the webpage, and I'm going to use what than a font. If I set this file and reload my browser, you can see the font style. As you can see, it replace Areal font with VardanaFont. Now it's clear for you, what is the uskase of variable in sas? It not only save our time, it also enhance our productivity. We can change thousands of places by changing one place. Thanks for watching this video, stay tuned for our next tutorial. 149. Sass Nesting Tutorial: Hello, guys. Welcome back. Once again, I'm back with a new tutorial related SAS and in this tutorial, we are going to learn SAS nesting. Here you can see three different selector. As you can see in our first selector, I use Nap tag with UL tag, and in our second selector, I use naptag with Ali tag, and in our last selector, we use Nap tag with anchor tag. What is the common thing among these three? Which is Nap tag. As you can see, if we use SS syntax, then we need to use Nap tag three time. But if we type the same code in SAS, then we need to type like this and we call this method nesting. Here you can see, at first, we start Nap tag, then inside the Caliss we style all these selectors. You will select our Ali selector anchor selector. If we use nesting, then we don't need to type dep keyword three time and inside the Liverss we need to select all other selectors. Which is related to naptag. But when I set the CS file, it's going to return this kind of CSS code. It's going to reduce some lineup code, but it's going to return the same result. Finally, without wasting your time, let's study the practical and see how it's work. So here you can see side by side, I open my visual screw creator and my browser and I already create a basic web layout. And in my visual studio Cdiator you can see IOPent 35, our estimate document our CS file and our CSS file. You know, I use this layout in our previous tutorial, you can see the variables which I create in our previous tutorial. But in this studio deal, we are going to learn how can we use nesting. But at first, we need to find the position where we can use nesting. I'm going to scroll down a little bit. Here you can see top Br selector. As you can see, after top Br selector, we use top Bar with UL, UL Li, anchor tag, and Hover. This is the rightness to use nesting method. At first, I'm going to copy the UL CSS. Copy, and then I'm going to paste it inside the Tobar selector because tobr is the common tag for Obrine. Now, this selector is not necessary, so I'm going to remove it. Next, you can see inside the UL tag, there is LI tag. As you can see, I already use the UL tag inside the top bar section. Now I'm going to copy only the AI selector from this position to this position. Copy. I'm going to paste it inside the UL tag. At first, our tobr selector and inside the tobr selector, I put UL selector, and then inside the UL selector, I put AI selector. Now I don't need this thesis selector, so I'm going to remove. And now you can see inside the Tobar selector, we have anchor tag. Now I'm going to copy the anchor tag selector only, and I'm going to paste it outside the UL tag. I'm going to remove this code. I don't need this now. Now you can see a Hobart selector. It's a anchor Hober selector, not the TbarHber selector. I'm going to copy this Hobart selector, and I'm going to use it inside the nga tag in that position. I'm going to remove this one. And now I want to tell you a new thing. As you can see, inside the anchor tag, we create Anchor Hobert tag. So it is not necessary to use anchor tag again so we can remove Anca tag. Here we can use person sign, something like that. It's mean we use this Her effect with the parent tag. It's going to create the Her tag of his parent tag. If I set this file and refresh my browser, here you can see there is no changes. It's work as it is. We call this method nesting. Similarly, we are going to follow the same process for header section. I'm going to copy the H one tag and I'm going to paste it inside the headed tag. I'm going to remove this one. As I'm going to follow the same process for menu section. At first, I'm going to copy the UL part of this menu and paste it inside the menu section, I'm going to remove old one. And then I'm going to copy the AI part of this menu and I'm going to paste it inside the menu section. And then I'm going to remove this one. Our next selected is anchor selector, which is inside the LI selector. So I'm going to copy the anchor tag, and I'm going to paste it inside the LI tag. And then I'm going to remove this one. And our next selected is Anchor Hobart tag. So I'm going to copy this selector. So as you can see, is the anchor Hobart tag, so we need to paste it inside the anchor tag. And then we need to remove the air tag, and we can use person here. For now, this one is useless, so I want to remove it. So basically, it's create our CSS code very manageable. If I set this file and reload my browser, as you can see, there is no changes. And now we don't need to use this menu selector multiple time. And next, I'm going to follow the nestering process for our content section. So at first, I'm going to copy the s two selector. Then I'm going to paste it inside the content section, I'm going to remove this one. Next, you can see a pseudoselector named selection. You can see we use this selection all of the content section, I'm going to copy only the pseudo selector. I'm going to paste it inside the content section, not the ST section. And then I'm going to remove it. As you know, for pseudo selector, we need to use person sign, so I'm going to type person here. If I save this file and reoad my browser, you can see there is no changes. I hope now it's clear for you what is nesting and how we can use nesting. Thanks for watching this video. Stay tuned for our next studio. 150. Sass Partials & Imports Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related SAS, and in this tutorial, we are going to learn what is partial and imports. So at first, let's focus on partial. Partial means parts. I want to say parts of SS fine. Suppose we have a CS file and our file is main dot CS file, and this is our main file. And as you know, if we create a website, our website divided by header, content, sideware and footer, sometimes we need to create different designs for different pages. But the problem is, when we type all the code in a single file? It creates our file very heavy and messy. We need to scroll up and down our page multiple time. So to solve this problem, we part our layout. For header, we create header file for content, we create a different file for sidebar and for footer. If we work with variables, also we create another file for variables. Basically, it's organize our code and reduce the clumsiness. Suppose we complete the header section style, then we need to open it again. We can open the specified part. Why we need to change? This is the concept of partial. Now talk about imports. After creating the different parts, we need to input these parts in our main file. For that, we need to use a special keyword, input. At the rate input, we need to type the file name header. One important thing you need to remember. You need to create this same extension file. I want to say CS file, not CSS file. You cannot input CSS file in the main file. Obviously, you need to create CS file. And another thing you need to remember when you create your separate file, you need to use undersco before. I want to say underscohader dot SCSS. Our underscore sign recognize this is not the main file, so our CS compiler successfully identify this is a partial file and we need to include it in our main file. That's why we don't need a separate CSS file for partial files. If you use SASS syntax, then for your partial file, also, you need to use SASS syntax. So without wasting your time, let's start the practical and see how we can use partial and inputs. As you can see, I already open my KOA application, and I open our CSS folder in this application. With that, I also open Visual Studio code editor. As you can see, this is our Min CSF, style dot Sss. And now I'm going to divide this file with pas. At first, I'm going to start with these variables. I want to create a separate CS file for our variables. At first, I'm going to create a new file in our CSS folder. And our file name is variables. As I told you earlier, to create a partial file, we need to use underscosge undersco variables. Dot, our extension is C is is, then I'm going to press Enter. As you can see, it screed our file, and then I'm going to cut my variables from this file, and I'm going to paste it inside the variable file. And I'm going to remove it from our main file. So first, I'm going to save this file. Then we need to include this file in our style file. For that, first, we need to type at the red sign, and then we need to type Import. Import inside the double codes. We need to type the file name, but we don't need to use underscoSign, we need to type variables. You don't need to mention file extension. Our compiler is smart enough to understand the file extension, and then you need to use semicolon to end this line. Next, I'm going to create a new file for our header section. So I'm going to type undersco header. Ss then I'm going to press Enter. As you can see, it created a new file, and now I want to separate our header section. For that, I'm going to select from the top bar. From top bar section, I want to copy our header, also the menu. I'm going to cut, and I'm going to paste it inside the header file. That's it. For our header part, we select Tobb header section, also the menu section. And then we need to import the file in our main file, which is style dot Sss. I'm going to type at the red, Import then inside the double course, we need to type the file name, which is header, then semiconm two in this line. Now, for our content section, I'm going to create another file. Inside the CSS folder, I'm going to create undersco content SCS, and then I'm going to press Enter. As you can see, it creates a new file. Then I back to my style SSS file, and I'm going to cut this content part. And I'm going to paste it inside the content dot SCSS file. I'm going to set this file also. In a similar way, we need to input this file in our main file. So I'm going to duplicate this line and here I'm going to type contain. And next, we need to create a file for our side wars section. I'm going to create a new file in our CSS folder. Underscoe sidebar Sss. As you can see, we create a new file for our sidebar and then we need to cut the sidewar section from the style CSS file. I'm going to cut this sides section from this file. And I'm going to paste it inside this Sidewd file. And then I'm going to set this file. Now we need to input this file in our style file. I'm going to begin this line, and here I'm going to type sidebard at last, I'm going to create a new file for our footer section. So inside this *** folder, once again, I'm going to create a new file, underscoeFter, dot scss. In this file, I want to style our footer part. I'm going to cut this part I paste it inside the footer section. Then I'm going to set this file. As I'm going to back to our main file, styled CS file. Now I need to input the footer section in our main file. So duplicate this line and here I'm going to type footer. I'm going to set this file. At last, you can see the media query section. We use it for responsive purpose. If you want to separate this part, yes, you can. Let's create another file for media queries section. Inside this *** folder, I'm going to create another folder. I'm going to create a file undersco media. Dot SCs then I'm going to press Enter. Then I'm going to cut the media query section and I'm going to paste it inside this media file. I'm going to set this one. As you know, we need to input this file in our main file. I'm going to duplicate this line here I'm going to type our fine line, which is media. And I'm going to press Control S to set this file. Using partial technique, we successfully separate our web layout. We separate our header section, content section, sidebar section, footer section, also the media queries, and the variables. It's radios clumsiness of our website. If I open my SML file, let me show you. As you can see, this is our TML layout. Let's reload the file. As you can see, there is no changes. It's L as it is. Now suppose you want to change the header and footer background color. In that case, you need to open variables file. And from here, you can change your main color. I want some green color, something like that. If I sit this pile and then back to the browser and reload my browser, here you can see the result. It changed our main color. If I show you my CSS file, let me show you style dot CSS. Here you can see it follow the sequence of our input files. At first Tpbard, then come header, then come content, and then come sidebar Atlas footer, and then our media query. After media query, as you can see, our body selected and our rapper selected. If I show you the style SAS file, you can follow the sequence. First, our variables, header contains sidebar footer media query, and as you can see, our body section and our rapper section. I hope now it's clear for you what is partial and imports. So thanks for watching this video. Stay tuned for our next tutorial. 151. Sass Mixins Tutorial : Hello, guys, good to see you back. In this tutorial, we are going to learn a new feature Vlated SAS. In this tutorial, we are going to learn vixens is a very useful feature. Suppose we have two different classes, class one and class two. As you can see, I use botter radius property, both of the classes. For class one, I use five pixel boder radius, and for class two, I use ten pixel border radius. So you can see, I use similar property both the classes. Their property is same, but their value is different. For our old Chrome rowser we use Ber radius with webkit, and for our old Mozilla brrowsers we use boerradius with mouse. So it's a simple CSS method. But the problem is if we need to use the similar properties ten time, then what? Then we need to type 30 lines of code. To solve this problem, sus introduce mixes. Mixes basically work as functions. If you had knowledge of JavaScript, then you already familiar with functions. Let me clear this concept. I'm going to show you an example. If you want to create mixing in SAS, at first, you need to type add mixins, and then you need to take mix in name. You can take any name. In our case, BD radius. Just you need to remember, do not provide any space in this name, and then you need to take round races and it's completely optional. If you want to take any parameter, then you need to pass the variable name. As you can see, in our case, value, then we need to use this three property inside this mixing. Also you can pass the parameter with this property. In this way, we can create our mixing function. Now the question is how we can use this mixing function in our CSS code? Let me show you. For that, I'm going to use class one. If I want to use this mixing, we need to type at the rate include, then our mixing name border radius. Inside the parenthesis, we need to pass the border radius value as like function. When I call this mixing function, then we need to pass a value as a parameter, and then we can use this parameter as a value, value for three different property. Without wasting your time, let's start the practical and try to understand how we can use mixins. As you can see, side by side, I open my visual studio Corretor and my browser and I already create a new DML document. And here you can see in my browser, we already create three different div for this example, and also we set three different ID for this three Div. For our first dif we set first. For our second, we set second, and for our last if we set third, and also I link our CSS file with this document. So let's jump into the CS file and try to explore how mixing work. At first, I want to set border ideas all of this three D. For that, I'm going to use mixing method. Let's create a mixing. Add the rate mixing. Then after mixing Qard, we need to take the mixing name and our mixing name is BD radius. And then we need to use parenthesis for our parameters. It is pretty similar with JavaScript function. Then inside the Kaliss I'm going to set our first property and our first property name is dash web keith Ber radius. For now, I'm going to set Bar radius by pixel, and I'm going to duplicate this line to type. At first, I use prefix for our old Crone browser and then I'm going to use prefix for Mozilla browser, so I'm going to type Msare. And at last, I'm going to use the exact property border radius. Now our mixing is ready to use. Remember, we do not use any parameter in this mixing function because for now, I do not want to pass any value as a parameter. At first, I'm going to use this mixing function in our first tap. For that, first, we need to type Include Keyword at the rate, include. After Include keyword, we need to type the mixing name, and our mixing name is VD radius. Then parenthesis and subagin to end this line. Remember, if you want to call this mix in function, always, you need to use add the red include keyword. Now, if I set this file and reload my browser, you can see the result. You can see the border radius in our first leap. And now I'm going to call the same mixing function in our second and third deep. If I set this file and rewrote my browser, you can see the same result, all of these three deeps. Now I want three different border radios for this three deep and now I want three different boder radios for these three deeps. Suppose for our first af, I want five pixel border radius. For our second deaf, I want ten pixel boer radius, and for our third, I want 15 pixel border radius. In that case, we need to use parameter in our mixing function. We need to set a variable name as a parameter. For that, we need to use dollar sign, dollar and our variable name is value. Then I'm going to copy this value, and I'm going to use it as a property value. Something like that. Now we need to pass the value when we call the mixing function. For our first, I'm going to say five pixel. Similarly, for our second DV, I want to use ten Pixel boer radius, ten pixel. And for our last DV, I want to use 15 Pixel boder radius. If I set this file and reload my browser, you can see the result. So as you can see, we successfully set three different border radios for this three deed. This is the use case of mixing function in SAS. I hope now it's clear for you. So thanks for watching this video, stay tuned for our next studio. 152. Sass Extend Tutorial : Hello, guys. Good to see you back. This is another tutorial related SAS. And in this tutorial, you are going to learn a very useful feature, which is extent. Suppose we have a class named class one, and as you can see, we use four property in this class, color, font size, padding and line height. With that, we have another class, and our class name is class two. As you can see, in our class one, we use red color, and in our class two, we use orange color. Here you can see without color property, every property and their value are same. Their font size, their padding and their lint. Everything is same. Now suppose we have another class, class three. Similarly, without color, every properties are same, their font size, their padding and their line height. So we repeat their proberity and their value to time. I want to say, we need to type six extra line for that. So to handle this kind of situation, CS introduced a new method, which is extant. Why do we need to work with CS file at first, we need to create plus one as it is. But when we create our class two, at first, we need to override the color property because I do not want to repeat this red color for this DV. That's why I overt this color. Next, you need to use the extend Keyword, at the red extend, and I want to extend this class with class one property. That's why I type class one. You can extend with class ID, whatever you want. Similarly, for our third class, just we need to override the color, colored green, and then we need to follow the similar process. Add the red extend or class one. It's mean I want to use class one property in class three. So without wasting your time, let's start the practical and try to understand how we can use extend method. As you can see, side by side, I open my visual studio coeator and my browser using if server extension, and I also open our Koala application. As you can see, we have to tell three different deep with their different background color and their different size. For this three Deep we use three different ID, first second and third. This is our CSS file, style dot CSS. If I show you my CSS file, here you can see for our first dip, our background color is gray and with this 300 pixel. Similarly, for our second dip, we use background colored orange and with 400 pixel. And for our third dive we use background color red and with 600 pixel. Without these two property, every property and their vary is same. You can notice it padding 15 pixel border radius ten pixel, font family aerial, font size 20 pixel. If we follow this regular method, then we need to type eight extra line. So to resolve this kind of problem, SAS introduce extend. Let's back to the CS file. We do not going to change anything in our first if, but in our second Dave, I'm going to use extend method. Let me show you. At first, I'm going to delete this four line, padding boder radius and font family and font sides. Then I'm going to use the keyword, at the at extend. And now I want to extend this second ID with first ID. Here, we need to type has tag first. Then semiconm to end this line. If I set this file, here you can see there is no changes. It's worked perfectly. Next, I'm going to follow this similar process for our third deep. I'm going to remove the properties, and I'm going to extend at the red, extend and I want to extend our third e with our first D has tag first. Then semicron to end this line. If I set this file, you can see there is no changes in our browser. So we successfully extend our first ID. But if I show you my CSS file, let me show you how you can see it creates a combination of ID selector, first, second and third, also you can see two different IDs second and third. It is just used for overwriting background color and deep with 400 pixel, 600 pixel, background red, and background orange. As you can see, it's very useful. If you notice, you can see it's pretty similar with mixes, but there is a difference between mixes and extend. What is the difference? The first difference is we can pass a value as a parameter in mixins, but we cannot pass the value as a parameter in extent. The second difference is we can use combined selector in extend. But inside the mixins, we cannot use combined selector, and now I'm going to show you another method, how we can use extend. So you already know the process, how we can use the extend. At first, we need to create a class, and then using this class, we can extend this class with other class and you know the process. Suppose now you decide you don't want to show class one in your CSS file, but you want to use their property in class two and class three. In that case, you need to use percentage sign before the class name. Now the class one is reusable, similar to mix ins. We call this BathodPlace hoolder. Now the placeholder, do not going to reflect in your CSS file, if you want to extend your property with this placeholder, then you need to use at the aid extend, percent sign and the class name. Just you need to remember placeholder and extend work together. So let me show you the actual demonstration. Once again, I'm back to my visual studio coordinator. So first, I'm going to create a placeholder, so I'm going to remove this hastag then I'm going to use percentisSge. Now we transform our first ID into a placeholder, and I'm going to use this placeholder in our second dip. And if you want to use placeholder with extend, then you need to use percentisine. Now our second div extend with this placeholder. Also, I want to extend our third dip with this placeholder. I'm going to use percentisg here. I do not set this file. If I set this file, first, it's going to destroy these deep properties because we transform our first ID into a placeholder. As I told you earlier, our placeholder do not going to reflect in our CSS file. If I set this file, you can see the result. First, it destroy our first deep, but it maintained the previous property for second dip and third dip. If I show you my CSS file, here you can see the result. Here you can see there is those selected name IDF. You can see only two selector, ID second and ID third. First, it create a combination using second ID and third ID, and then it create second ID selector and third ID selector to overwrite background color and width. Using placeholder, we can create a reusable code, and we can use it multiple time. I hope now it's clear for you what is extent and placeholder. In the next tutorial, we are going to learn SAS operators. So thanks for watching this video, stay tuned for our next tutorial. 153. Sass Operators Tutorial : Hello, guys. Good to see you back. This is another tutorial related CS, and in this tutorial, we are going to learn CS operators. Here you can see, we have total five different operators. Our first operator name is equality operator. Then come relational operator, numeric operator, string operator, and wllian operator. And in this tutorial, we are going to learn equality operator, relational operator, and wollan operator. But at first, let's try to understand what is the meningum operators. At first, I'm going to talk about equality operator and relational operator. As you can see in our equality operator, we have two type of operator, double equal to operator and not equal to operator. In equal to operator, we need to use equal sine two time. But in not equal to operator, first, we need to use explanation sine, then we need to use equal sine. It's mean not equal. Using equal to operator, we can compare values. Suppose our first value is five, five equal to five, then it's going to return true because both the value are same. Similarly, if I use not equal to sine, also it going to return true or false value according to the comparison. This is the usage of equality operator. We are going to learn more about it in our practicals. On the other hand, we have relational operators. And it's come with four different operators. Less than operator, greater than operator, less than equal to operator, greater than equal to operator. All of this equality operator and relational operator use with IP condition in SAS we call it I function. In our upcoming tutorials, we are going to learn about it. In this tutorial, we are going to learn, how can we use conditions with that? Without wasting your time, let's start the practical. Here you can see, I already put my CSS folder in this SS Quala compiler, and also you can see, I open our CS file and our CSS file side by side, and here you can see a class selector, class one. Now I'm going to start this practical with equality operator. Let me show you. At first, I'm going to take a CSS property, which is padding. Padding, ten pixel equal to ten pixel. Here I'm going to compare two values. If I set this file, here you can see in our CSS file, it's written padding, true. Here we match ten pixel equal with ten pixel, when I set this file, it's written true. Yes. The condition is true, but we do not use this operator like that. If you're familiar with JavaScript, then you know that. If you know JavaScript, then you already familiar with p condition, and we are going to learn about it in our upcoming tutorials. Here I just tell you how can we use comparison operators. Here you can see we compare ten pixel with ten pixel, but if I change the value ten pixel to ten EM if I set this file, now you can see it's written padding fols because ten pixel value and 10:00 A.M. Value is not safe. Similarly, if I compare with ten pixel with 15 pixel, let me show you I'll set this file, it's also written false because 15 pixel is greater than ten pixel. But if I use not equal to operator, let me show you and then set this file. In that case, it's written true because our condition is true. Ten pixel is not equal to 15 pixel. As you can see, here we compare our value with numeric value, but also we can use string value. Let me show you. Here I'm going to type font name AL I'm going to compare so I'm going to use equal to sine with aerial. If I set this file, here you can see it's written true because both the fonts are sale. But if I use Roboto font, let me show you I set this file, now it's written false. Not only string value, we can compare complex value also. Let me show you. Inside the roundresses, I'm going to type four pixel, six pixel, and two pixel, and I'm going to copy this slide, and I'm going to paste it here. If I set this file, as you can see, it's written true because both the value is true. But if I change one value, seven pixel, and then set this file, now you can see it's written false. But if I use is not equal to sine, and then set this file. Now it's written two because both the condition are not similar. That's why it's written two. This is our equality operators, and now I'm going to show you what is relational operators. Basically, relational operator work with numeric values. We cannot use it with string value. For that, let me show you an example. I'm going to remove this one and here I'm going to type 50 greater than four. I want to say is number 50 greater than four? If I set this file, as you can see, it's written two. But if I pass 60 and then set this file. As you can see, it's written fw Because in our previous condition, 50 is greater than four, but in this condition, 50 is not greater than 60. That's why our condition written forms. Not only that, we can use this value with unit. Let me show you 50 pixel and 60 pixel. If I set this file, you can see it's written fg. But if I pass 40 weeksel here and then set this file, now you can see it's written true. Not only that, you can compare with with different unit. Let me show you. Suppose I want to compare with 1,000 millisecond greater than equal to 1 second. If I set this file, here you can see it's written true. As you can see, their unit is different, s and, but their value is same. That's why it's written true, here I use greater than equal to relational operator. Using this operator, we can compare if 1,000 s is greater than one is, in that case, is going to return true, otherwise, if 1,000 s equal with one is, in that case, is going to return true. But if I pass two second here and then set this file, as you can see, it's return form. Because 1002nd is not greater than two second. Here you can see we can compare two different unit value with same category. We can compare second with our minute, microsecond, et cetera. But if I try to compare s with pixel, let me show you 1,000 ms greater than two pixel. Then if I set this file, now you can see it written error because their category is different, we cannot compare time with area. That's why we need to use the same category. Now let's talk about the Bullion operators and how we can use it. In SAS, we have to tell three type of Bollier operator and or not, and it's always written true or false result. We can use all the boolean operator with multiple conditions. I want to say, if you want to check more than one condition, you can use these operators. We use and operator if both the condition are true, then written true, else it's written false. Not only two condition, you can add more condition with this operator. Let me show you the example. Suppose this is condition one and I use and operator, and this is condition two. In our condition one, five pixel equal to five pixel. I mean, the condition is true and in our second condition, aerial font equal to areal form. Here we compare to numeric value and here we compare to string value. As you can see, both the conditions are true. In that case, it's going to return to result. And if any condition do not return true, in that case, it's going to return false. Next, let's talk about or Bullion operator. If one of the condition is true, then it's written true. Otherwise, it's written false. Suppose we have to condition condition one and condition two. In our condition one, I compare five pixel with 15 pixel and in our condition two, we compare area font with area four. In that case, you know one of the condition is true, aerial font equal with aerial font. Because one of the condition is true, that's why it's written true. And if both the condition written fails, in that case, it's going to return fails, and our last operator is not operator. It's always written opposite value. If the answer is true, it's going to return false answer, and if the answer was false, it's going to return true answer. Basically, it's written opposite answer. So without wasting your time, let's study practical and see how it's work. So as you can see, once again, I'm back to my visual studio code editor. And now I'm going to use a condition with Boulan operator. At first, I'm going to use this condition 1,000 milisecad better than equal to 1 second. Ismein is going to return true result, as you can see, it's return true. With that, I'm going to use end operator and five pixel, equal to five pixel. If I set this file, as you can see, it's written true because both the condition are true. But if I false one condition, so I want to change five pixel equal to six pixel and then set this file. Now Seton falls. Now, both the condition is not true, our first condition is true, but our second condition fails. That's why it's written fails because we used operator. But if I used or operator, then what? Now I'm going to use or operator. Or if I set this file, it's going to return two because as you know, if one of the condition is true, then it's going to return two. And if both the condition fails, let me show you. I'm going to change two second and then set this file as you can see, it's written fails. And if both the condition is true, in all operator, in that case, once again, and fight pixel and then set this file, as you can see, it's written true. So in our operator, both the condition or one of the condition is true, in that case, is going to return true. And now I'm going to show you the last lean operator which is not operable and how we can use it. So at first, I'm going to duplicate this slide, and I'm going to comment out our previous one. So here I'm going to use not operator. I want to remove this condition and first, I'm going to type no. As you know, not operator always written opposite result. So five pixel equal to equal to five pixel. As you know, the condition is true. If I set this file, here you can see it's written forms because it's written always opposite result. But if the condition is fails and if I use not equal to operator, five pixel not equal to five pixel and set this file, now it is written true. Because the condition fails, that's why it's returned too. It's always return opposite result. I hope now it's clear for you what is Bollan operators. So thanks for watching this video, stay tuned for our upcoming tutorials. 154. Sass Operators Tutorial II : Hello, guys. Good to see you back. This is another tutorial, related CS operator. And in this tutorial, we are going to learn CS numeric operator and SS string operator. As I told you, in my previous tutorial, we have to five different operator in SAS equality operator, relational operator, numeric operator, string operator, and Wulian operator. We already cover equality operator, relational operator, and an operator in our previous tutorial. In this tutorial, we are going to cover numeric operator and string operator. Let's get started. At first, I'm going to talk about string operator. String operator means concatenation operator and we define this operator using plus sine. We use this operator for to add a string with another string. Using this operator, we can join to different stree. Not only that, we can join numeric value with string el. Not only that, using this operator, we can join numeric value with string viel. If you are familiar with JavaScript, you already know that. Let me show you an example. Here you can see 50 plus px. Here we want to join a string hel with a numeric wave. As a result, it returned 50 pixel. On the other hand, we have numeric operators, addition, substruction, multiplication, division, modulus, otherwise, we call it reminder. We use this operator for arithmetic calculations. Let's start the practical and try to understand how we can use it. As you can see, I already open my CS compiler software Koala also you can see in my Visual Studio coretor side by side, I open my CS file and my CSS file. So at first, I'm going to show you how we can use string operators. For that, I'm going to create two variables. Dollar, colon, and I'm going to take 50 as in. Then I'm going to dugate this line, and this is what two. Here I'm going to take five. This is variable one, and this is variable two. Now I'm going to style it class dot class one. Then at the livers, I'm going to take a NCSS property. Suppose margin for Value, I'm going to use variable one, one. One. Next, I'm going to use concatenation sine. After concatenation sine, I'm going to pass px. Here you can see our V one written numeric value, and I want to concatenate Var one with string value px. I I set this file, as you can see, it's written Margin 50 pixel. So here we join two different type of value using string operator and we call this method concatenation. With that, I'm going to show you how can we use numeric operators. So with er I want to add $2.02. Up to two, once again, I'm going to use concatenate sine. Now, the sign 1-2, it is not a concatenation sign. This is addition sine, but this sign going to act as a concatenation sign. So if I set this file, here you can see our margin is 55 pixel. So as you know, using addition operator, we can add two values, but now I'm going to use substriction operator. Minus. I I set this file, now you can see our new margin is 45 pixel. It's radius five pixel from 50 pixel. That's why it's written 45 pixel. This is the use case of substruction operator, and in that way, we can use it. Similarly, we can use multiplication side. If I set this file, you can see the result, 250 pixel. If I use division sine and then set this file, now you can see the answer is ten pixel and now I'm going to use our lust operator, which is modulus. Let me show you how. If we use modulus sign, then it will give you the reminder up to division. If I set this file, as you can see, there is no reminder, that's why it return zero pixel. But if I change the Var one value, 54 and then set this file, now you can see the reminder is four. So this is the use case of modulus operator. So basically, we do not use this numeric operator in that way. We use it when we create complex designs. Let me show you. So for this example, I'm going to take a new property, which is font size. Font size, and I'm going to use Var one. Congetinate with pixel. If I set this file, you can see the result. Class one font size is 54 pixel. But for our heading one tag, I want font size two time, then class one. Let me show you font size. Dollar one, multiply with two concatenate concatenate pixel. If I set this style, you can see the result. Now our heading one font size is 108 pixel because I want to show two time font size then class one, then class one. That's why I use multiplication operator. In our class one, it's written 54 pixel and in our heading one, it's written 108 pixel. In that way, we use variables and numeric operator together, most of the time we use it with p condition otherwise loops, and we are going to learn about it in our upcoming tutorio so this is it for this tutorial. In the next tutorial, we are going to learn a new concept related stream, which is interpolation. Stay tuned for our next tutorial. Thanks for watching this video. 155. Sass Interpolation Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related SAS, and in this tutorial, we are going to learn interpolation, SAS interpolation. In our previous tutorial, we learn string operators. With that, we learn string concatenation operators. Using string concatenation, we can add string value with numeric value as you can see the result. Here you can see it. As you can see here, 50 concatate with pixel and as a result, it returned 50 pixel. But the problem is we cannot use concatate sine in CSS properties. We can only use it in CSS values. Also, we cannot use concatenation sine in CSS selector. Let me show you an example. Here you can see, I take a property name margin, margin hyphen concatenation sine, and I call a variable name position. You can put any value here, lab, top, right, I want to say, suppose margin top 20 pixel, but we cannot use concatenation sine in that place. Let me show you another example with selector. Suppose there is a class named image dot image hyphen concatenate with imaging, but we cannot use concatenation sine in our selector or properties. We can use concatenation only in our valves. But for this kind of congtation SAS introduce interpolation. If you want to congtnate with properties, otherwise classes, in that case, we need to use interpolation method and we need to use this sign, hashtag and clirass. Inside the calrass we need to put the variable line, and then we can congatenate our properties and classes. Let me show you the example. If you want to congatenate these properties and the class, in that case, then we need to type like this. Merging hyphen hastag inside the calirass, we need to pass the variable limb position. This is for property. Similarly, for a class, we need to follow the same method. After hashtag, we need to use Calirasis and then inside the calirasis we need to pass the variable name. So without wasting your time, let's start the practical and see how we can use it. As you can see, I already open my Kuala application, and in my visual studio code editor, side by side, I open CS file and our CSS file. Let's start the practical and see how we can use interpolation. At first, I'm going to declare a mixing. At the d mixing. And our mixing name is margin. And inside this parenthesis, I want to pass two parameters or first variable m is position, and our second variable m is unit. Also I'm going to call the mixing in our class. Let me show you. I'm going to select a class dot class one. Inside the aliases, I'm going to include the mixing. Add the red, include, and our mixing name is margin. At first, I'm going to pass position value. Our position is left. After position, we need to pass the unit here I'm going to pass 20 and then semicolum to end this line. Now inside this mixing, I'm going to take our CSS property which is margin. Margin, hyphen, here I'm going to use the interpolion method. Hastag Cariss. Now I want to concateate margin with another variable, and here I'm going to pass position variable, position. As you can see, in our position variable, we pass left value and then after column for value, I'm going to use unit variable. Dollar unit. I want to congatenate with pixel in PX. Then semicon to end this line. If I set this file, as you can see in my CSS file, it print margin lip 20 pixel. Now we can change the position just typing the name. Suppose I'm going to pass top and here I'm going to pass 40. If I set this file, now you can see margin top 40 pixel. Here you can see, we use a mixing called margin and inside this mixing, we use interpolation method. And we pass value from this mixing and we congtnate with CSS property, and also we congtnate string with unit. This is the usksOT is the uskaso interpolation. In this example, we use interpolion with CSS property, and now I'm going to use interpolion with CSS selector. For that, I'm going to create other mixing. At the red mix in, and our mixing name is set image, SET IMG. Then inside the caliass and inside this parenthesis, I want to pass one parameter, and our parameter name is dollar mail. Now inside the aliases, I want to congatenate our selector, dot, image, dash, has tag. Inside the liss, I'm going to call the image name. So here we use interpolition to congtnate our selector. Then inside the liverss, I'm going to use a CSS property, which is background image. Background, image, and I'm going to use URL Vu for the background image. URL inside the parenthesis, inside the double codes, we to pass the file location, and our file location is image, slash our image. Also, here we can use Interpoliion method to take image name. Let me show you. Hashtag inside the aliases, I'm going to pass the variable, which is name. After image name, we need to pass the image extension, and our extension is JPG. Now we need to call this mixing and we need to pass the image name. To call the mixing to type at the rate include. Then we need to pass the mixing name, set image, set image. Also we need to pass the image name. Suppose our image name is Cloud. And then semicolon two in this line. If I set this file, as you can see, first, it creates a CSS selector, image Cloud, and then it create the image name cloud dot JPG. Using interpolation, we can concatenate CSS selector, and also we can use it as a image name because we cannot use plus sign to concatenate CSS selector and CSS properties. That's why CS introduced CSS interpolation. I hope now it's clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 156. Sass Functions Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related SAS. In this tutorial, we are going to learn SAS functions. If you are already familiar with JavaScript, then you know what is function. So let me show you how we can create functions in SAS. To create a function in SAS, first, you need to take a keyword and dilate function, then your function name. Remember, do not provide any space between the name. You can use otherwise under sco sine, but do not provide any space. Then inside the parenthesis, you can take one parameter, multiple parameter, otherwise no parameter. It is up to you. For this example, I took one parameter, means one variable, and our variable name is value. And then you need to use calibraces. If you remember, function and mixing are pretty similar, but there is a difference. Basically, function can return a Val. It can return arithmetic calculations, but mixing doesn't. But mixings always print what was already written in mixing, but functions written values, and we can use this value in our upcoming codes. Suppose I create a class name one third and inside this selector, as you can see, I use a property named with and we call our function and we pass a value 1,200. Then our function going to divide this value with three and return 400 and then it concatenate the number with pixel in our CSS it pass with 400 pixel. Let me show you a scenario that can clear your doubts. Suppose we have a parent container and its width is 1,200 pixel, and now I want to divide this width into three parts. In that case, every cell take 400 pixels. For that, we can create a function, which can divide our container into three per. If we change the width of this continuer, it automatically divide our continuer into three per. Similarly, if we want to divide this continuer into a two part, in that case, we need to create a function, which can divide our value into a two part. Suppose in future, you want to change the outer did. Something 1,500 pixel. In that case, our function going to divert the continu with equal size, 500 pixel, 500 pixel, and 500 pixel. This is the use case of function, so we don't need to type the cells width manually. We are going to calculate it using the help of function. So let's start the practical and see how we can use it. Once again, I am back to my visual studio coordinator. Side by side, I open style dot Ss file and style CSS file. At first, I'm going to set a container width. For that, I'm going to take a variable. And our variable nm is CN width, colon and for our continuer width, I'm going to take 1,000. For now, I'm going to take any unit like pixel, M, et cetera. Now I'm going to create a function, which is going to divide my continuari into three part. So to create a function, I'm going to type AderdFunction, and our function name is one third, one third. Then inside the parenthesis, user going to pass a parameter. For this parameter, I'm going to take a variable dollar weed. Then inside the aliases, whatever user going to pass, I want to divide it into three part. So for that, I'm going to use return keyword. At the red return. Then Dollar width divided by three, because I want to equally divide the continuer width into three part, and then I'm going to use concatenate s plus px. This is for unit because as a result, I want to return pixel unit. So we successfully create our function and our function name is one third, and now I want to call this function. To call the function, we need to style a class, and our class name is one third weed. Then inside the car resist, I'm going to call it property and our property name is what. What. Now I'm going to call our function, and our function name is one third, one third. Then inside this parenthesis, I'm going to pass this variable. Before I set this file, let me change the container width. I'm going to replace 1,000 with 1,200. If I set this file, as you can see, our one third container width is 400 pixel. So in future, if I change the container width, 1,200 pixel to 500 pixel and then set this file, here you can see, it's always written the one third of this container width, which is 500 pixel. This is the use case of function. Similarly, if you want to divide your container width into two part, in that case, you need to create another function. Some to duplicate this function, and I'm going to change the function name, and our function name is. But this time, we need to divide the continuer width into two parts. So I'm going to divide with two. As I'm going to create and also I'm going to create a selector for that. Let me show you. Our selected plus name is hub width, Hub width. Instide the aliras I'm going to call the width to parting. As a value, I'm going to call our new function and our new function name is hub. And inside the parenthesis, here I'm going to pass our container width variable container width. And also, I'm going to change the container width, 1,500 pixel to 1,200 pixel. If I set this file, you can see the result. Here you can see our hub function divide our container into two part and return 600 pixel for one part, and our one third function divide our container into three part, and each of the part to 400 pixel. Now it's clear for you how we can use functions for arithmetic calculations. So in the next tutorial, we are going to learn SAS veil functions. So thanks for watching this video, stay tuned for our next tribew. 157. Sass Number Functions Tutorial: Hello, guys. Good to see you back. This is another tutorial relatate CS, and in this tutorial, we are going to learn SAS number functions. Here you can see Cs come with total six in val function, numbers function, string function, color function, last function, selector function, and last one is intropetion. In this tutorial, we are going to learn only number functions. Let's see how many number function we have in CS. As you can see, we have total 11 number function in CS, and we are going to cover all of these in this tutorial. Let's start the practical with Avis function. Physically, Avis function written absolute will. Let's start the practice. As you can see, I already open my user studio cod editor and side by side, I open styloid SS pile and styled CSS file. At first, I'm going to create a class dot class one. Then inside the calices, at first, I'm going to take ACsSPperty and I'm going to use padding property. Padding. Our first function is Avis means absolute function. Sham row type abs. This function always written absolute value. If I pass a negative value, let me show you -14 pixel. If I set this file, as you can see, it's written absolute, 14 pixel. It's removed the negative value and written 14 pixel. If I remove the minus sign and then set this file, as you can see, it's always written absolute value. Now, let's talk about our next function, which is L. But before, I'm going to duplicate this line and comment out previous one. Here I'm going to use cell function C CEL. Then inside the ao verses, I'm going to pass a floating value. Let me show you. 5.3. What even if I set this file, let me show you. If I set this file, as you can see, it's written padding six. If I use cell function every time it return above value. If I use 5.9 and set this file, also it return six. But if I use 5.1 and set this file, also it returns six. It's always written above value. But if I pass 5.0 and then set this file, now it's written only five. If I pass float value in cell function, it's always written above value. Similarly, we have opposite function. For that, I'm going to duplicate this line and comment out previous one. And here I'm going to type floor function FL W R. Then inside the roundress I'm going to pass four and seven. This function always written below value. If I set this file, as you can see, it's written only four. Without zero, whatever value we use after dot is going to return only four. If I pass nine here, it's also written four. Let's jump into our next function, which is the round function to beg this line and comment out previous one. And here I'm going to type round function. Row if I set this file, as you can see, it's written five. This function is combination of seal function and float function. After Dhimil, if the value is bigger than four, then it's always written the a a value. But a Djimil, if the value is lower than five, then it's going to return wow value. Let me show you if I pass, 4.4 here, and then set this file, as you can see, now it's written only four. But if I pass 415 and then set this file, now you can see it's written five. This is the use case of round function. I hope now it's clear for you how sale floor and run function work. Our next function is max function. I want you to begin this line and coin out previous one. And here I'm going to call max function. This function always return the maximum value. Suppose if we have three value, let me show you one pixel, three pixel, and five pixel. If I said this file, as you can see, it's written five pixel. It's always written the maximum value from the least. At the same way, we have opposite function, which is min function. Soundg this line and comment out previous one, and here I'm going to call our Min function. If I set this file, as you can see, it's written the lowest value from this list. It's always written lowest value. Basically, we do not use this function like that. When we need to work with complex arithmetic calculation, then we use this function. Now, let's talk about our next function, which is percentis So to begin this line and comment out previous one. And here I'm going to type percentis. This function always return the percentage value. If I pass 0.3, I set this file, as you can see, it's written 30%. Also, if I work with arithmetic calculation, let me show you 200 pixel divided by 50 pixel. If I set this file, as you can see, it's written 400%. This function always return percentage. Our next function is comparable. For that, I'm going to duplicate this line and comment out previous one. Here I'm going to type comparable. Using this function, we can compare two units. If the units are matched, they is written, true, otherwise, it's written forms. Let me show you the demonstration. So here I'm going to pass two pixel and our next value is four pixel. If I set this file, as you can see, it's written true because their units are same, pixel and pixel. But if I pass EM unit and then set this file, EM and set this file, as you can see, now it's written fobs. Because their unit is different. That's why we could not compare it. But if I pass centimeter value here, CM, and if I pass MM unit, and then set this file, as you can see, now it's written through because we can compare centimeter with millimeter. That's why it's written through. Let's talk about our next function, which is random. I'm going to duplicate this line and comment out previous one. So I'm going to type random. This function always written a random value. If I set this pile, as you can see, it's written a random value. If I set this file once again, you can see it's written a different random value. By default, random function written value 0-1. That's why it's written float value. But if I pass a number, something 12 and then set this file, now it's written a number 0-12. It could be any number 0-12, and in our case, it's written ten. If I set this file once again, now you can see it's written one. Let's talk about our next function, which is unit. For that, I'm going to dulgate this line and comment out previous one. And here I'm going to type unit. For this example, I'm going to pass a number, which is 22. If I set this file, as you can see, it's written only the double codes, not the number because we do not pass any unit, but if I pass pixel PH and then set this file, as you can see, it's written only the unit pixel. Unit function always written the unit. Similarly, if I pass centimeter, CM, and then set this file, here you can see it's written centimeter. Now, let's talk about our last function, which is unit less. For that, I'm going to duplicate this line and comment out previous one. And here I'm going to type unitless. Basically, this function going to return to value, either true, either false. Basically, this function going to check, does we provide unit with this value or not? If I set this file, as you can see, it's written false. Because we provide unit, that's why it's written fals. But if I do not provide the unit, I set this file, as you can see, now it's written true. We can use this function with IP conditions. In the next tutorial, we are going to learn strings related functions. So thanks for watching this video, stay tuned for our next tutorial. 158. Sass String Functions Tutorial Part1 : Hello, guys, good to see you B. Once again, I'm back with a new tutorial related CAS. And in this tutorial, we are going to learn CS string function. Here you can see the list of inval function of SAS. In our previous tutorials, we'll learn about number function. And in this tutorial, we are going to learn string functions. So let's see the string functions. As you can see, we have total nine string function in SAS. Cote function to uppercase function, STR index function, to lowercase function, Star insert function, unique ID function, Star len function, uncoat function, and Star slice function. Without wasting your time, let's start the practical. As you can see, I am in my visual studio coordinator, and side by side, I open Stylar CS file and style CSS file. So first, I'm going to create a class, and our class name is class one. Then inside the arises, I'm going to use CSS property, and our property name is font family. Font family. But here I don't going to use the font family name directly. For that, I'm going to use a string function and our string function name is co Quote. Then instead the parenthesis, I'm going to call the font family name and our font family name is Ariel. Basically the code function going to wrap this string with double codes. If I set this file, here you can see the result. Font family inside the double codes al. In the opposite way, we have another function, which is uncode. If I use uncode and wrap this font name inside the double codes and then set this file, as you can see it removes the quotation from the string. This is the use case of uncode function. Let's jump into the next function, which is two uppercase. Here I'm going to tie two uppercase. Case. Basically, this function going to convert this string into uppercase. If I set this file, as you can see, all the letters are in uppercase. At the same way, we have opposite function, which is two lowercase. If I type two lower, and then set this file, as you can see, it convert our capital letter A into a small case. Basically, it convert uppercase character into lowercase. Let's jump into the next function, which is string length. Here I want to type our next function, which is St length. Str length. Whatever string value we pass inside this string function, it's going to count the character of the string and return the length in number. As you can see in aerial world, we have total five character. If I set this file, oops, there is a mistake. Lens spelling is not correct, LENGTH. If I set this file, you can see the result. It's three and five. This is the use case of STR length function. Let's talk about our next function, which is string index. I'm going to call this function string index. Then inside the parenthesis, in this function as a first parameter, we need to pass this string. I already copy a string and I'm going to paste it here. It's a dummit from La Mpsum. But at first, let's start on the word wrap. Using this function, we can search character or word from this string and it's written index number. As you can see, as the first parameter, we pass this string. Then in our second parameter, I want to search the dummy word. Inside the double chords, I'm going to pass Dummi. If I set this file, as you can see, it's written 23. It's written the index number of dammi text. If you count the characters, D would be 23, let me show you another example. Now I want to search Lorem word from the stream. So I'm going to type Loren. If I set this file, as you can see, it's written one because Lem word start from the first index. That's why it's written one. Remember, it's also count the space between the words. This is it for this tutorial. In our upcoming tutorial, I'm going to cover string insert function, QQ ID function, and string slice function. Thanks for watching this video, stay tuned for our next tutorial. 159. Sass String Functions Tutorial Part2 : Hello guys it's good to see you back. This is the second part of SastringFunctions. And in this tutorial, we are going to learn string insert function, unique ID function, and string slice function. So without wasting your time, let's study the practical. As you can see, inside the visor stew coeor I open our previous files. Style your CS file and style your thesis file. Suppose I want to insert a word inside this string. For that, we need to use string insert function. So here, I'm going to type string insert. I want to add hello word. So here, I'm going to type hello. I want to add hello word beginning of this string. For that, we need to pass another parameter. So here I'm going to type comma, and here I'm going to pass the index number. One, also, I'm going to provide a space in that place. And also, I'm going to provide space after O. So if I set this file, you can see the result. Using Insert function, we can insert word or a character inside this stream, and we need to pass the index number. That's it. Let me show you once again. Suppose this time I want to add Ipsum word in this stream. I copy this word and remove it, and here I'm going to pass the word Ipsum. And now I want to insert Ipsum word up to uen. For that, I'm going to count exact index number one, two, three, four, five, six. So here, I'm going to pass Sebin because also I want to provide a space up uen. So if I set this file, you can see the result Lorem Ipsum. So this is the use case of insert function. Let's talk about our next function. Our next function is string slice. So here I'm going to type STR slice. Suppose I want to slice down Lorem word from this string. In that case, we need to pass to the two parameter. Let me show. In our first parameter, we need to pass our string, and in our second parameter, we need to pass the index number. As you can see, Lorem word end in fifth index. So here, I'm going to pass six. If I set this file, now you can see it remove Lem word and print is simply dammitext. But in our next example, I want to return one word. In that case, we need to pass total three parameter, our starting index number and our ending index number, which is nine. If I set this file, as you can see it return is. So using this function, we can slice any section of our string. Let's talk about our last function, which is unique ID. At first, I'm going to remove all of these, and here I'm going to type Unique ID. ID. Then our parenthesis and semicon two in this line. If I set this file, as you can see, it's written a unique ID. It returns some random characters. If I set this file again, every time it's written a new ID, and Bt fold always this function written nine character unique ID. Basically, we use this function with IP conditions. I cover all of these string functions. Thanks for watching this video, stay tuned for our next tutorial. 160. Sass Color Functions Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new exciting tutorial related CS. And in this tutorial, we are going to learn CS color functions. As I told you earlier, CS came with some inval functions. Number function, string function, colors function, list functions, elector function, and introspection function. We complete number function and string function in our previous tutorial. In this tutorial, we are going to learn color function. Without wasting your time, let's see how many color function we have in our CAS. In this tutorial, we are going to cover the basic but important CS functions, Lighten, darken, adjust to, saturate, desaturate, mix, and transparent eye. I know we have to more than seven function related color in SAS, but these are the most important one. That's why I'm going to cover these seven functions. So let's start the practical and see how it works. Here you can see side by side, I open my Visual Studio Coreator and my browser using if server extension. I already created a HTML document named index dot HTML. With that, I already create Style Door CS file and styled CSS file. As you can see in my browser, we have to do two D, class one and class two. Class one filled with pink background color, and class two came with empty background color. Let's jump into the CS file and see what we have done. As you can see, at first, we create a variable limb base color, and our base color is pink. And then we style our dips and set a border. Then in our class one, we set background color, which is our base color pink, and we do not set any background color in our class two. Now I'm going to modify this color and I want to fill this div with the dark shape of this pink color. For that, I'm going to use a function named darken. So first, I'm going to use CSS property, which is background. Background, and I'm going to call our function. Here I'm going to type darken. Then inside the parenthesis, we need to provide a color. For color, I'm going to use the same color, which is base color. I'm going to copy the variable and paste it here. And then in our second parameter, we need to provide the value 0-100%. So here I want to pass 30%. So if I set this file, here you can see our container filled with 30% more dark cut than previous one. And if I show you my style or CSS file, as you can see, it creates a new color. Then once again, I'm going to back to my style or CS file. So as you can see, if I apply 30% darkened color to this base color, it return this kind of color. Similarly, if I apply 70% and then set this file, you can see the difference. Now it's ten more darkened color. I show you two deeps because this is the original color and this is the darkened part of this color. This is the use case of dark in function. Our next function is lighten function. Let me show you. So first, I'm going to duplicate this line and comment out previous one. And here I'm going to tie Lighten. And I'm going to pass 30% value here. If I set this file, as you can see, it's 30% lighten color from our base color. If I show you my CSS file, as you can see, it's written pure white because our pink color is already a lighten color. If I use blue color, let me show you base color blue. This at this file, now you can see the lighting part of this blue color. And if I show you the CSS file, you can see the colored code. We can use those function with Hova Effects. Let's talk about our next function, which is adjust Hue. First, I'm going to duplicate this line and comment out previous one, and here I'm going to type adjust Hue. Hue. If I set this file, as you can see, it changed the color. Basically using this function, whatever color we pass in our first parameter, it can return darkened part or lighten part of this color according to this value. And in our second parameter, we need to pass value with degree. If I pass 20 here, and then set this file, you can see the difference. It's return won't darken the previous one. If I pass 70 degree, let's see what happened. If I set this file, it return lighten part of this color. Using H function, we can rotate colors. So as you can see how we can use Hu function. Let's talk about our next function, which is saturate. At first, I'm going to duplicate this line and comment out previous one. Here I'm going to type saturate. Basically, this function increase the brightness of this color. If I set this file, you can see the result. As you can see, it still return the same color. Let's change the color. Here I'm going to use a brown color. I'm going to provide a hexadecal value has AD 4038. If I set this file, now you can see the color difference. This is the base color and this one is 70% saturated the base color. It increases the brightness of this brown color and return red color. Similarly, we have opposite function, which is desaturate. Let me show you. I'm going to duplicate this line and comment out previous one here I'm going to type desaturate. Also I'm going to change the base color, which is blue. If I set this file, as you can see, this function reduce the brightness of this color and return this color. Saturated function always increase the brightness of this color and desaturate function always decrease the brightness of this color. If we reduce the value 20% and then set this file, now it's try to match with base color. But if you increase the value 90% and set this file, now you can see the difference. It reduced the brightness of this color. But if I pass zero value, and set this file. Now you can see is written the original color, the base color, blue color. But if I use full value, 100% and set this file, now you can see Itrton gray color only. Now let's talk about our next function, which is mix. I want to oblate this line and comment out previous one. So here, I'm going to type mix. Using this function, we can mix different colors. In this function, basically, we need to pass total three parameter. So with base color, I want to add, as you can see, our base color is blue. I want to add red color. So here I'm going to type red, comma, and then we need to pass the percentage value. So here I'm going to pass 50%. It mean how much blue colored I want to add with the red color. If I set this file, as you can see, it's written purple colored. If we mix red color and blue color, in that case, it reten purple color. I I decrease the percentage value, 20% and then set this file, now you can see it return pink reddish color. It applied 20% west color to this red color. If I increase the value, 90% and then set this file, now you can see the different result. Now you can see our new color is much stronger than red colored and it's written nearly blue colored. This is the way how you can use mixed function. Now let's talk about our lust function, which is transparent dies. I'm going to duplicate this line, and I'm going to comment out previous one. Here I'm going to type background transparent ties. Basically, using this function, we can transparent our color. If you are already familiar with CSS, you know GVA value, and A stands for Alpha Val, and we can transparent our color using Alpha value. Similarly, we have function in SAS, which is transparent yes. Here, we need to pass through the two parameter, color and value. For color, I'm going to use our base color, and here we need to pass value 0-1. So Hemo type zero point, four, I mean, it's 40% transparent. Let's set the file and see is it worked properly or not. As you can see, it's 40% transparent our background color. And if I show you my CSS file, here you can see it use Rgvia value here you can see it's written Alpha value 0.6. And if I want to make it completely transparent, in that case, we need to pass value one. If I set this file, now you can see it's completely transparent. But if I show you my CSS file and compare with Alpha value, here you can see it's written zero. In CSS for complete transparent, we need to use zero, but in SAS for complete transparent, we need to use one. Obviously, it's work only for this function. This is it for this tutorial. I hope now it's clear for you what is CS color functions. Thanks for watching this video. In our upcoming tutorial, we are going to cover CS List functions. So stay tuned for our next video. 161. Sass List Functions Tutorial Part1 : Hello, guys, good to see you back. Once again, I'm back with a new exciting tutorial related SAS functions. And in this tutorial, we are going to learn SSList functions. As I told you earlier, we have to six function in SAS, number function, string function, color function, list function, selector function, and introspection function. In this tutorial, we are going to learn list function. These are all in wll functions. But before we need to understand what is list. If you are familiar with JavaScript, then you already familiar with arrays. Array means in a single variable, we can store multiple values. And if you want to do the same thing in SAS, then we have List. Here you can see, first we take a variable then list, and inside this variable, we set to tell three value, five pixel, ten pixel, and 15 pixel. This is the first method that you can create last in SAS. Let me show you this second method. Here you can use separator between the values. You can use comma. So you can use values without comma. Otherwise, you can use value with comma. And there is another way that you can create list in CAS. Let me show you. Also, you can use square addresses to create a list in CS. And now I'm going to show you the list functions. Using list function, you can manipulate your list. You can add new value in your list. Otherwise, you can remove a value from this list. You can do a lot of stuff using those functions. Our first function is length function. Thence come Nth function. Next, Seth N function, join function, appNFunction, function, index function, least separator function, and our last function is is bracketed function. So we have total line least function in CS and I'm going to cover all of these in this tutorial. Without wasting your time, is start the practical see how it swar. Finally, I am in a visual studio codtor. Side by side, I open stylet cs file and style dot css file. At first, I'm going to create a variable name list Dollar ist. Then colon here, I'm going to set some values. Five pixel, space, ten pixel, space, 15 pixel. Then semicolum two in this line. Now I'm going to create a class dot class one, then inside the alirass then I'm going to call a CSS property, which is padding here I'm going to use all the list function one by one. Let's call our first list function, which is length. So here I'm going to type length. Using length function, we can count total number of value in our list. If I pass the variable am dollar list, and set this file, as you can see, it's written padding three because we have to tell three value in our list. If I increase the value 20 pixel and then set this file, as you can see, it's written four. As you can see, it count multiple values. Also if I remove the unit pixel, let me show you and then set this file. As you can see it written four because this function is smart enough to identify the values. That's why without unit, it can count our values. And if I use comma between them and then set this file, as you can see, now it's also written four because we can create our list using space otherwise using comma. Let's back to the previous position. I'm going to press Control Z. Not only that, we can pass property and values in length function. Let me show you. First, I'm going to use round braces. Inside the round braces, first, I'm going to use with property with ten pixel. Also, I'm going to use height property. Height, five pixel. If I set this file, as you can see, it's retune two because we pass total two value in this function, width and height. This function is quite foul to identify these values. This is our length function which can count our list values. Now let's talk about our next function, which is NIT. But first, I'm going to duplicate this line and comment out previous one I'm going to type NI. Basically, we pass to two parameter in N function. In our first parameter, we need to pass the list value and in our second parameter, we need to pass the index. Let me show you. In our first parameter, I'm going to pass list Dollar list. And in our second parameter, I'm going to pass the index number, so I'm going to pass two. If I set this file, as you can see, it's written ten pixel. Now the quotien is why it's written ten pixel. Because as you can see in my list at index two, we have ten pixel value. That's why it's written ten pixel. We have to tell four value in my list. It's mean we have to tell four index in this list. In our second parameter, if I pass the index number, according to the index number, it return the value. Similarly, if I change the index number, four and then set this file, now you can see it return 20. Not only that, we can pass negative value also. If I pass minus one and then set this file, now you can see it return 20 once again. But the question is why? Because from left side, we count positive values. At the opposite way, we count negative value from the right side. So this is our minus one, this is minus two, this is minus three, and this is minus four. If I pass minus three, and set this file, you can see it's written ten. So we can print value from this way, otherwise this way. Now, let's talk about our next function, which is set it. I want to begin this line and comment out previous one. If you want to add a new value to our existing list, in that case, you can use Seth Neh function. Here, I'm going to type Seth Ne set nth. Inside the down presses, we need to pass three parameter. First, our list, then the index number, where you want to set? I want to set it at index two. That's why I pass two. In our third parameter, we need to pass the new value, and our new value is 30 EM. Here I want to replace ten pixel with 30 am. If I set this file, you can see the result. Five pixel, 30 am, 15 pixel, 20 pixel. Using this function, you can replace a value to your existing list. As you can pass minus value here. If I pass minus one and then set this file, now you can see it replaced 20 pixel with 30 am. Let's talk about our fourth function, which is Joan. I'm going to duplicate this line and comment out previous one. Here I'm going to call Joan function. Using joint function, we can join multiple list and we can create a single list. For that, I'm going to create another variable, which is is two. Also, I'm going to change those varios 50 pixel, 100 pixel, 150 pixel, and 200 pixel. Here, we need to pass dollar two parameter, List one and List two, Dollar, ist, comma, and our second parameter, we need to pass our second list is two, dollar, is two. So if I set this file, you can see it's written a new list, and we have total eight value in this list. Five pixel, ten pixel, 15 pixel, 20 pixel, 50 pixel, 100 pixel, 150 pixel, and 200 pixel. You can see there is no comma between these values. Basically, this function combined to list and written a new list. But what? If we use comma, in our first list, let me show you and in our second list, I just use space to separate values. If I set this file, as you can see in our new list, it used comma in our whole list to separate values. Also, we can pass another parameter in our joint function, which is separated. Suppose I don't want comma between these values. In that case, in our third parameter, we need to pass space. If I set this file, as you can see in our new list, it separate our value by using space, not the comma. As you can use auto value, it's the default value. So here I am to type auto. If I set this file, now you can see it proved comma between values. But if I do not use comma in our first list and then set this file, by default, as you can see, is written space. It separate our value using space. But now I want to separate this value using comma. In that case, we need to pass comma here. If I set this file, now you can see it provides comma between values. So our third parameter stands for separator. This is it for this tutorial. In our upcoming tutorial, we are going to cover a pen function, zip function, index function, is separator function, and e bracketed function. So thanks for watching this video, stay tuned for our next tutorials. 162. Sass List Functions Tutorial Part 2 : Hello, guys. Once again, I'm back in my visual studio coordinator, and as you can see, side by side, I open style SSPle and Stylo CSS file. In our previous tutorial, we'll learn about Length function, Nth function, set N function, and join function. But in this tutorial, we are going to cover the remaining ones APN function, Z function, index function, is separator function, and his bracket function. So without wasting your time, let's study practical. At first, I'm going to start with APN function. So I'm going to configure this line and comment out previous one. And here I'm going to type Append. Then our round brass. Suppose if you want to add a new value in the existing list, in that case, you can use AVN function. Suppose in our first list, I want to add 30 pixel up to 20 pixel. In that case, we can use this function. Let me show you how. This function adds on a single value. In our first parameter, we need to pass the list, which is dollar list. Then comma and then we need to pass the new value, which is 30 pixel. If I set this file, as you can see in CSS file, it's written 30 up to 20 pixel. It's adding new value in our list. We can add new value using this function. Also, we have third parameter that we can use as separate. Let me show you. As you can see, our values are divided by space, so here I'm going to use our third parameter, which is comma. If I set this file, you can see the result. Now you can see our values are separated by. You can use any value here, auto, space, Let's talk about our next function, which is Z function. I'm going to this line and comment out previous one. First, I'm going to inve this one and I'm going to type Z. Basically this function going to join two values. I want to say it had five pixel with 50 pixel, ten pixel with 100 pixel, 15 pixel with 150 pixel, and 20 pixel with 200 pixel. Here, I'm going to pass two parameter. Our first parameter is dollar list, and our second parameter is dollar is two. If I set this file, you can see the result. As you can see, it combined five pixel with 50 pixel, ten pixel with 100 pixel, 15 pixel with 150 pixel, 20 pixel with 200 pixel. Let me show you a good example for this. Here I'm going to take some color name. Inside the round presses, I'm going to take red, green, and blue. Also, I'm going to take another list. Is that the rounders is for red, I'm going to take 120. For green, I'm going to use 255, and for blue, I'm going to use 70. If I set this file, now you can see red color value is 120, green color value is 255, and blue colour value is 70. This is the good use case of zip function. If you do not use comma for separation purpose, let me show you so I'm going to revoke this comma and I'm going to use space. In that case, you can remove round braces. If I set this file, as you can see, it also worked perfectly. So it's totally on you, you are comfortable with separator or not. You can use Comma or webspace. Let's talk about our seventh function, which is index. I'm to beg this line and comment out previous one. And here I'm going to type index. Suppose you want to search something in your list. In that case, you can use index function. So as a parameter, at first, we need to provide the list name, and our list name is dollar list. In our second parameter, we need to pass the Keyword, which I want to find. I want to find 15 pixel. If I set this file, as you can see, it's written index number. I found our keyword at index three. If I remove the unit and then search the file, as you can see, it's also written three. But if I try to find a result which is not exist in this list, let me show you 40 and then set this file. As you can see, it's written nothing. If exist, then it's written, otherwise, it's written nothing. Now, let's talk about our eighth function, which is ist separator. So I'm to duplicate this line and comment out previous one, and here I'm going to type List separator. List separator. List separator basically return the separator name. Here we need to pass the list name and then it's going to return which separator we use in this list. I'm going to pass dollar list. If I set this file, as you can see, it's written space. So here you can see in our list one, we use space for separate our values. But if I use coma in our list two, and here we pass list two, and then set this file. Now you can see is title because here we use comma to separate our values. We have to tell two type of separator, otherwise, space. And now I'm going to talk about our last function, which is is bracketed. So I'm going to duplicate this line and comment out previous one. And here, I'm going to type is bracketed is bracketed. Basically, this function returns to value. True, either false. It is basically going to check does we use squared *** in our list or not? Here I'm going to pass our list name, Dollar list. If I set this file, now you can see it's written false result. But if I use square *** in our list too, let me show you and then pass, and if I pass is two in this function and then set this file, as you can see, it's written true. Basically, we are used this function with the condition, and we are going to learn about it in our upcoming tutorials. This is it for this tutorial. In our next tutorial, we are going to learn selected functions. So thanks for watching this video, stay tuned for our next tutorial. 163. Sass Selector Functions Tutorial Part 1: Hello, guys, good to see you. Once again, we are back with a new tutorial related SAS. And in this tutorial, we are going to learn SAS selector functions. But before we need to understand what is selected. Here you can see inside the class one, we have ncatag we said hi and we to our Anca tag, which is inside this class one. Our Anca tag is our selector. But SAS provides some invied function that can manipulate our selectors. Let me show you the function. So as you can see, we have to seven selector function in CS, selector next, selector append, selector replace is super selected, simple selectors, selectors unify and selector extend. Moving forward and start our practical. Here you can see I already open my Kuala application, and side by side, I open styled CS file and style CSS file. At first, let's clear a variable in our CS file. Dollar and our variable name is selected. Then colon. At first, I'm going to show you what is the usage of selector nest function. Here I'm going to type selector List. Basically, inside this selector nest function, we pass total two parameter, and both the parameters should be selector. For our first parameter, I'm going to take double codes for our first parameter, I'm going to use L and for our second parameter, I'm going to use I and then Semgoron two in this line. Basically, this selector function going to create our first parameter parentag and it make our second parameter child tag of our first parameter. I want to say it going to create UL tag, parentag and LI tag child tag. It's going to combine both the tag and create a select. To apply it, we need to create a class. For that, I'm going to use interpolation method. So first, I'm going to type has tag and inside the aliases, I'm going to use our variable, which is selector, dollar selector. So whatever value we have in our selected variable, it going to paste it here. Inside this selective function, I'm going to use a property. You can use any property. For now, I'm going to use height. Height tint pixel. Let's set the file and see what we get in our CSS file. If I set this file, here you can see in the CSS file, it creates ULTAgParntag, and Litag child tag. It combined both the selector and Made combined selector. Basically, this is the usage of selector nest function. Let me show you another example of this function. I'm going to remove this one and set this double code. I'm going to take totter two class. Our first class is XYZ and our second class is dot ABC. And now I'm going to take our second parameter. I want to use comma and inside the tower code. Our second parameter is P tag. If I set this file, here you can see in my styler CSS file, here you can see it create two different group of classes. First, it select our paragraph tag, which is inside our XYZ class, and next, it's select another paragraph tag, which is inside the ABC class. If you want to use sudo class, yes, you can. Let me show you. First, I'm going to remove this class, and I'm going to use only XYZ class. And then in our second parameter section, I'm going to type N person, colon, our Psotoelector, which is Hober. If I set this line, here you can see it use Ober selector with XYZ class. Here you can see if you want to add two parameter, for that, you need to use N person sine. Let me clear this section once again. Suppose with XYZ, I want to add underscoe ABC. Let me show you then utter N person underscoe ABC. If I set this file, here you can see, it creates a new class XYZ underscore ADC. This was our first function which is selectnNSt. Let's talk about another function which is selector apene. Here I'm going to remove SelectonNST and I'm going to type selector apin. Similarly, in this function, we need to pass to the two parameter. And this appen function going to combine both of this parameter. Let me show you. In our first parameter, I'm going to use paragraph tag. In our second parameter, I'm going to use a class. Here I'm going to type dot ABC. Selector nest function basically provide space between two parameter. But in append function, it's going to combine both the parameter. If I set this file, you can see the result. As you can see, there is no space between P tag and ABC class. I want to say it creates a single select. His means all the paragraph tag with ABC class, height should be 20 pixel. Let me show you another example. Suppose I'm going to use dot XY Z class. In our second parameter, I'm going to use underscore Copy. If I set this file, as you can see, it creates a new class, XYZ undersco copy. In our previous function, we need to use N person sine to join these two parameter. But in this function, we don't need to use person sine. Now, let me modify this selector and jump one step further. Super coopy I'm going to use Coma, and here I'm going to type underscoimage, IMG. As you can see, in our second parameter, we use two different names, copy undisco copy and underscoimage. You can take any name as you wish. I I set this file, as you can see, it creates total two different selector, XYZ underscoe copy, and XYZ underscoeimage. Basically, it combine our first parameter with copy, and again, it combine our first parameter with image and create two different selector. This is it for this tutorial. In our next tutorial, we are going to learn about our remaining selectors. Thanks for watching this video, stay tuned for our next tutorial. 164. Sass Selector Functions Tutorial Part 2: Hello, guys. Good to see you back. Once again, we are in my video studio code editor, and as you can see, side by side, I open style dot cs file, and stylet CSS file. In this tutorial, we will continue with selector function. I'm going to start this tutorial with selector RiplesFunction. Let me show you. For that, I'm going to type selector hyphen place. It is understandable from the name itself, it will replace something. In this function, basically we pass total three parameter. Suppose in our first parameter, I'm going to pass C dot XYZ. This is our class name. In the second parameter, we need to pass which we have to replace. Suppose I want to replace dot XYZ class. Here I'm going to tie dot XYZ. Now in our third parameter, we need to pass the new value, and here you need to pass the value, you want to replace with. I want to replace dot yate with dot ABC. If I set this file, here you can see the result. As you can see, there is no class name c dot XYZ. It replace dot yate with dot ABC. That's why it passed c dot ABC. Let me show you another example. If there is no H one class, H one in our first parameter, in that case, if I set this file, as you can see, it do not replace dot XYZ with ABC. It's simply print C dot XYZ because this reples function cannot find H one in our first parameter. That's why it print ADTs. This is the uses of selector repres function. Let's talk about our next selector function, which is E superselector. Here I'm going to tie is hyphen superselector. Basically, we use the selector for testing purpose, not the modifying purpose, and it's written only one with through either falls, and to understand it, we need to pass through the two parameters. In our first parameter, we need to pass a selector, but we call our first selector superselector. Suppose our super selector is A, and we'll call our second parameter sub selector. And in our sub selector, I'm going to pass a dot, and also I'm going to set a class X Y Z. If I set this file, it's going to return true. But the quotien is why? Because this function going to search our super selector in our sub selector. If superselector exist in our sub selector, in that case, it's written true. Let's set this file. As you can see, it's written through air. Basically, we use this function with IP condition. But if I replace their position, att XYZ. If I remove XY from our sub selector, and the set this file, as you can see, it's written falls because this super selector doesn't exist in this sub selector. That's why it's written falls. This is the usage of super selector. Let's talk about our next selector, which is simple selector. I'm going to remove this one and I'm going to type simple hyphen selector. Using this selector function, we can divide our selectors. If we pass combined selector here, it's going to divide the selectors. Let me show you. Suppose I'm going to pass here at ABC. If I set this file, here you can see it divide our selectors. It creates one selector A and another selector dot ABC. This is the usage of simple selector. This is it for this tutorial. In our upcoming Tutorial, I'm going to cover the remaining selector functions, selector unify and selector extend. Thanks for watching this video, Stu for our next tutorial. 165. Sass Selector Functions Tutorial Part 3 : Hello, guys. Good to see you back. This is our third tutorial, related Sas selector function. In this tutorial, we are going to learn selected Unify function and selector extent function. Let's jump into the Visual Studio code editor and see how we can use this function. At first, I'm going to call selected Unifi function, selector Unify. In this function, we have to pass total two parameter. Suppose in our first parameter, I use on the anchor tag, and in our second parameter, I'm going to use dot info. Basically, this function trying to create a match between the two parameter. If I set this file, as you can see, it create a match and create a new selector, at info. Let me show you more example related to this function. Suppose in our first parameter, I'm going to type ad active. And in our second parameter, I'm going to pass at info. If I set this file, as you can see, it creates a new selector, adt active dot info. Which means it's going to select on the anchor tag with active plus, otherwise info class. Then it's going to apply the CSS. But if I pass to different selector, let me show you anchor tag in our first parameter and H one tag in our second parameter. If I set this file, as you can see, it's written arrow because it did not create any combination between two parameter. This is the usage of Unify function. Let's talk about our last selector function, which is selector extend. I'm going to remove selector Unify and her I'm to type extend. This function also work like selected Unified function. Basically, this function try to extend a class and try to create a new selector. And in this function, we can use total three parameter. Suppose our first parameter is anchor dot info, and in our second parameter, I'm going to pass on the Anger tag. A, and in our third parameter, I'm going to pass a class dot link. So this function, trying to match second parameter with our first parameter. If they found a match, then it print AI, and then it tried to create combination with link class dot. If I set this file, as you can see, first, it create a combination at info. Which means it print as is because it found anger tag in our first parameter. That's why it print Asit is, then it create a combination dot info dot L. This is another selector. This function always create a strange combination. Let me show you another example. Now, in our second parameter, I'm going to pass H one tag, and in our third parameter, I'm going to pass H two tag. If I set this file, as you can see, it print our first parameter as it is, and it do not try to extend our selector. Because it did not found any match in our second parameter. That's why it cannot extend our selector. Basically, we do not use this complex selector function in our project, and most of the time we use selecto next function, selector apenFunction, and selector repress function in our project. This is it for this tutorial. In our upcoming Tutorial, we are going to start map functions. Thanks for watching this video, stay une for our next tutorial. 166. Sass Map Functions Tutorial : Hello, guys. Good to see you. Once again, I'm back with a new tutorial related says, and in this tutorial, we are going to learn map function. At first, let's try to understand what is map. In our previous tutorial, we'll learn about list function. This is the example of list function. As you can see, in a variable, we say total three el, ten, 20, and 30 pixels. As you know, we can store multiple value in list function. Similarly, in our map function, we can store multiple val. But the process is different. Let me show you. As you can see, this is the example of map function and we say total two value here, 405 hundred. But there is another value inside the inverted codes. One is regular and another one is medium. These are keys. These are map keys and these are values. It's mean regular value is 400 and medium value is 500. As you know, in our list, we have index. Example, our ten value index is one, 20 value index is two, 30 value index is three. Using index, we can specify the position of this v. Using their position, you can get the values. If you want to extract third index value, then it's return 30 pixel. But in maps, we do not use indexes. Here we use keys. Here we can set different name for our keys. This is another example. Here you can see we use a color name green and for green, we use x disial value. Similarly, for blue, use hex decimal value. Also a function in our map, similar to the list. And it has some inval function also. Here you can see, we have to six different map functions, map gate, map merge, map remove map keys, map values, and last one is map has. We are going to cover all of this one by one. Without wasting your time, let's start the practical. As you can see, I already open my Kuala application. Now you can see side by side, I open style CS file and style CSS file. At first, I'm going to create a variable and our variable name is font to it, dollar, font wait. Then colon. After colon inside the round presses, at first, I'm going to create our key and our first key is regular. With that, I'm going to pass our first value and our first value is 400. Then I'm going to create our second key, which is medium. Also, our value is 500 and our last key is bold. And the value is 700. Then Semgram to this line. This is our map, and now I'm going to use this map. For that, I'm going to create a class dot taste. Then inside the liss I'm going to use a CSS body which is font. Font wt. Now I'm going to call our first map function, which is map gate. Then inside the round dresses, we need to pass our map name and the key name. As you can see, our map name is font weight. Here I'm going to pass font weight. In our second parameter, we need to pass the key and for key, I'm going to pass bool. Inside the double course, I'm going to pass bold. If I set this file, as you can see, our font to it is 700. In Mp gate function, we need to pass to the two parameter, FontuO map name and the key. This function always written value of this key, as you know, our world key value is 700. But what happened if I pass different key which is not exist in this map function. Here I'm going to pass bones. If I set this file, as you can see, it's written nothing because there is no key name bones. If the key is exist, then map gate function written the b. Now, let's talk about our next function, which is map Key. Here I'm going to type map key. In Mp keys function, we need to pass to the one parameter, only the map name. If I set this file, as you can see, it's written all the key from this map. Our first key is regular, or second key is medium, and our third key is bold. This is the usage of Mapey function. It's written all the keys name. Let's talk about our next function, which is map ils. So here, I'm going to pass ls. It's also word like map key function. If I set this file, as you can see, its return all the values. And here we need to pass only one parameter like keys. This is it for this tutorial. In our upcoming Tutorial, I'm going to cover the remaining functions, map merge, map remove, and map hash key. Thanks for watching this video, stay tuned for our next tutorial. 167. Sass Map Functions Tutorial Part2 : Good to see you guys. In this tutorial, we are going to cover the remaining map functions, Map merge, map remove, and map haski. Let's back to the visor Studio code editor. Finally, we are in Visu Studio Code Editor, and we are going to start with map merge function. This function going to merge to differ a map and return one map. So we need to create another map. For that, I'm going to take a variable, and our variable name is lightweight. Weight. After semicolon, you said the round dresses, our first kinome is lightest, and our value is 100 and our second kinome is li and the value is 300 and semicolon to the line. Now I'm going to use map merge function. Here I'm going to type map merge. And if I pass another parameter, as you know, in this function, we need to pass to the two parameter. Here, I'm going to pass another parameter, which is another map, ie to weight. I copy the variable name and I'm going to paste it here. But there isn't problem. If I set this file, it's going to return arrow. Let me show you. If I set this file, as you can see, it's written arrow because map merge function return a new man, not a value. That's why we cannot print it directly as a value. We need to create a new variable to store this new map. Let me show you. I'm going to create a variable name merge. And now I'm going to call this function. I'm going to cut this function from this place, and I'm going to paste it here. Basically, this function merged to maps and written a new map, and now I'm going to call MapKisFunction. Here I'm going to type map keys. And here we need to pass our new variable Mug. Here I'm going to pass Mug. If I set this file, as you can see, it's return all the keys from our new map. As you can see, first it print regular medium bold from front to wet map, and then it print lightest and light from Light to wet map. This is the usage of map Merch function. Let's talk about our next function, which is map remove. We cannot call Map remove function directly. Similarly, we need to create variables, so I'm going to duplicate this line, and I'm going to change the variable name. Themve. And here I'm going to call map remove function, map, remove. In this function, we need to pass total two parameter. In our first parameter, we need to pass the map name. In our case, font to it, but in our second parameter, we need to pass the key name. Which key I want to remove? Suppose I want to remove bold key. So here I'm going to tie bold. And if I call our new variable remove in our test selector, and then set this file, as you can see, sit on regular and medium key only. I remove bold key. So this is the usage of remove function. Basically, we pass the key name which we want to remove. Now, let's talk about our last function, which is map hash key. So here, I'm going to type Map hash key. Basically, this function return to type of value falls either true. In this function, we need to pass to the two parameter. So as first parameter, I'm going to pass font weights, and as our second parameter, we need to pass the kiname I'm going to pass bold key. If the bol key in exist in our fontt map, then it's written true. So let's set the file. As you can see, it's written true. But if I pass wrong key name, bolder and then set this file, as you can see, it's written false. So this is the usage of map hash key function. So this is it for this tutorial. In our upcoming tutorial, we are going to learn says introspection function. So thanks for watching this video, stay tuned for our next tutorial. 168. Sass Introspection Functions Tutorial: Hello guys good to see you back. Once again, I'm back with a new tutorial related SAS, and in this tutorial, we are going to learn SAS introspection function. We already learn about number function, string function, color function, list function, selector function, map function. In this tutorial, we are going to cover introspection function. Let's see how many function we have in introspection function. As you can see, we have total six function in introspection. Basically, the function are using conditions. And it's always written Boolean value through other fails. Let's start the practical and try to understand how we can use these functions. Here you can see we are in visual studio code editor and side by side, I open style dot cs file and style dot css file. As you can see in our style dot CS file, we already create some variable num variable, char variable, list variable, map variable. With that, we create a mix in name border radius. Also create a function name sum. As you can see in our num variable, we save 15 pixel and in our char variable, we save a stream, roboto. In our list variable, we create a list using multiple value, 15 pixel, 25 pixel, 30 pixel, and in our map variable, we create a map. At first, I'm going to create a class where I'm going to check our introstection function dot taste. Inside the cali resis, I'm going to use a CSS property, which is padding. First, I'm going to start with variable exist function. Here I'm going to type variable exist, and here we need to pass the variable name. Basically, we use this function with p conditions and it's retten true or false. This function going to check if the variable name is exist in this file, then it's going to return true. Otherwise, it's going to return false. Let's check the variable. Here I'm going to pass dollar or variable name is map. If I set this file, you can see, oops, we need to remove the dollar sign and then set this file. Now you can see it's written true. If I pass a value which is not exist in our file, in that case, let me show you maps and then set this file, as you can see, it's written false. Let me show you one thing. As you can see, we check our map variable. But if I cut this map variable from this place and paste inside this selector, and then set this file, as you can see, it's also return true because if the variables exist anywhere in our file, in that case, it is going to return true. These are our global variable, but now map is our local variable. Let's jump into another function which is global variable exist. Let me show you. Here I'm going to type global variable exist. If I set this file, it's going to return false. Let me show you. As you can see, it's written false, but you can see our map variable is exist in our file. Then what's the matter? Because our map variable is not global variable anymore. Now it's local variable. Now our global variables are num variable, char variable and list variable. If I pass num here and then set this file, as you can see, now it's written true. Now, let's jump into another function which is mix in exist. Here I'm going to type mix in exist. In this function, we need to pass a mixing name. Here I'm going to copy the border radius mixing name, and I'm going to paste it here. If I set this file, as you can see, it's written true. But if I remove radius and then set this file, as you can see, it's written falls. Similarly, we have another function which is function exist. If the function exists in our file, in that case, is going to return true. Function If I pass the function name and our function name is sum and then set this file, as you can see, it's written true. Let's jump into our fifth function, which is type off. Here I'm going to type tip off. In this function, basically we pass a variable limb. Here we need to pass the variable lime. By mistake, I set this file, that's why it's written on this error and our variable lime is dollar list. If I pass this variable and set this file, as you can see, it's written our variable type, which is list. Similarly, if I pass char variable limb and then set this file, here you can see it written string. Our char variable type is string. This function always written variable type. Now, let's jump into our last variable which is in spat. Here I'm going to type in spat. I don't find any proper usage of this function because it's print as it is Vail. If I set this file, here you can see it sit on Roboto. We just use it for inspect purpose. If I pass last here and then set this file, as you can see it print our least as it is. I think it's not a very important function. This is it for this tutorial. Thanks for watching this video, stay tuned for our next tutorial. 169. Sass @content Directive Tutorial: Hello guys it's good to see you back. Once again, I'm back with a new tutorial related SAS, in this tutorial, we are going to learn SAS content directives. We already learn about SAS mixing in our previous tutorials. Using mixing, we can create reusable cone. We can use it as functions. As you can see, we create a mixing named BDI radius, and instead the mixing, as you can see, we use different properties for different browsers. Here we use prefix. For Chrome, we use web ket. For Mozilla, we use mose then I use the actual property border radius. As you can see, also we set the value. Whenever we need to call the mixing in our selector, then we need to pass the value as a parameter. As a result in our CSS file, it's written like this. Border radius five pixel. From here, we can pass multiple values. But from here, we cannot pass any CSS property. Suppose I want to set border style using this mixing, but it is not possible through this and to solve this problem, SAS introduce content direct trips. Basically, we use it to send extra data without mixing value. I want to say with this value, we can send extra data. Let me show you the example. As you can see, we use our same mixing, but here we use content directives. For that, we need to type at the red content. Whatever we pass it going to embed with this VLTs is the way to send data to this directive. As you can see, we call our mixing border radius and we set value five pixel. After that, we use tiss inside the caliss we need to pass the directive values Border style, dash. This is our content directives data. If I set this file, it's going to return this CSS code. After border radius, it set border style das. As you can see, it pass our extra data after border radius. Let's start the practical and see how we can use it. As you can see, we are in my user's Leo cod editor, and side by side, I open Stylod CS file and Styload CSS file. I already create a mixing named border radius, BD radius. And also, I call this mixing in our selector. And here you can see the result in our CSS file. And now I want to send extra data with this mixing for that we need to use Cali Races. And here I'm going to pass border style, so type, border style, border style, dst. As you can see, we send extra data through this mixing. But if you want to print the extra data in the mixing, for that, you need to use content directives. For that, we need to type at the red content. If I set this file, as you can see, now it's print boda style dans, we send the extra data through the content directives. Now we can send multiple property through this mixing. Let me show you another example. This time, I'm going to send complete selector through these content directives. For that, I'm going to comment out all the lines. Here I'm going to create a new mixing at the rate mixing our mixing name is taste. Inside the calicis, I'm going to use only content directives, add the rate contained. To use this mixing, I'm going to type include, add the rate, include our mixing name is taste. Then inside the calicis, at first, I'm going to take a selector and our selected name is class one. Class one, then inside the Cali resist, I'm going to use a propriety color. Color y so here you can see using this mixing, we are going to pass the complete selector with properties. If I set this value, as you can see, it create a class dot class one and inside this class one, you set a property color. And to run this extra content, we use content directives. Let me show you another example how we can use content directives. Suppose our class one selector is inside the ID one, to send this content inside the ID, we can use it this way. Let me show you. I want to set a IDH DAG and our ID name is men. Then inside the Cali resis, I'm going to pass this contain. I'm going to cut this content and I'm going to paste it here. If I set this file, as you can see, it put out directive content inside the Menu ID. That's why it print Menu first. We can use content directives this way also. Now menu become parent selector and Class one become child selector. Let me show you another example to usage of content directives. I'm going to comment out these lines. At first, I'm going to create a button selector dot button. Then inside the alyss first, I'm going to use border property. Border one pixel. I'm going to use solid border, son and I want border color. At the same time, I want to create a Hober selector for this button. Here I'm going to call a mixing, which I do not create it. At the red include. Include and our mixing name is Hober. Is the aliases, I'm going to set border with border with border with two pixel. Now I'm going to create the mixing name Her. Here I'm going to type at the red mixing. Mixing hover. Then inside the calibraces, I'm going to create a Posito selector for our class. For that, we need to use person sign in person column Hoger. Then inside the calices, I'm going to pass the content at the rate content. We use this person sign because we need to create the Her selector using button. If I set this file, as you can see, first, it creates button selector, and then it create button Her selector, and Boden with is our extra content data. This is it for this tutorial. In our upcoming tutorial, we are going to learn about it more.Thks for watching this video, stay tuned for our next tutorial. M 170. Sass @content Directive Tutorial 2: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related content directives. As you can see, we are already in my Visual Studio code editor, side by side, I open Style lot, cs file, and Styllod CSS file. Most of the time we use content directives with media query. Let me show you an example with media query. For that, I'm going to comment out all the previous codes, and here I'm going to take a body tag. Then inside the alyss, I want to set a background color. Background. Background gray. And now I'm going to create three different media query. At the red media screen, and inside the round verses, I'm going to use maxwPpty max W I want to set max 1,300 pixel. Then inside the aliases, I'm going to pass a selector and our selector name is body. I'm going to use the same selector and the same property. That's why I'm going to copy this section and paste inside the aliases here I'm going to set red background color. So when our screen resolution match with this media query, then it set our background color red, and now I'm going to create two other media query for different resolution. So I'm going to duplicate this section, and here I'm going to set 1,000 pixel. I want to say blue background color. Blue. So at 1,000 pixel Brazil wreath it set our background color blue. Again, I'm going to set another media query. So I'm going to duplicate this portion, and here I'm going to say 800. At 800 pixel, I want to say green background color. Here I'm going to type green. This is a normal CSS method. If I set this file, here you can see the result. As you can see in our CSS file, it print as it is, but now I'm going to use content directives for media quading. To use content directives, we need to create a mix in. At first, I'm going to create a mixing at the rate mix in. I want to use this mix in for media screen. That's why I'm going to set mixing name media. Then inside the round dresses, I'm going to pass a parameter, and our parameter variable is weep. Inside the alorss I'm going to pass this code, media screen. Copy this code and I'm going to paste it here. Here I'm going to pass over with variable. Dollar. Then inside the calibrss I'm going to use content directives, at the rate contained. Then semicolon two in this line. If you want to use this mixing, you need to include it. But first, I'm going to comment out lines, the media queries. I don't need this now. Now I'm going to include this mixing with Include QR, at the rate include. And our mixing name is media. Then inside the parenthesis, we need to pass the value. As you can see, our first max is 1,300 pixel. Here I'm going to pass 1,300 px. Then inside the calibraces, here I'm going to pass our additional content for content directives. Our first selected is body. Inside the Calibrass I want to say background. Background. Rate. As you can see, we use total three media screen resolution, 1,300 pixel, 1,000 pixel, and 800 pixel. I want to duplicate this section two time. Here I want to pass 1,000 pixel. At 1,000 pixel, I want to say it blue background color. Blue. In our last meteor equity, I want to pass 800 Value. Max with 800 and here I want to set background color green. If I set this file, as you can see, it sits on the same result. I print as it is. But this time we don't need to use media query word multiple time. We pass our content through content directives, and we already create a mix in for media query. From include section, you can change the screen size. Suppose I'm going to pass 700 pixel. If I set this file, as you can see it set our media query 700 pixel. Not only that not only that, you can pass multiple property. Let me show you. With background, I want to say border. Border two pixel. Solid. And our border color is white. I'm going to set this file, and here you can see the result. Now at 700 pixel, it set our background color green. Also it set a solid border with white color. This is the best usage of content directives. I hope now it's clear for you. So thanks for watching this video. Stay tuned for our next Tutorial. 171. Sass @media Directives Tutorial : Hello, guys, good to see you back. Once again, I'm back with the new tutorial related SAS. In this tutorial, we are going to learn SAS media directives and at true directives. Let's try to understand what is media directives. Here you can see a class named container, and we say container with 1,100 pixel and we center our container using margin. If we create mediaquery using CSS, in that case, we need to use mediaquery in this way. You can see, we set a breakpoint at 1,150 pixel and inside this media query, we set container width 900 pixel. When browser width achieved 1,150 pixel, they need to reduce our container width from 1,100 pixel to 900 pixel. As you know, for responsive purpose, we need to create multiple breakpoint for different screen size. You need to create a lot of media query. Also, we need to type the container width every time. Unnecessarily, we need to set container width multiple time. To resolve this kind of problem says introduce media directives. To use media directive, we can handle this situation. So let's see how we can use it and reduce our unnecessary lines. So as you can see, finally, we are in my Visual Studio code editor, and side by side, I open style Dot CS file and style dot CSS file. I already open my CSS directory in our Koala application. So first, I'm going to create a class, and our class name is container. Then inside the Cali resis, I'm going to set container week 1,100 pixel. Also, I'm going to set Margin. Margin, I want to center the container, so I'm going to use zero pixel. Also, I'm going to use Auto vile and now I want to set different media query for different breakpoints, but we are going to type less code in cease. Inside the aliases, I'm going to create the media coin at the rate media. Media screen, and inside the round process, I'm going to set the breakpoint. I'm going to type max hyphen with 1,150 pixel. So this is our first break point. So at 1,150 pixel width, I want to reduce the container width. For that, we don't need to type container again, we need to type with property. Width 900 pixel. As you can see, her use nesting meth. Similarly, I'm going to create two other break points. So I'm going to get this section two time. Here, I'm going to set max with 950 pixel. At 950 pixel browser width, I want to set container width 700 pixel. As you can see, we don't need to use container selector all the time. Similarly, at 700 pixel width, I want to set container with 500 pixel. Basically, you can see in my CS file, we work with only one selector. But if I set this file, as you can see, it's create total four different selector. As you can see, our first selector is our container, and three other selector is our breakpoints. In SAS, if we use at media inside the container section, we call it media direct names. Here you can see the difference. In our CSS file, every time inside the media screen, it create container selector. Then inside the continuer selector, it adjusts the container we. But in our cs file, if we use media directives, we don't need to use continuous selector again and again. This is the usage of media directives. Let's try to understand our next directives, which is at root directive. In our previous tutorials, we'll learn about SAS nesting. And here you can see the example of nesting. As you can see, there is a parent class inside the parent glass, we have a child class, and also we have a sub child class and cut tag. As you can see in our parent tag, we set with 1,100 pixel, and in our child tag, we set color red, and in our subchild tag, we set color pink. If I compile this file, it's going to return this CSS code. As you can see, it creates total three different selector parent selector parent and child selector, also it create parent child and subchild selector. As you can see, it's unnecessarily create parent tag in our CSS file. But I don't want parents selected every time. We can remove it using SAS. To resolve this problem, SAS introduced at root direct teams. In the next tutorial, we are going to learn how we can use it practically. Thanks for watching this video, stay tuned for our next tutorial. 172. Sass @at root Directives Tutorial : Good to see you guys. In this tutorial, we are going to learn at root directives. As you can see, side by side, I opened style dot CS file and style dot CSS file. At first, I'm going to create a nesting group. At first, I'm going to take a parent class dot and our parent class name is IM. Then inside the cali verses, I'm going to use CSS property and our CSS property name is colored, colored green. Then inside this parent class, I'm going to create another class. I want to create a subclass and our subclass name is item per item rapper. Then inside the caliss I'm going to use CSS property and our CSS property is color. Color red. Then I'm going to take another selector in our item wrapper, which is image. Image inside the coalss I'm going to take with property, we, we, 100%. Then outside this item wrapper, I'm going to take another class. I want to create another subclass of this item, and our selector name is dot item child. Then inside the calss I'm going to use a CSS property background. Background pink. If I set this file, as you can see, it automatically create to the fourth selector. Our first selector is for our item, and our second selector is for item wrapper and our third selector is for image, which is inside the item wrapper. Our last selector is item child select. Now, if you notice you can see, it's repeat item glass every time. Now you decide you don't want item class for this portion, for item rapper and for our image. To resolve this problem, SRS introduce at root directives. You need to type here at root directives. Here I'm going to type at the red at troop. Then I start Calibass we need to close this class after image tag. Here I'm going to close the cis and then I'm going to set this file. As you can see in my CSS file, it remove item from our selector. Here you can see there is no class name item. It's print item, item rapper image, but in our us selector, you can see the item class again. This is the usage of at root directives. Basically, it's unnecessary selector names. I hope you got the point. Let me show you another example of at root directives. For that, I'm going to comment out this section, I'm going to set this file. At first, I'm going to take a media at the ad media, our media name is print. Then inside the Caliss I'm going to take a class dot item Lepper. Then inside the caliss, I'm going to take another selector, and our selecting name is item. Then inside the calices, I'm going to use CSS property and our CSS property is color, color read. If I set this file, you can see it print our media. And inside this print you select item per item. Then inside the caliss it print color red. But if you notice, you can see there is no CSS property in our item wrapper class. This property is from item class, but it's also select this selector, item wrapper. But I don't want this item wrapper selector. If we want to remove this item wrapper class, then we need to use at root directives. Et me show you. After item wrapper, we need to type at the red at root directives. Then we need to start our Calibase also we need to end this Calibase after that. If I set this file, as you can see, it remove item rapper and now it's select only item class. As you can see it directly select item selector. It ignore item wrapper selector, which is completely unnecessary because there is no CSS property inside the item wrapper class. I hope now it's clear for him. One thing you need to remember at true directives come with predefined and we call it without. Let me show you the example how it's work. At first, I'm going to remove these lines, item wrapper. Then inside the media print, here I'm going to take a class and our class name is container. And inside the Cliivess here I'm going to take 22 property. Our first property is with 130 pixel. Also, I'm going to take another property which is colored, color read. We create this thesis for print purpose. If someone tried to print the page, then it going to print our container with 130 pixel and color read. But in our actual website, I don't want this color and we. For this, here I'm going to use our at root directives. At the read at root. Inside the calices here I'm going to use the same properties. But here, I'm going to change the values. For we, I'm going to use 100 pixel and for color, I'm going to use green. It's mean if someone tried to print our web page, they need to return 130 pixel with and red color. But in our website, it through 100 pixel and green color. Now I'm going to use the predefined value of at root directives. Inside the round dresses, I'm going to pass without, without and here we need to pass a value named media. It's mean, it is also part of container class, but without media. After set this file, you can see the result. As you can see, our print media work this point to this point and after that, it print without media. This is our website CSS and this is our print CSS. I hope now it's clear for you in the next tutorial, we are going to learn control directives. Thanks for watching this video, stay tuned for our next tutorial.