Let's continue talking about CSS, gasketing style sheets. So let's go to the sign up page. You see sign up page could use a little touch up. So before I do that, let me explain the concept of how can space things out and to understand that you need to know what the box model is. So if you right click anywhere here, inspect. In particular, I want to point to this one here. Let me see if you can find. Oh, it's hard to get the... Oh, it's because...wait. Is it because I didn't put in any tag? Okay, let's go back. Anyway, this one is not doing it. Let's go back and look at this H1 here. So as you can see, each one has some spacing before and after. And that's because the browser itself has some default styles. That every browser that you look has some default styles for the H1. And the thing that you're seeing that's highlighted there in kind of a beige brown color is the margin. Now you might have heard margin, border, padding, what are all those things? Let's talk about. So I think the easiest one to understand is border. If I go to this H1 and go here, add border, it's basically the thing that surrounds it, the line. And this CSS property is interesting. It doesn't have only one value. It's like a shorthand that multiple values are jumped together. And the first thing is the width, border width. I'm going to put one pixel. And then space, solid for border style. And then space the color. Let's put black for the border color. Now this has three values separated by a space. Now if I didn't do it this way, I would have to write every single property individually like this. The first one is border width, one pixel. The second one, I'm pressing tab by the way. The second one is the border style separated by a dash with solid. And the last one is the border color, which is black. So if I didn't use the first one here, I would have to write them out each one individually like that. So if you want to be kind of lazy and not write every single line of them individually, use the shorthand border property and use the three values like so. Okay. Now as you can see, there's some line, an outline for the h1 and that's the border. Now let's talk about the box model. If I go here on Chrome, I think it's on the computer tab. On Firefox, it's a different tab I think. You have to browse through them and see which one has this box model here. I think of Firefox. Let me try Firefox here for those who use. I usually use Firefox for these demonstrations. So let's just show you for the sake of example. Firefox here. Open the DevTools the same way. You see it says inspector in Chrome its elements and rules in Chrome its styles. And I think here is layout on Firefox and you scroll down to the box model here. Anyway, I'm going back to Chrome. I just wanted to show you that this is the same function. So this is the box model. So how do things go? You can see here, we just added border is this thing here that's highlighted. This tells you what's the border top, what's the border right, what's the border bottom and what's the border left. Now I said all these words because that's important because those suffixes appear in different properties. Top, right, bottom and left. Okay, now you see there's padding here and there's margin outside. Now you can see there's some margin at the top and margin bottom of 16 around. And that's the space outside. So if I were to go back to styles. And I'll show you here if I type margin like this and start from one pixel and I increase it. You see the space outside the border is increasing on the all sides top, right, bottom and left. This is a shorthand property. So if you actually wanted to target just one of the sides, you would have to write for example, margin top separated by a dash and that would add only to the top. You see it's increasing to the top and then margin right. If you want to add to the side on the right and then margin bottom. If you want to add to the bottom and then finally margin left. You can see a type four different things and it's kind of tedious. So if you don't want to type all of them again use the shorthand property margin like this and it will only change for all of them. Now this one is interesting also because you can actually specify a second value if you want like 10 pixels. What does it mean? Well, you can play around. Let's see if I increase the second one, you can see the sides left and right is changing. So this is what it means. The second value is left and right and this other one is top and bottom. See that? All right, so you can even go further to have three values and four values. But what do they all mean? Well, you can play around and type them here and see them changing and understand what it is. Now the way is reading the docs. For example, open a new window MDN and that was margin, right? This is the doc file Mozilla developer network that I recommend for you to understand the properties. So if you scroll now under syntax, it will tell you the shorthand properties with the different number of values. For example, the first one applied to all four sides. And the second one you can see here, first one is top and bottom and then the other one is left and right like we saw. But there's also three and four and what they mean is just what you read here. Okay, if it's three, the first one is top, the second one is left and right and the third one is bottom. And then for four, you can see it's top and right and bottom and left. Now you can read the docs if you ever forget or you can play around in the dev tools. Anyway, going back there. So that's the margin, that's the space outside the border. Now we can also have padding. If we add padding here, it's just like margin in the sense of if I just, I could do separately left, right, right top, right, bottom and left. Or I can use a shorthand padding with either one value all the way up to four. So if it's one value, it's all the sides. So if I start for one piax and press up in my keyboard, you can see the space inside, right, within the element, the border is increasing and then decreasing if I put it down. So that's the padding. So it's very important to understand the difference between margin and padding. If you click computed here, I like that you can see in green, that's the padding. And then you see the border separating the margin outside, which is kind of beige color. And also here you can understand the side here if you highlight these things. They'll tell you, okay, this is the padding. That's the border and that's the margin. And it tells you top, right, bottom and left the pixel value there. Very nice. And the middle here is the width, across the height. So it tells you, oh, this element content has 913.6 width in pixels and 27.2 height in pixels. If you ever want to understand, if I refresh here, what default value for an element is, you can always select it like the H1 here. And under in Chrome, it's computed and you got to go here and click show all. You can find out all the default CSS properties for this element and it can even filter here. What if I want to see margin? Oh, these are all the default margins that it applies. There's a margin border of 16, around 16 and top 16, as you can see there. Yeah. What about padding? Well, I can go here and filter by padding and can see there's zero padding for all sides, left, right, top and bottom. The same function is available in Firefox. I think it's in a slightly different place. If you're on Firefox, like I'm showing, I think you got to go to computed and click browser styles checkbox to see all of them. And then you filter here like we did, like for padding, and you should see it, all of them. Okay. Just slightly different place, but the same functionality. Going back to Chrome. So that's the box model. So that's pretty much how you would add spacing between things. And to exercise that, I'm going to go to sign up and let's work on this at making it prettier. Because I think the first thing we see that this form that's bad is everything is together very close, right? So we want to separate all these fields by some space. Let's do that going back to VS code. I'm going to go to sign up and have it on the side here. And let's style that. So let me focus on sign up.html like this. Okay. So typically when we have a form, what we usually do is we group each label and input inside a container like using a div here. And that way we can style every one of them using a class that we usually call a form group. So this form group, you can see this is a div for this one here. And then there's a div container for the password and the input for the password and so on. So we can actually add a class here that will take care to add a space to the bottom of every single grouping. So let's start off with this first one here. So if I add a class to the div called form dash group, you can choose any name, by the way, I just find that's a good name. Now, I think this class here will be generic. So I could have forms in multiple pages. Therefore, I don't want to make us exclusive CSS for sign up. I'm going to add it to global. Okay. That way if anybody needs to style their form in a different page, they can reuse this class. I'm going to add here dot form group. And what I'm going to add is there are different ways to add the space to the bottom of something, right? You can think of it, okay, from a point of view email here, I could add some padding to the bottom or margin to the bottom, or from a point of view of password, I could add margin to the top or padding to the top, right, to add a space between them. So there are different ways to go about the same problem. But for this specific one, the way I'm going to approach is I'm going to assume, okay, every grouping, I just want to add a margin to the bottom. And I think that's the proper way to go about that. So margin dash bottom, let's drop eight pixels. And you can see it adds some space under that. And then you can proceed to actually use the same class for every single grouping there. So I did it for email. So I would do for the grouping for the password here, this div, and that class form dash group. And as I'm doing it, you can see the spacing is getting added. So I'm going to do for data birth class for the div there, form dash group, and it's the same class. So the same class will control everything. So that's what's nice about it. There's only one place to change there. So whenever anybody needs to style a form, they just have to create this div with the form group class, and then close the label and the thing. And it should add all the space automatically. Let's do for this one, favorite programming language, form dash groups, kind of tedious to do it, but it's just the way it is. Let's see. Oops, sorry, I put class name because I'm getting used from React, which we'll learn later on. Make sure it's class. Anyway, we got the space there. What's the other one? Read it. Oh, favorite color, right? That one. Let's not lose ourselves. When I switch about VS Code by day, if you don't know, because it's like a lot of stuff going on, I don't care what's inside the div right now. I only care about the outer stuff, right? So I can actually fold it like this, and it will hide that section for me. So that's very nice. I don't care about what's inside, so I'm going to fold it. Let's focus on the class form group for that, which adds to this one if you didn't notice. And then agree to the terms, and then some terms. I think that one is right, some default styles from the paragraph adding to the top and bottom. You can change later if you want. And finally, I think I'm going to add some space here separating the button. So let's think about this. Agree to the terms. We could do different ways, right? We could do for this div, or we can group them all together. Different ways. Let's see. If we did it this way, we just add to the last one. There you go. And that way now, okay, if I think the spacing is not too great, it's too close still. I can go here and change it. Let's do 32, and all of them change at the same time. That's what's powerful about this technique is you want place, you can change it to modify them all. I think that's too much. Let's do 16 maybe. Maybe that's okay. And then we can proceed to change a lot of other things just by using this form group container class. For example, I don't like that the label here is always on the same line as the input. For example, for email, I would like the label to actually occupy its own row and push the input down. Now, we haven't talked about that yet. Let's talk about it. What does that mean? Let me save this to push things down. Let me share the Google Chrome window and refresh. I don't like this label here on the same line. The reason it's on the same line as the input is because the label has a default style for display. If you go here on the computer and check the display here, it's called inline display. Now, if I go back to styles and I change the style of display to block, you see what happens? It pushes the thing down because when you have inline, it only occupies its own content. When you have block, it will act as a block, which means the whole row is reserved for me, no matter if I don't fill it out completely. So anybody trying to come next to me will be pushed to the next row. That's what it does. And there are some variations of the display like inline block like that, which is like a block, but it's inline. And many others, there's a famous flex one that's for flex box. That's very powerful to style things and move things around. But we just got to make the label display block to solve this problem. Let me show you how to do it a very nice way, a centralized way, because one way, okay, I can go through all the labels. Maybe I can add a class to every single label to make them display block, right? That's very tedious. Is there a better way? Well, yes, like this. Let me show you. Dot form group label with a space between display block. And magically, they all become, take their own line. What is happening here? Basically, this is targeting all label elements that are under an element whose class is form group. If you don't remember that, again, VS code is your friend. You go here, hover, and it tells you what it means. It just says there if there could be any label element as a descendant of the element of class form group. So that's the what the dot dot means. It means the label could be anywhere. It could be inside some, you know, some div here. And the label is inside another div. It doesn't matter. Okay. So that's what it means. You're the dot dot dot there. Now, if you really want to change it to only target the label that's strictly below or a child directly, a direct child of form like this, but not nested anywhere else inside. You could do that if you had a greater than between them. If you hover over that, you see that the dot dot dot goes away, the ellipses. That's what it means. I have a label that's a direct child directly under the element. So that means I could have another label, another label, and they're all matched the same thing. I can add a color here, red, and they all change to red. You see all the duplicate ones. But if the moment I have the label here inside the div, it's no longer targeted. You see what happened? I moved the label inside the div because it's no longer a direct child of this, but rather as a descendant. But it's actually a child of the div here. All right. Let me revert all that mess and just have it directly under it. Let's see what we did. Like that. So if you want to have it very strict, you can do it that way. All right. So that's what that greater than means. Direct child under the element was class form group. Okay. So let's see. What else? Let me remove the red color. I don't want that, right? Maybe you want to make it font weight bold. If you want to make it bold, the property is called font dash weight. And you can either use like 600, which is like almost bold or the word bold itself, which is equivalent, I think to 700. Up to you. You can look it up. The value is what they mean. And if you try 500, I think it's not bold. Yeah. 600 bold and 700 even more. If the font allows for that. I don't think there's any change for this font. By the way, for fonts, maybe this font is ugly. You could change the font for the whole document if you want by targeting the body. You remember your body here. It's what everything is enclosed. If you want the whole every single page to be changed, I would probably recommend you put in global and include this global for every single page. So we would go here and target just the body. You know, for sure, there's only one and only one body. Therefore, I can use the element selector. Element name selector there. And I can say font dash family to change the font. Let's say I want to change to aerial. I would write aerial like this and it would change. You see the font changed. If you have multiple names for the font, put a double quotes there. Otherwise, it's going to think it's two separate things. Times New Roman, for example. Don't put like this. It's not good because it's things separate. So always put the quotes if you're in doubt. If you need to put like a fallback fonts in case the user for some reason doesn't have times New Roman, you can put a comma here and say, OK, if the user doesn't have times New Roman, you can use any serif font, serif style font that you can find. If you want to be more specific and try to do other fonts like, OK, try Helvatica. And if it doesn't exist, OK, try aerial and so on and so on, separate by a comma. OK, so let's try just put aerial here. And if it doesn't work, any sans dash serif would be OK. And that's how you change the font family. Now, because global here is included from index as well, if you notice that if I go back home, the same font would be applied to the whole, all the descendants of body because the property is inherited. There are some inheritance in the styles going on. Anyway, going back to the form. If you notice, this is weird because that one became bold. I don't think we want that to be bold going back to sign up. And the reason is, is because if you scroll down to your favorite language here, where is it? I think you've got to unfold clicking here and there. Right after that one, this one, it's because the label is directly under this. And that's the way we wrote it here. If you want to get around that and not style it, you can always put a div like this and close them all in a div to make it no longer be a direct child. That way they're not targeted. But the downside, it kind of looks eh, they're all now in the same, you know, the same line. I don't like that. So maybe I got to figure out a better way. Maybe you could go here and add a class called radio group, something like that. And then you would style here. Okay, any, any, anybody who has the radio group class, let's say the, if you have a label directly under it, right? I want to make display block. And that way they are like that if you want some space between them, maybe out of margin bottom. Or pixels. So it's slightly not too close, right? So that way, whenever you need to, you have like a group of radios, just add a container there with the class and it should target it. And if you hover over this, you can always remember what it means. Okay. Nice. Now, if you notice this, I don't like this text too close to the radios. So obviously I could add a class here and any name that I want. But there's another practice in CSS that people like doing. And it's, it's, it's famously known now as tailwind CSS, which is basically they write class names that do exactly what the same selector is doing. For example, if I want to add a margin to the bottom of that, I would add a class name called margin dash bottom, let's say eight. And it would do just, just margin bottom eight pixels. So the, the class name is almost the same as the property that's applied. So that's, that's like tailwind style. And it would just add the okay, whenever I need to add a margin bottom, I would just add a class margin bottom eight like that. And it would add the space whenever I need. I think I want to add to this sign up page here. I would go there. And then put inside a div because there's no stuff enclosing it and I would add a class. Okay, I want a margin bottom eight for this. So there's a space between. Okay, so that's what's called now called tailwind. And many companies do a simpler thing, not necessarily using the open source day when library. Just another way of doing CSS using these helper classes that do exactly what they're written, their name says. Okay, so what else can we do, maybe we can style the inputs, add some space after the label because it's just too close. So where would we do that. Well, we can just target this. Remember not a margin bottom of four slightly, just a little bit you can see there if you want to comment this. I press control slash to ignore it. It's called a comment which in this case is just this slash star and then star slash everything between is ignored. So that's what it looks like before and after. Maybe make the inputs 100%. How about that. So for that I'm going to create a different selector for that let me do dot form group. I want all the input elements under form group like this to have with 100%. That's another way of specifying units you cannot percent instead of pixels. If I do pixels, for example, 20 pixels, it will be really small, right, and it's 50 is like that. I can do 100%. What it means is it takes 100% the width of the parent. In this case, the parent is, let's see, for the form group input would be usually the divs, right, the form group. And then the parent will be the form for those ones. So with 100%, so they occupy the whole line there. Now there might be too long if you have a really long screen, so you can limit that. And the way I would do it is I would target the form itself to control the width of everything inside. So I would go here maybe add a class to the form, say like a limited width form or something like that. Let's call it short length form. I don't know what to call it, something like that. And then here we were defined, okay, let's define dot short length form to have a maximum width, let's say 100 pixels. That way everything inside would be squeezed. So that way you can control everybody's width by just increasing that. Now you can see the text error didn't increase because we didn't target it. See that one because not an input, right? That one is a text area and what you have to do is include that in the same style that I wrote for this width 100% here for the input. So the way I can do that is adding a comma here and saying dot form group text area and that will also fit the same style. So this is basically saying this or that, okay, if I have an input inside a form group, element class form group or text area under form group. Please don't make this mistake of doing this. It's not the same. If you hover over it, it's not the same. It just says text area, any text area in the document. So you have to add the actual thing again so that if you hover over it, okay, it's under the element. People usually like to break a line to not confuse things like this. So that's a good styling practice for your code. Okay, the text area is down there. I think let's make it bigger because the form itself should be bigger, right? Maybe 300. Now there's a problem I want to show you and there's a lot of weird thing going on. What the heck is going on there? Let's fix that in an external window. Because here it's a bit hard to use the DevTools. I'm going to go here to the DevTools, refresh. I think I've zoomed in. That's why it appears big. This is weird. What's going on here? So I can click with a pointer and inspect and see what's going on here. Okay, I got a radio group, label an input and the problem, oh, okay, is this one. If I take it out, it fixes it, right? So maybe I want to change that selector to be direct child. So the input here that's not necessarily direct doesn't get affected. So that's one way, cheap way to do it right now. So I would go back there and just cheaply just add here this one. I add this thing and that thing, which just means it has to be directly under not necessarily nested deep. Okay, so I did that and I no longer see that weird thing. I still see it for the checkbox, I guess. Or is it because of Texas messed up? Let's see. Refresh, that one is fixed. This one is weird. It's probably because of the length is too small or something going on here. Let's see. Inspect that. I would go using my keyboard if I want to go fast here, pressing up and down. Okay, so I would analyze, oh, this one looks okay. This one's weird. Why is it doing that? Okay, there's a margin at the bottom. Let's go inside. There's an input. Oh, okay. It's because directly under, right? So maybe I have to, oh, I could actually place a label here because I clicked this and doesn't check. So I actually want to do this. Right, watch me. Right click. Edit HTML. I actually need a label here. Close the input so that the mechanism of clicking the label itself works. So that way, if I click this outside, it will check. Okay, so that's the proper way. And yeah, and probably I want to follow that radio group kind of pattern and put them together to avoid this bold. But I'll leave that as exercise for somebody. Anyway, going back here to fix that weird thing, just add the label. I should do both of them because that's a proper way. I'll leave this exercise anyway. Anyway, that's enough of that fixing. So you'd go trial and error fixing things and so on. Let's talk about the width of the form because I wanted to share some weird behavior that's going on here. I want to go up in, you see, if I highlight the form there, why is the width going overboard? Why is it overflowing the inputs and text area? That has to do with how the width is related to the padding and the border. Because if you notice, these have padding. If you look at the box model here, there's a slight padding on the sides and border on the sides. In the width of this thing here, when you say width 100%, it doesn't account for the padding and border. So they're additional to the 100%. Therefore, they will go overboard outside. Now, you can change that behavior with a CSS property. That just happens to not be default, but everybody now always have to pass it to change this behavior. So you would go to the thing that's causing the problem here. Styles, because I put 100%, right? It's not including padding and border. You would include that, so you would change box sizing here. You would change that to border box. That's the property that fixes that. So that says, when you calculate the width, include padding and a border in its calculation. That way, it's no longer overflowing. It's matching exactly the width of the form container. So that's what you got to do for every single thing that's using width 100%. So we can use this selector, remember this one, and add this one. Let's go back here. This is the selector, this one. You just add that box sizing border box. If you verify back in Chrome, refresh and select the form, now they're no longer, you see they're no longer overflowing. The width of the inputs now include the padding border. That's how we fix that. Okay, if you have any questions, let me know. I want to show you just to finish how you can add a different font that's custom. That's very interesting to do. Go to the browser, go to Google Fonts. That's one of the places you can search for fonts. Let's say I go through Google Fonts. I kind of like Montserrat, so I click here. By the way, I'm going to copy and paste the link for you. If I want to include this in my application or website, I would click Get Font and get the embedded code here. And then all I have to do is copy these link tags here. And for the font family, I would use Montserrat. So copy the link tags, these ones. Go to the code. Let's go. Let's say for this website for sign up, I would go all the way up there before the end of head, right? I usually, I want to do before the global here because I want to add there. Now we have access to this font through the link tags. And I can go to my website here and change the font. Let's say I go here. Instead of Arial for the body, I choose Montserrat. And if I don't find Montserrat, well, I can choose Arial as a second fallback. And if I can't find Arial, I will do any one sans serif type of font. Now if you notice the font change to Montserrat. Now if you notice going back to home, it doesn't change for home. And the reason is we don't have these link tags in the home, the index file. So you have to copy for every single file you want the font to be available. So put it in the sign up HTML, go to index, go before the end of head, before your custom styles, paste it there so it can use the font as well. You have to add for every single HTML file. Save that. Go to the browser. And that's Google Fonts. Very nice to use different fonts on your site by refresh. Let me save everything. Save everything. Refresh. There you go. Now it's working. If I go home, it's the same font. If I take it out, different fonts. If you're curious what it means, like every website, you can see the source code. Right click, view page source. And you can see the link tags are here. What are they doing? Basically, we can click here and see what the code looks like. And it's basically defining all this CSS stuff called at font face with the font family name. And then in the line SRC, they put the path or URL of the actual file for the font, the waf2 extension. That's the font. You can actually go to this and download, I think, if you copy and paste. It should download that font. But that's basically what's doing. It's setting up all the fonts so you can use it in your CSS by just saying font family months are right. So it's very nice. Again, like I said, I might have said this in the previous lecture. If you go about your browsing on the Internet, you can always find out how people style or make their websites by open the DevTools or right click inspect or right click view page source. So if you're curious, you come across a button like this one. Oh, how do I make this button? Right click inspect. And you see, oh, okay, it's an anchor tag. And on the right hand side is all the styles. Oh, that's the color they're using this one. Oh, it's actually this one. If I take it out, it removes it and I can change if I go here. Oh, nice. That's black now. And if you don't like it can refresh and go back to normal reloads. But that's basically you can look at our styles. Everything is open source, right? For every website out there. Oh, they add padding. Oh, font family source sons pro font size. If I increase font size gets bigger. Border radius is for the rounded borders. So I can increase that for more rounded. Yeah, padding. I can increase that on the top and bottom right first one and then left and right and margin. Oh, there's a spacing. Oh, that's the margin. And you learn how other websites are made. There's a lot of stuff here to scroll down. And finally, the box model. Very convenient tool. DevTools your friend to learn about CSS and HTML and web development in general. Okay, I think with that, I finished this lecture.