Transcripts
1. Class Preview: Hello and welcome to this class. And this class, we will rapidly guide you to become a tailwind UI designer. This course is funded, this class is friendly to do that. You know nothing about J1 CSS. As we start by teaching the basic concepts and still elements, we will first thoroughly explained the essential topics and concepts and grow through necessary tailwind CSS documentation in order to teach you the fundamentals for this class. So this course is going to be mainly the theory side of children's faces. And after this course we have glucose is low. The other classes are going to be the practical side of Tilman CSS where we actually dive into projects and implements a few nice websites using till one CSS.
2. 1 Background class group: Okay, so before we do the projects in this course, we want to go through the different sections for say, one CSS. So in this video we're going to be discussing the background sections for the classes and says I want CSS. So let's go ahead and start with the background color section. Now, there's many different colors you can use. So to use the background class, you just have to write bg and then followed by the color that you want. For example, BGO block will give us the black color. I'll be July, August, the white color. And also if you want to have a shade of that color, you can use the dash 5000100, the and you can do BG transparency or to make it transparent. So again, it's very easy to use the colors with the background. All you have to do is just BG to indicate it's a background color. And then the color that you want, and then the shade is all if you want to. So the higher the number, the darker the shade. Okay, so now let's move on to using which, as you can see over here, we have green. We can change it to blue, for example, and then we'll make it into a blue button. Now let's go down and talk about the opacity. So it's very simple login. You just have to use bg obesity. And the higher the obesity, the darker the basically darker is. And the less the opportunity, the more transparencies. It's very self-explanatory. And let's go down now. We have the responsibility for Tailwind. All we have to do is use the different facts. For example, if we want to use a specific color for medium devices with just her MD. And then we write the color that we want for large devices, LG for small devices, SM, so on and so forth. Now we have the hover effect. To use the hover, I have to just have a hover front of the car that we want. And then when we hover over it and the color will change to what it wants it to. For example, over here we're using several hundreds, so the, the shade of red will be higher, so it will be darker. And let's go into focus now. So when we click on this, it will become white. As you can see, the background color is gray with a shade of 200. And when we click on it, it will become white. Background obesity is very simple as well. You just put in the VG, which is background, and then you turn the opacity and then the number of the obesity, the higher it is, the more Piketty's and the less it is, the more transparent it is self-explanatory. Now, let's move on to background origin. So to have this nice effect, just like, just like a postal stamp, it has that cool effect around it to give it that origin and that authenticity. You can use background origin border, and then we can use background origin padding. So to give it's more padding as you can see in number 2. And if you want to give it some, if you want to make it a fuse contents, then it will show up. The slack is just like it shows a number three. And also, let's go down to the specific we're not going to reuse that just is worthwhile covering it. Now background position. So it's very simple. I mean, this is very common sense. As you can see if you go down on the usage section, we can see if you do BG leftOp it, who will stick the background to the left and to the top. If you just do the top, this was to get to the top bead your topic or skip to the top-right corner. So on, so forth. So now let's go on the background repeats. So with background repeats, you can have a background that basically keeps on repeating until it fills the entire screen. Or you can have no repeats, which basically just does it once. Just choose the background ones. As you can see over here. You can have repeat horizontally is also that it's distributed horizontally. Again is very simple stuff. You can just wanted to want documentation and anything you want, you want to go into detail. You can just go and see it over here. You have repeats vertically again, just vesicle repeats. So you'd just be GIPHY and I saw Peter to vertically. Okay, Now let's move on to your background size. So what background size? Okay, so background sizes is quite self-explanatory as 0, 0, 2 does. It basically shows you automatically to its default size. So over the image sizes is going to show it as it is. We have covered. Now if you use bg cover, Was it will do, it will basically cover the entire area, the entire scene. So that's basically there's no whitespaces. If we go down now, we have contained, contained will basically make the image as, as large as it can be without, without modifying the aspect ratio and also without cropping it. We have responsive as well. So responsible basically make it responsive. And so now there's gone background image. Background image. We can use BGN on to make the background image none. So there's no background image and we can use the different classes as you can see over here, we can have. Gradients, so basic. So it's implements the gradients from bottom to top. We have two top-right. So basically it's makes a gradient to top-right, from bottom to top right and so on and so forth. Just like as it states in there, we have linear gradients as well. And so it gives an element and ingredient background. So you can use like the direction that you want to go in, just like I explained. And then you can in the colors that you want. So for example, from 400 to VI, read, 500 to show basically you put in the college and then we'll do the gradient for you. So then we have gradient color stops. So, so again, just like I explained, but the color stops. So basically you can have a starting color and it goes from basically a starting color to white to white. And we can have from one color to a color. So from one starting culture and in color. And we can also have three colors. So from one color to another color to another color. So basically supports from one to three colors. Basically summarizes the background classes for this video. Again, I might have skipped a few classes because some of them were unnecessary and you don't really use them only in specific circumstances. So that should give you a good understanding of background colors which we will be using in our projects. All right, guys, so now that we have discussed the background clauses group, Let's go ahead and actually implement some of these classes to see how they look in action. Okay, first of all, let's make a new div and let's give it a background color. So give it a background color blue with a sheet of 300. And let's make the height of it at the height of the screen. As you can see, we have this background color. Now let's increase the sheet to make it darker. As you can see, has become darker. If we want to make it a certain color for, for example, large devices, we can do that using LG and then semicolon, basically with what we want, no semi-colon, colon. And then we can color that we want. For example, you are at 600. So now if the width becomes allows device, then the background color change to it. Now let's also do the obesity. So for example, wouldn't do the opposite here for large devices. So we can have, when the device is large, we can do BG obesity 50. And then that should basically make it more transparent. As you can see, the red now is more transparent. And now let's talk about the hover effect. If we want to hover over this, we can make it as a color Zola for example, hover over Vg, green and I will do like a 100. So now whenever I hover over, the div is becomes green. Now let's also cover the background image. Does another important thing that we're going to be using in our projects. Again, hey, I'm trying to cover the most important stuff because there's thousands of soften certain CSS and there's a lot of unnecessary things. So I'm mainly going to cover the foundation stuff. If you want to get into the details, you can always go in and say one CSS websites and you can basically find anything you want. The sonatas have a new div. And this give it a background image using style for example. So we'll do background image. You find the URL, so that's fine. Just a tailwind logo and I still image. Okay, let's take this one for example. And now let's style it up. So some classes, we'll use minimum height of the screen. Actually, no, let's remove that. For now. We'll use bg. No repeats, VEGF top. So now let me stop for the image from repeating. And VEGF toppled basically align it all the way to the top left. And also as give this height, but this gives us the height of the screen. So it will be basically all take up the full height of the screen. And as you can see your head, if we make it bigger, if we make this panel bigger. So you can see that stocks with the top-left of we change it to top. So sort of leftOp. We're going to just BG, which top, basically center and make it top stocks at the top of it, you and Watson. Watson, Watson is basically going to go into that position. There's also talk about the background size. So there's a few sizing, sizing classes that we can use to change the background image, the size of it. First of all, let's change the image because we want something that you can like, something with a background at our next perfect, because it has a good background so we can see how much is basically covering in the div. So let's change this image. And now if we, if we use the Vigenere repeats BG, for example, BG cover dashed basically covered the entire screen with the image. So Vg cover, as you can see now, the whole image. The whole div is covered with the image. If we do, we do contain, then it will basically would not crop out the image. So it's basically you try and get the entire image inside this div. And if we do BGO two, then it would actually get the actual dimensions of the image and it will display inside the div. Okay? So as you can see, the reason why I wanted to become, became so big because there is a dimensions of this image. So for the gradient colors, There's actually three types of crosses that we can use. So you can have just a starting color that eventually become transparent. So let's go ahead and do that. Let's have a div, and let's give it a color. So let's, let's actually give it a gradient of beach gradients to R. So it goes to the right. And we'll use all stopped the gradient from, for example, blue with the shade of 500. And we're just going to leave it, as you can see, becomes from YouTube, which you should transparent. And so now let's do the other one where you can have from color to another color. So we can have another color basically which is two, for example, purple. Or let's just change the color. Let's do from, from grief, a 100, two blue 600. And we have 100 to 600. As you can see now we have a gradient using two colors, three colors. You can also do that using a middle color. So we can also put them inside it, which is in this case is going to be blue. And we can do, we can do via grace, as you can see now we have the red. So now you have green, blue, and red gradients, official copies that basically covers our gradients. So if we want to change the direction of the gradient, we can do that from the class. So we have BG gradient to our in this case is going basically to the right. So from left to right, we do 22 cr. So top-right, that's going to make the direction from basically the direction will be to the top-right of we do for example, GB is going to be, sorry, would you be our bottom right? So depends on the direction you want to. You can basically choose the direction of the gradient and it will basically implement this direction for you. So that pretty much covers this practical aspect of the background group classes. I mean, I didn't cover everything that we have done in the theory. Mainly, I think I only missed out the background origin because basically we're just trying to cover the most important stuff that we actually going to be using and the stuff that are actually practical. So if you want to go into detail, you can always go through till one CSS and you can try these classes first off.
3. 2 Border class group: So now let's cover the border-radius groups. This group of classes are going to be quite important projects that we are going to be implementing. So let's cover them. So we have rounded none. This basically doesn't have any border-radius for the waters of the element that we're using. We have rounded SM. This basically gives you a small border-radius of 0.125 REM. And we have rounded, which basically gives you a more border-radius of 0.25 RAM, RAM. And as we go down, the border-radius becomes more like, more effective. And it becomes, it gives you more higher border-radius basically. And if we want to have like for example, we can also specify the actual wood is that we want to target. So if we want to do full, wanted to, for example, do you only the top border radius, you could do that, you can t. So we can basically specify the exact words that I want to use of wanting to the right one we could do are we wanted at the bottom one, you could do B, and we can also specify the size of it. So yeah, it's very easy to use. So now if we scroll down, we can basically look at these examples. So as you can see, you have rounded, smooth the water, it is very minimum. And if you have like we have rounded them, have MD and algae. Algae as you can see, it has the highest border-radius. So we have pills and circles as well. So we can run this full to give us a circle. And you can have, so as you can see, the water is really strong with the around it for now. And we also have rounded non-self. We already have a border-radius for a specific clause. We can remove that choosing rounded not as you can see that the header, the water is gone. And we can also specify a specific a specific border-radius from the elements select top or right or bottom border-radius and we can basically a control them. And the person putting the exact potteries, I want the width. As you can see, it's very easy, self-explanatory. Haven't you just put in the border and then you put in the number. The higher the number, the more width the model will have. And if you want to target a specific shade, you can do that using black board that she for, what are our G54 top are 48 L for left, so on and so forth. And as you can see over here, we have the different border, width, the height, the width, the more elite think we should, as you can see. So same with individual sounds, just like we explained. Basically targeted using the specific site. So T for top or fluorides before bought some alpha left. As you can see, we can actually talk, there's water would have a div and less basically give it some border-radius using, for example, rounded SM. So let's give it a height of 12, 10, 12, and make red. And then this two rounded SM. As you can see, we have a really small radiuses. Let's increase that unused rounded LG. And as you can see, we have much stronger border-radius. Now, let's also use rounded sought to make a complete circle. As you can see now circle. And now after this round and food is do rounded none to make it to remove their own radius. As you can see, that works. And now let's target the top of the water it is. Let's just give it a registry, run the CI, and we'll do three excel. So as you can see, the top border-radius is really strong and there is no border is on the bottom. So now, OK, so now let's give it some border width, which is you have to do like borders, your wallet, you, for example, that gives you what the width, as you can see. Now as the border, the right side, we want to give it only so we can do border right side 8. And that should basically give us only the right side water. And now let's do for example, border indigo 600. And that should give you a colorism. So the right side now is colored with the color indigo and a shade of 600. So that basically, you can basically change that using, for example, border, top, left, bottom. You can target the specific water you want. And that basically covers everything that is important in regards to the borders.
4. 3 Flexbox and grid class group: Now we're going to be covering the flexbox and grid glucoses. This is very important because we use this a lot in other projects. And this is one of the fundamental, one of the fundamental group classes that you will always be using when you, when you're working with Telemachus us. So first of all, let's start off with flex direction. As you can see over here, we have four classes, lecture, which is basically as the elements. Inside the elements you want to add inside a div, a row. And if you do go reverse or basically flip it and basically put it from the right to the left instead of restaurants. And flex Coase who basically at the elements inside a column div, it will add its in a vertical fashion. And flux core reverse it will basically, basically reverse the elements. So starting from the bottom up instead of from top to bottom. Over here we have the row. Just like I explained, when you use flexor, when you have these three items over here, when you have div wanted to 23. Now, the added in a horizontal fashion, so they are added to the right of each one. And when you, when you apply flexible reverse, it will basically apply the 0, add them all the way to the right and to the left atom, basically one by one to the left. And when you're using flux coal to add them in a vertical fashion, as you can see right there. And when you're using flex, flex column reverse, that will add them from bottom to the top to make it responsive. Again, just like we explained, the other group crosses, we just have to specify the device screen. And then you can basically add the classes that you want an order to sell that if in a responsible fashion. Flex wrap. This is very important as well for the projects we use it a lot. So what this does is that as you proceed from here, we have three types. You have flex wrap, flex wrap reverse and flex Europe. So we don't want your app, then you can apply Flexner up. And what this will do is that even when we have a smooth that is smaller than our contents, the last element was to be there wouldn't basically be wrapped and uncertainty on the next line. It will basically remain on the same line. And when you're using flex wrap, as you can see where we have used flex wrap, we have three elements inside this main div, which is, which uses the extra. Now, the third element is basically appended on the second line rather than continuing on the same line because the width it, because it can't fit in one and confident it will basically be inserted on the next line. And when we have rapid reversed, what this does is basically it adds the elements from bottom to top or from left to right, basically in this case. And again, to make it responsive, we just specify the specific device name and we can put in the specific flex wrap classes. So let's start off with flex one. So this allows a flex item to grow and shrink as needed and ignores the same initial side. So basically if we have, let's say we have an element, a development that uses flex, three elements that has flex one. Then let's see, we have three elements. Each element will basically take up half the space of that development is flux. So if we have three, then Israel would take up ACE2, just like we explained before with the, with specifying a specific weight, like for example with third half. In this case, you have to do that. We can just say flex one and it's automatically would put in there with for us. So to say, in this case we have figured out onto this example. Over here. We have three elements, that is flex one, and they share a third of the parent elements. So they share a third of the curriculum and two, because they were hard for them, they would each take CO2, so automatically, just, so let's go and it looks as though no wavelength, so too does, is allows us at integral and drink taking into account isn't shoe size. So it will basically see how much content there is for that item. And it will adjust the size of x accordingly to the content side. Size, which is basically initial size. For flex one. If there is a flex, then it will basically remove it. You see you have using black for example. You have many classes. I just want to remove the Flexner, especially you very handy when you want to do that. For example, debug something or like, make sure it works. You can easily do that using flexible as you won't have to remove the other process to make a responsive again, just like I explained before with the other group process, you can just specify the specific screen width. So MD, SM, LG, and then putting the flex classes you want, that way it will be responsive. And that pretty much summarizes the flex. So now let's move on to flex crew. So we have flex drew euro and flex group. So if we use those because it will prevent the item from actually growing with the screen width. So we have legs grew on then it will basically take up as much species it can available basically. Don't grow so good. You again, just like I explained, we have this example. See the elements that has a lock, the middle element. This one is using fixtures you, as you can see in the code. And now if we make it bigger or smaller, flames grows, you will always be locked and it would not grow. And other elements uses fixed grow on. So it will actually grow and grow and grow. And it will actually basically increased and all take up any, any available size and it will be executing. It will basically increases, establishes accordingly. Now, and we have two clauses, flushing 0 and fix shrinks, shrinks, does not let the item shrink. And shrink, allows it to shrink. That's pretty much it. Unless cover just about content. These are going to be a few important group of classes. So justifies taught, it's all basically. So once we have an element that uses, just if I start, the elements inside, it will be applied in a left to right fashion. So if we have, for example, a column, then it will be from top to bottom. And if we have basically a row, then it will be applied from left to right. Justify end will basically act just like if we have a row reverse. So if we have a row and we're using row reverse to justify and will basically do that. So then it will add the items for using a row. Then to add the items from right to left and column two other from bottom to top. Justify center will basically centered to have a column centered in the middle of the screen like vertical, vertical Santa Anna, for using growth will basically make it horizontal center, justify between it will basically give a space between the elements accordingly to how much space available there is around as well. Again, these especially between trees around and especially villi. So these are very similar in functionality. So differences between only gives equal space between the elements. Only the elements spins around, actually cares about the around the items, not between the items. So let's say we have elements inside a div. Only the first and last one we'll basically be have an equal amount of space, so between one and the actual div. So on the left side of the one, it will have equal space between just like three and the right side of it. So these 21 and left side will have equal margins, would just like three and the right side, that's based on those between the sides. So basically gives equal space in between the elements and the around elements. So basically the parent is also, the parent container will have also the margin between the element and the container will be the same as the margin between the elements and the elements. So yeah, it's quite confusing. I recommend you to basically check it out on documentation and play around with it so you can basically understand, but basically switch between is mainly what we're going to be using wildly going to be using speech around a specific ready, we're going to be using that. Okay, so now let's go through the examples shown over here. So we have justify start. It basically adds it from left to right. Justify center. The elements will be added in the center. We have just to end, this will be added to the right side. I think I made the mistake of her before because I said I suggested by n is going to be the same as using flexor reversed, but it's actually not because flexible, reversible ado, basically one on the first element will be added as one, and then the second one will be added. So it's a bit different, basically justify and align the items to the right. Whereas flux, flux through reverse basically flip them as also it will be 1, 2, 3 will be 321. I just wanted to clarify that before I continue. So space between so what this does, it cares about the spacing between the elements and it will set its equally, equally between them. So 123 will have between them, the spacing between them would be equal. Whereas space around, we don't really care about the specific, well, we care about the spacing between the elements, but the equal amounts will be between one and the container and three on the continuum. So the spacing between one and the left side, which is the spacing between the container and one, is going to be the same as the spacing between three and the container on the right side. So that spacing, spacing around these elements are going to be equal. And please evenly, It's basically gives equal spacing between, between everything, so between the elements and between the, between the elements as well. So that covers the justify contents. Now, let's move on to justify items. Okay, So now let's cover justify items that actually we don't really need to cover this because it's pretty much just like justify. Just like justify content. The only difference is this is used with grids. So I mean the only thing that's really, really stretch your class, suggestive item stretch clause. That is different. I mean, that gives it its going to be just like the flex group was to allow the item to take up as much specific to the justify. Justify contents is that justify items doesn't use space evenly space around and space between. It doesn't have discourses and it depends on goods. So yeah, that's pretty much it. So now we can go ahead and move on to the next section. So align contents. I'm not going to cover this and it's going to cover this briefly. The main differences between the justify content and justify items is very simple. The difference is, is that it provides it provides utilities for controlling how rows are positioned in multi-year flex and grid containers. So you have these courses as you consume content, center conscious thought, just like we covered, and they justify the justify-content and justify items. So contests and mix the contents. Center it and starts will basically make it start from the left to right and align it to the end. Specific stuff that we want for and are differences is that it controls how ROS oxygen and mature flex angered containers. Group of classes are align items. So we align items provides utilities for controlling how Flex and grid items are positioned along a continuous cross axis. So basically it allows you to position the items virtually. So we have items thoughts. Let's start with the items thoughts. As you can see, all the items are basically stopped the stock to the top. And we have sent out whether they are actually aligned in the middle. And we have end with a. So basically they are stuck to the bottom. And we have baseline. Baseline is basically when they are, when the content of them are centered. So now let's also cover the society. We also have stretch, which we didn't cover. Stretch basically stretches the height should be matching with the container. So it will be stretched out. So that pretty much covers the align items now. So this summarizes our flex and grid group of classes. As you can see from all the sections that we have covered. I hope that's basically if you need anything and you want to basically learn about this more in detail, just go on and say when documentation I highly recommend it because it explains everything in detail, but basically covers the entire flex flex box model and grid system.
5. 4 Layout class group: Potent group of classes is the container classes. And then it's going to be one class basically. This is another important task that we use in our projects and you will be using a lot in your future. Tones uses projects. So we have one crossed with its container and we can use it for basically we can have as MMD LG for the breakpoints. So it basically allows, basically contains items and contents. So you basically put in your items in a container and then gives with it, it will automatically adjust the maximum width so that as your screen gets me got two different devices will have different width. So basically check the width and it will have a max-width for that current device. So let's just show you an example. So it becomes nuclear. So as you can share it now, we have, our device width is 446. If we were to increase that, it will basically increase with it and until it gets you 640. So let's go back to the documentation is to explain. So we have SM devices isn't devices. So the container wouldn't have, if we have a screen more than 640 pixels, it will basically have a max width of 640 pixels. So now we're at 640. As you can see, the max width is 10. So now the max width is two or 640, even though our device is 744 pixels. Why? Because let's go back to the commutation. As you can see, the next one is MD. Md requires the screen to be above 768 pixels. One is above this, then it will set the max width to the 768. So I wanted to basically reached that as soon as we receive hundreds exceeds the maximum width increases. So we have these breakpoints. So a container will automatically adjust the max-width so that the content doesn't go overboard. And it doesn't look unless you do like a specific class that allows you to overflow your contents. And then it wouldn't like if you use flex wrap none, then it would allow the content to remain on the screen. But otherwise it will basically allow you to keep the contents within the screen and the user wouldn't have to scroll. So I know the thing is the first, the first breakpoint. Let's go to the documentation. The first breakpoint has a maximum width of a 100. And that would be applied when your screen devices below six hundred and six hundred and forty pixels. So that summarizes the container and how it basically it keeps your contains the items and how it, how it keeps it responsive. Now we're going to cover the positioning, the position group of classes. These are very important when positioning your elements, when you're using on your standing them. So what we're mainly going to cover the absolute or relative positioning because these are the ones that we will use throughout the project. And you will be using them as role in the future projects. So let's cover the absolute position. First of all, I will actually discover the relative degrees. That's what we mean use to relative position allows positions and elements according to the normal flow of the document. So if you haven't elements before it, and then you add the next element after it in the code, then it will be actually positioned right after it. So right after the other one ends, this one will be positioned. So as you can see, a very advertising parents and you have absolute child. So when we have the, we have for example, the paragraph allele parent div after it will be, will be basically inserted right after their relative parent. Absolute positioning. So with absolute positioning allows you to position an element outside of the normal flow of the document, causing the neighboring elements to act as if the element doesn't exist. So the one before it wouldn't really affect the current element. So let's say we have in the code we have a div, and then the next step after it is absolutely positioned. Now the first element before it is relatively positioned over positioning it uses, it would not affect the one after it. So it wouldn't be inserted right afterwards, like it couldn't be with the relative. So in this case, as you can see over here, we have an absolute shout. So as you can see, when we're using static positioning and the first one and the Secondary using absolute positioning. As you can see, the absolute child is static. Static shot is basically fixed Try of their static musically and actually shout, has its own style, doesn't care about all the other cells. It will even be on top of them. Wants to, depending on how you have positioned it and how you have basically aligned it as well. So that's the difference between absolute and relative, which is what we basically mean. Use.
6. 5 Sizing class group: Alright guys, so now we're going to be talking about the sizing group classes. First of all, we have the width. So as you can see over here, we have the different classes for it. And that makes them with your pixels. We have with Px, which gives me exactly one pixel. With your 25. It gives you five. As you can see, each class has its exact measurements. We also have these fish grow down with half. It gives the percentage of 52. It will be exactly 50 percent of the screen width. Third will basically make the third of the screen. If you want to find out the details, you can basically go to the documentation on chairman CSS. We also have auto width. So with 0 to adjust the divs width accordingly, accordingly to the element, to the content of that div. We also have screen width. So W screen would basically what we'll find the screen's width. And it would set the divs with accordingly to the screen where suits who filled the width of that of the width will be basically that's the entire screen width. We also have fixed width. So you can basically adjust the like user specific width. So as you can see over here, we have eight and you can see the different sizing. And respect to the numbers shown. We also have fluid width. Now with through it. As you can see, if we have half the two types, we can have two elements would have, and they will take up the entire section. Or we can have like three of thirds, three, three-thirds, or we can have, for example, splits. A third and two-thirds allows you to have a very nice dynamic with just like we have with flexing Bouchra basically. We also have full, which basically also just like with screen and kind of the same thing and takes up the entire area. In this case, pick the width responsive, you can select the different styling based on the screens, the screen size program for medium devices, we can have accustomed with class and for small devices we can have a customer class and that way it will be responsive for good. And now we have these actually. Now this glutamine with this discovered the main stuff that was as important as some other stuff are very detailed about she would only use them in specific circumstances. Whereas we're just going to cover the stuff that you mainly going to use. For min-width. We can have, we can specify a minimum width so that when the, for example, like when we have elements, it would not be any smaller than the minimum width. As you can see in this case, we put your shoes and it will be 0 pixels. But if we specify a different number than it should obviously respect that number. Minimum was full to basically be a 100 percent. So now let's move on to other important clauses. We have responsive again for responsivity. Again, just like we explained before, we can have specified the minimum width based on the screen size and mass will basically adjusted according to the screen size and max-width. Again, it's pretty much same stuff. Just kinda have to know. Uses two condition whenever you want to accuse specific stuff. But apart from that, again, same thing. So we have max-width, euro is makes the maximum width of 0 pixels, basically 0's, this case. And if you have max, none, that will make the maximum width like you would if you had, if you had the maximum width, would basically remove it. And maximum width extra smooth. Basically it will make it into do it would be set to 20 RAM for maximum width. Again, these classes, you can check them out if you want. You Djibouti shows, but yeah. So The Sea scroll down more. Let's just go over the usage of this. So in this case we have maximum width mg, which is basically mixed the maximum with medium. If we go up, we can see that the maximum, maximum width will be set to 20 REM for the maximum. So as you can see right over here, we have given it a lot of the screen. The screen's width is a lot of his crew. Thermic is motor. We can see that if we keep going on and I was getting smaller but only get bigger, it keeps game. We go, Let's do that slowly actually. So let's go smoother and we'll go because slowly, as you can see is gambling again began to it, which is an axon with then it was so Gambia. So now we can go down. Let's go on the height now. So let's go over the importance of an heights. So again, over the height of 0 pixels, again, it's just the same as the other classes that I explained. Hp x will give a height of one pixel. And you have all these other custom classes as well that you can use O2. So basically, I just did according, accordingly to what the height of the button will be, set accordingly to the content of it. So the O2, as you can see, it will take tried to. I will try to adjust the height in accordance to the content of that budget. So if we go down, we have this screen heights. Hey, screen will basically check the highest the screen of the speed that you're using. And it will fill, will take up the entire height of that too much the screen size, basically. We have fixed height. We have, again, just like we did with a fixed width, we have all these numbers that will allow you to specify a specific height. We have full heights, and this case, it will give o to match the parent's heights. So, so over the parents of that division, it will match the same height. To make it responsive again, we can use different. So if we wanted to make it responsive, we can use the different device names. So md for medium devices as N for small devices, LG and everything. And then we can specify the exact heights classes. And then that will make the height responsive. And according to the screen's width, I'm sorry, in the course of the screen size. Let's go to them in haste now. Again, just like min-width, we have these specific classes to control the minimum height of the, the elements of elements. So minimum height of 0 will make it 0 pixels, minimum, and minimum height of fall will make it a 100 percent minimum. A minimum height screen will make it accordingly to the screens heights. So as you can see, you have a two, the minimum height is actually set to full. And we have this illustration of a which basically show you this. And you make it responsive again, we can specify the specific clauses for different screen devices. Macs heights. So now from oxides against she's going to be like max-width. You have these courses for the max height. And you can specifically pretty much same as for the height and width. And you have these examples as you can overhead just like I explained before. And yeah. So that pretty much sums up the That pretty much sums up the size of the group classes sizing. So now let's go over to the editor and let's, let's actually try to implement these courses that we have just talked about. Let's go through the screen's width. So let's use some of the classes over here. First of all is do hedge 12 W screen. So basically it will take a height of 12. We'll take a complete width. And now let's give this a background color of blue, shade of 500. As you can see, it's actually taking up the complete words. It'll having WE skinless is for example, W eight. That will basically give us a fixed width of eight. Now, even if we have a bigger dimension of we have different screen sizes there with homies will always be fixed width of 12, for example, in this case, I want to make a big open 24, and that will basically make even bigger. Now let's move fluidly. So now let's have a div or we have to, inside it that who have each one will have its own width. So let's use flicks. And then inside this we're going to have W0, W1 over 23. So that will take half of it. And another one will also take up another half. Or let's do two more good, two quarters, one-quarter, 1 over 4. And then we'll have another one, 1 over 4 from this common basis one. And this give it a background color. So let's make this one green using vg green with a sheet of 100. And this one, Let's make it VGB with sheep of 600. And this one has to be 600. And now let's actually see this in action. For the parent component is the hydrogel. So let's give it a fixed height of comb. As you can see, we have the first div. It will take half for basically take half of the screen. And then the other two, you will have a quota each. So if we were to, for example, do each one the third. If we were to change the width and make it a third for each one, then each one will basically take a third of the proportion of the screen width proportion. Now, we can see, Let's try out this new responsive to know. For medium devices we can specify, we can make this one is a 4.5 and what devices we will take up a third set out for making devices or whatever, 3.5th three. I know for other devices voting for a third. So if we were to change the width as you pursue for what you have different devices. So now it will takes up a third of the way. If you make a bigger, it will take up half. Now, let's cover the minimum width. So let's have a div with a width of 20 for a fixed width of 24. And let's make it blue, BW for the shade of 200. And let's also give it a height of 2024. And as you can see, we have this increase the sheets you a 100 to make it more clear. And as you can see, now, if we were to use minimum width of, for example, fall as you've been and where it's full. Now that would make them you want to be full. As you can see, it was set to 24, fixed width of 24. But when we have minimum width for that, it's always going to be formed minimum. So now let's cover the glucoses and we're going to start off with fixed height. So let's leave with 24 and let's give the background color. How is we're just going to give it a height of 12. And as you can see, essentially 124024. Again, just like it was with same thing. And now let's cover the full height using screen. And that will basically check the screens height and then it will match it. And again, just like the other classes. So for the height is going to be the same as the width stuff that I already explained. The only differences That's basically apply it to the height and the width. So there's not much point of actually covering it. Again, that pretty much summarizes the sizing group classes. So now we can move on to the other group process.
7. 6 Spacing class group: So now let's move on to dispatching group classes. First of all, let's start with padding. This is very important because we use it a lot in our predicts. So there's going to be quite simple, as old as you can see from the permutation p 0, we'll give it a padding of 0 pixels all around. So all do top left, right, and bottom PPE X with exactly one pixels. And as you can see, all of the other properties, as you can see from the documentation is quite clear. So the higher putting the basically more padding or review it. And you can also specify specific findings as well. So you can use also px and py. Px basically gives its horizontal padding and Puyi gives it vertical padding. So it'll only do left and right if you do horizontal and it will do top and bottom filtering. Vertical, so vertical px is horizontal. You can also specify that the specific side you want to get funding for, for example, padding top six, that will give it basically a padding top of 1.50.5 REM. And you can do padding grades and padding, left padding Watson basically specify the specific site that you want to add padding to. So now let's move on to xi. Well, okay, So we have, so these are some examples of her. We have, as you can see, padding top six, you can see that that area that was highlighted with those stripes that shows you the padding right there. So padding top six, you can see that there's a padding added to the top. Padding right, gives you some padding on the right. And yet self-explanatory basically. Now we can see the examples for padding. Padding horizontal PXE. So that basically gives you a padding of h on both horizontal side, so left or right. And you have vertical padding, which as you can see, is only for top and bottom. So a normal padding, as you can see from the illustration, padding is actually applied to all of the same despite using padding and then the number you want to add. And to make a responsive is very simple. We just have to specify the specific device screen and then we can add the padding for it. So we can have multiple codons for different devices. Okay, So now let's move on to margin. Margin is also this group of gases are very important as well because we used it a lot now projects and you will be using it a lot inside your future children predicts. So again, it's going to be pretty much just like the padding. So there's no point are covering get. I mean, each class has its properties on the rights. Specifically, very well explained. You can check out the commutation dissolves. You want to check out if you want to see the details of this. But anyway, we can move on to using these marginals basically. So the difference between modules, again, everything is pretty much going to be the same as like very similar to putting. The only differences. Padding is applied to that inside the elements, and Morgan is applied to the outside enemies. So the margin would basically given watching between the currents elements and the elements. Basically it's around. So any enemies are close to us or basically put in models between them. Whereas padding it will actually be applied to the element itself and it will be actually padded inside. The element will actually be palate. So yeah, that's pretty much the same. So if we go down to these are the margins to a single-site. We can basically use mth, as you can see, applies wanting to the top margin, right? We'll give it Moderate, relatively self-explanatory. No point really discussing the details. I mean, it's very self-explanatory. And you can have horizontal margin again, gives it only applies to the left and right sides. It gives it a multinomial on the left and right margin Vertical, are you to the top and bottom? And yeah, it's pretty much disabled. And if you want to make a responsive, you can specify the device screen. And then you can also add in the specific modules that you want to use. The important thing for margins as well is that you can have negative margins. So there's a, there's a lot of margin between two elements or let's see, the other elements has a lot of margin and that causes the current element to be further away from it. We can actually apply negative values. And that will allow us basically to shift their current elements and make it closer to the other elements by removing some of the merchandise actually applied. So it's very simple, you just specify a negative before the actual. So if we were to have module, next module is on 272. In this case, we can do minus before the, before the actual class. And that will actually basically apply its inverse. So it actually removes the margin, not absolute. So let's also apply some of these gases that we have just talked about. So let's make a new div and let's give it a class of background, color. Background color, red, the sheet of 500. And let's put in some text just to see how everything looks. Okay? And so then we're going to have some H1 with hello. And now we're going to give it some margin. So you can see that with the Hello is going to have some module. So we'll give it a margin of Module 12. And as you can see, the actual H1 now has a margin on the left, on the top, on the right, and on the bottom. And there's actually have another each one. So we can basically see we have two H 1s and said this div, just to see this margin. As you can see now, we have, the first module, has the first three elements, has modules on the second one doesn't. And as you can see, the full remove the margin from the first elements that will be basically stuck together. And if we add margin, horizontal for example, then for the first element using MX, for example, 12. And as you can see, the margin is only applied horizontally. And if we do MY, it will be applied vertically. And if you want to apply it on all sides, would just do M Cohan, for all sides basically. See we want to reduce the margin from the huge one and shifted up. We can apply negative margin. Margin. So we can do minus margin top and we can do 12. And that will basically shifted up and it will make it on the same level. So that's if you want to apply negative modules. Now let's apply some padding. So let's give this one a padding of, for example, by adding six. And that should basically give you some padding. And this sort of margin top this do padding 12. As you can see, we have no, Because before when we use margin, the margin was being applied to the outside elements. So that's why we had the whitespace. But now in this case is actually being applied inside the element. And that's why there's no whitespace anymore and the actual padding is applied rather than the module. Okay, So that pretty much summarizes the padding and margin glucoses. We can now continue on to the next section.
8. 7 Typography group class: All right guys, so now we're going to cover the font family group of classes. So the font-family classes are mainly three. So we have the font sans, serif and formula. And you have these default presets that you can use. And of course you can use your customers if you want you, but these ones are already available with Tim and CSS. Jews, for example, san-serif, you just have to do four sons as a cloth. And you serve in uniform serve. And to have to use monospace font on a. And that I should apply those fonts. And we're going to cover the font size is very straightforward, as you can see from the class. So you have access which is extra small. We'll have assembly which is very small, which is more basically. And then you have base and you have large. As you go down, the phone becomes bigger. And off we go down to usage. Shows this. As we go down, the classes get bigger. And yeah, you can make it responsive is all for by applying different fonts for different devices, for different screen devices share. So now we're going to cover the font-weight. Again, it's very simple. As you can see from the classes we have Fontan, which gives it a font-weight of a 100 for an extra rights because iterates of quantities of 200. And as we go down this list, the font weight increases. And what this does is makes it more bolded mix the fonts thicker. So as you can see from the usage will go down to the usage. So this controls different way of an element using the font-weight to, as the weight increases, basically becomes mobile, cover the line heights. Again, this is very simple, as we increase the leading, the line-height also increases thus way, for example, if we're using the sleeping inside the paragraph and we have like for example, leading relaxed, then the spacing between the lines will be higher. So we'd have more space between the lines. So the last piece you want use between the nitrogen and the misleading use line, high-school, you will have. So as you can see, if we go down, we can see from the different needing. So you have leading, snowmobiling, normal good acts. As we go down, the leading increases and then the more spacing there is between the lines. So that covers that for the, that covers everything for line-height. Let's cover the style type for lists. So this group classes allow you to basically sell the list. So if we have list none, then what this does is basically it will remove the bullet points from the list. And as you can see over here, too, if we want to have blue points, then we can use list disc. And this will, this will basically give us bullet points for each, for each list item. And if we want to have numbers and we will use this decimal and that will give us like 1, 2, 3, 4, each list item which will number it, text alignment group of classes. These are very important because we use them lost in the Projects and Resources covered this. So we have texts left. That's basically alliances apps from left to right. Srilanka text from Australia and texts into, aligns the text center. It's extra transit from right to left and tells justify it basically makes it into a block. So as you can see, if we go down to the example, this is a good example of when you understand what I mean by texture so far. So for text left, as you can see, the text is going from left to right. And CentOs being centered and writes is being, is being aligned from right to left. And takes justify, as you can see, it's a block, so it will cool spacing and everything in the lines so that it's basically has a block structure, square structure. So now let's go through ticks color. Again, this is very important to use this a lot in the projects. So we have text transparent to make the checks transparent and texts currents to give it the collage you can see over here, the sort of like a light black text block will basically make it black. And as you can see, each, each color would basically make the text color and the sheet as you increase the student document than the darker the color will be. So as you can see, it excrete 500 and then you have to excrete a 100100 is much darker than 500 education through that pretty much sums up, let's go down. So in terms of using these scholars simple text and the color you want, and then you can present the sheet of what you want and to apply it as go through texts. Obesity. So the obesity at basically the more high-end number. So we would use obesity as text the neuron oppositely. And then you put in the number of efficiency, the level of basically, the higher the level of obesity, the more opaque it will be, and the less level of obesity, the more transparent to be. If we go down to the examples, as you can see, we have, we have these texts and the first one has opacity of a 100, very opaque and not be transparent and lost. One has a density of 0 and as you can see, it is looking quite transparent. So you will see the colors behind it or if you have something behind it. Okay. That pretty much summarizes it. Cover text decoration. So we have these three causes underlying lines. We are no underline, so pretty much self-explanatory. So underlying, underlying states, as you can see from the example, strikethrough basically causes it out and no underline removes the underlined. So if you have underlining the retina online and it's form of landline for you, pretty much sums up the typography section. I hope everything is very clear. So that pretty much sums of these classes up.