Okay, today I'll do an introduction to CSS Cascading Style Sheets. Please go to www.jsfiddle.net and we'll practice the examples here. In this environment, if you click on the top right, you see some settings so you can change the layout. See how hard it's contained. I will do classic. I like to uncheck auto-close HTML tags and auto-close brackets because since we're beginners, it's best that we type everything manually. If you click run in the top left, you will see that what you wrote for HTML, PANEL, CSS and JavaScript will appear in the bottom right. Today we focus a lot on HTML and CSS. No JavaScript. Okay, so back in the days when HTML hypertexts, markup language was introduced. It was made so scientists could share scientific papers across the internet and then it has evolved into something much beyond that which is social media today, very interactive applications. So to have all those documents that just have static text be styled, made pretty with colors, with things positioned at different locations of the screen, that's when CSS was introduced. These are just what we call style sheets or their definitions and code that we use to manipulate, like target the elements in the document so that they change their appearance. So let's start off HTML. So today I want to build like a newsletter sign-up form where we're going to have a message and then an impact input field where you can type your email and then click submit button and put that in the box and learn how to style that which is beyond what's the HTML does because HTML is mostly for the structure, like all the tags and structure are laid out like the foundation but to make it prettier, that's where we apply CSS. Okay, somebody just came in late, please go jesferro.net, I posted it in the Zoom chat. Okay, let's start off with a paragraph here, p tag and I want to put just some text, get access to the latest trends that are happening every week. Nothing fuzzy here, you can type whatever you want, even Laura Ibsen if you want. Just to have some tags, click run in the top left, make sure to click run every time you change the code so that you can see the latest in the bottom right. So this is the text and I want to add maybe a heading here, subscribe to the newsletter before the paragraph, something like that. So that in itself is not so fancy, so how can we change the style of CSS? Now go to the CSS panel here, you have to first say, okay, what do you want to style in this document? So we need to define what's called a selector. Now the selector can take on many forms, for example, if I do p, that is the name of the element paragraph and use that as a selector, that means every single paragraph or p element in the document will have the following styles as defined when we write curly brace and close the curly brace. So the syntax is selector and then open curly brace and then type whatever between the closing and then close it. So what we type between is what we call key value pairs of CSS properties. For example, if I want to change the color of the text for all paragraphs, I can say color, that's the name of the property. And the syntax requires to type a colon and then finally, what's the color? I can type the color name if I want, for example, red and to finish it off, you always do a semicolon. Now if I click run, you can see it if you can see the color red that get access to the latest trends, that text became red, okay. Now there's no reason to break a line here, I just did it because it's nice for style, I could do everything in a single line and click run, it's the same outcome. But the sake of us humans who read the code, it's always nice to add some space and annotation. That is, I always like to add a space before the curly brace here, and I like to break a line and have one property and value per line. And I always finish off with the curly brace there. And whenever I have an open curly brace, this is also common of programming, computer programming in general. Whenever you open a curly brace, you always want to add what's called indentation, which is pretty much at least two spaces or a tab on the left hand side here. So everything between this open and closing curly brace, I always add two spaces, you see it always does for me automatically here, okay. That's just good practice so we know that all these things here are, it has a visual effect of letting us understand that all these properties are contained within this block for the P selector there. Okay, so I also like to add a space after the colon. And all of this doesn't matter for the computer, but it looks a lot nicer than having everything in a single line without any white space between the characters. And finish off a semicolon there. Okay, that's nice. How can we change the background color? Well, it's very simple. If you want to add another property here, you either do it after a semicolon or before the property you just defined there. So let's do before background dash color is the name of the property in CSS to change the background color. And colon now the color you want, for example, black, and then finish off a semicolon. And then you can see the background for the whole paragraph is now black, and I like adding a space after the colon. Okay, now for colors in CSS, while we can do words like this, the color spectrum is very wide, right? So there are many kind of colors. And some of them cannot, in any way, describe with words specifically, although we could have created a word for every single color in the spectrum, but to make it more precise, if you want a really precise color, that's when you're going to see either a hash here for hexadecimal values, or you're going to see RGB, which stands for red, green, and blue. So the way you do hex is you start, for example, for black, I can do hash, and then I have to specify two digits for the red value, and then two digits for the green, two digits for the blue. So for red, it goes from zero, zero to ff. If you want to know more about hexadecimal, you can look up by yourself. But essentially, instead of us having counting from zero all the way to nine, we count from zero to nine, and then additional digits are a, b, c, d, and f, okay? Suffice it to say, if you do ff, that means full red. So if I do zero, zero for green, zero, zero for blue, you're going to see that the background color is going to be red, okay, but we don't run red, we want black. So black is actually the absence of color, absence of red, absence of green, absence of blue, therefore red is zero, zero, green is zero, zero, and blue is zero, zero. So six digits, always in this order, and there you go, it's black. Now like I said, if you want to do red in hexadecimal, so hash, so how much red do you want? Two digits, goes from zero, zero to ff, where ff is the maximum, okay? So I'll do maximum red, no green, no blue. So zero, zero, zero, zero, and there you go, it's the same thing we had. If you want, as an example, to add just green, put zero, zero for red, and then ff, full green, and you can click run there, see it's green. Now if you want to tone it down, maybe you want to halfway through, we can keep decreasing the number if you know how to do hexadecimal. It would be like e, and then d, if I decrease by one every time one unit, all the way, for example, to zero, what's f zero, it's like that, and then I could do here maybe d, e, and you're going to see what it looks like. If I do a, it's a little darker, all the way, if it's obviously zero, zero is going to be black, right? Enough of this, yeah, yeah, thank you for posting that colors hex link, take a look at that later. In any case, this is kind of hard to work with, you know, figuring out the color just by typing the values here. So what we want to do is leverage the developer tools in your browser. So this is a way of debugging things in CSS, but also very useful as you're developing things in real time. So you want to see what the visual looks like right away, you want to pick the right colors for your website. So what you're going to do is you press the key in your keyboard called f12, f12, to open the developer tools. In my case, I'm using Firefox, okay, if you're using something like Safari on Mac, you probably have to enable it in the settings, enable developer mode or something, somewhere there so that you can press it and it appears. Another way of opening that, let me close it. As you right click anywhere on the screen and click choose the option to inspect, that also opens the dev tools. Now while in the dev tools, I want to be in the either if you're using Chromium based browsers, it would read elements tab, if I'm Firefox is the inspector. But all you want to see is the HTML document structure here, for example, as I hover my mouse over the P, it highlights it for me, over the H1, it highlights it for me. Okay, it's very useful. Anyway, I'm going to click to select the P, that's the element I'm working with. And you can see on the right hand side in my case, because my dev tools is docked to the bottom, although you could change here if you click this dock symbol, it's usually on the right hand side of your dev tools. But anyway, you're going to see these styles, here in Firefox, it's called rule style, but in Chromium based, it should read styles. And you can see for the P selector, we have the following styles, and this is exactly what I wrote in the CSS panel here. Let me make it a little easier to see. So this is very nice because the dev tools, you can hover over things and uncheck to see what it looks like before and after this specific property being applied. For example, for the background color, what happens if I don't have this? I can uncheck and see, okay, this is without background color, zero, zero, and so on. And this is with background color, full zeros. And I can do the same for color, although it's hard to see, but let me remove the background. This is black, right? Let me change this to red. And did you notice that I also was able to change the color just by clicking here and typing it in real time, I can see the change here. And I can see before, after, like that. Now, this is very nice, let me uncheck it again. Other thing that's nice about the dev tools is you can click this color circle, and you can actually pick for a color and see it in real time what it looks like. Let me make it a little smaller so you can see the picker not covering the paragraph. So you can see here, choose a different color and see what it looks like. So I can pick what's appropriate to my website, maybe something like this. And then if you click the color, same thing happens. What's nice about the color picker is as you're changing the color, you can see in the bottom here, this thing. And this thing is called the contrast ratio. That means the higher it is, the easier it is for people to distinguish between the foreground and background color. So you want to try to achieve a very high contrast ratio when you're developing. One that meets this, what's called the WCAG standards for accessible text. So just watch out for this icon here. So I just choose something that passes both, at least AA. There's a better one that's the AAA. If you have AAA, you're good to go in terms of accessibility. So this is the best one. So I think this one is pretty good. So I'm going to pick this color. Feel free to be creative and pick your own colors there. It's okay. I feel like this is nice for me. So one thing to keep in mind is whatever you're doing to develop your tools, this is not permanent. So if I refresh this page, everything will be gone and reset to the way it was before. So make sure when you're working on the DevTools to always copy and paste the code back to your original source code. So I can highlight this here, control C to copy, go to my source code, control V to paste. And then I click run again. Now I have it. And if I refresh, it's not going to be lost because they already changed it here. Okay. So keep that in mind. Developer tools is not permanent. And every change that you make here is only for yourself, right? It's not like anybody else who's using this website will see those custom styles that you just did in the DevTools. They cannot see it. It's just you. Okay. Any questions so far? All right. Okay. So CSS is always like this. We figure out a selector to select specific elements. Then we have pairs of property name and value, always using the same syntax, right? Selectors, curly brace, property name, colon, value, semicolon, repeat, and then finish off your body of your, let's say, style sheet part with a curly brace. Okay. So if you have multiple, you know, one selector here, another there, another there to select other things, that's called a style sheet. So let's close the DevTools. And now let's style this H1 here. But so one way you can do that is by doing, it's either after or before. It doesn't matter. Okay. Let me do after so you can see it doesn't matter. So I want to style all the H1s in my page. So I use H1 there, curly brace. Now let's make it a little smaller. I think the stacks is too big. That's the property to make it smaller. Now I already know it's font size, but how would you figure it out by yourself? Well one way is you can go to your favorite search engine and type, how can I change the font size in CSS, something like that. And then you find out what the property for CSS is. Now the way is if you open the DevTools, you want to click this to inspect this specific element. So you can click that and inspect or you can go here in the DevTools, you see this pointer in the left hand side, click that and you can point to anything on the page. So you can get more information about it. And I want to do it for the H1 here. So you can see it's now highlighted in the DOM, the document object model. You learn about that term a lot. It's simply the structure of the document here, this live document. We can see there's nothing applied to it, right? So let's try something out. I'm going to click, you see this element thing between the curly braces, click that. Now you can start typing a CSS property, but say I don't know how to change font size, but maybe if I start type font, I start seeing suggestions here. And the very first one is what I want, very font size, but there's a lot more if I scroll down and up. So you notice in CSS, properties related to font are grouped with the prefix font dash, so that's very convenient. So we want to use a font dash size property. And now you can press the tab key on your keyboard to select the value now. You can see it automatically add the colon there for you. Now the values are very nice as well. What if I don't know any CSS values for this property? Well, the DevTools will tell you with all these suggestions, what you can do is you press the arrow key going down, right? Down arrow to try them out one by one. Down arrow, down arrow. And you can see the things are changing as I'm pressing down for every value. This is what it looks like. And I can go up and see and so on, okay? That's how you figure out things through the DevTools. Now I don't like any of these values actually. I want to use what's called a very fixed size using pixels. Px is the unit we use usually with computers. So I can start off, let's say, two px. You can see very small, right? I cannot see anything. But I can go up with my app arrow key, the keyboard, keep pressing up until you are content with the size. Okay, this is 11 px. This is 12 px. This is 16 px. This is 18 px. Okay, I kind of maybe I like 20 px. Great, so what I'm going to do is copy this. Remember, copy back to your original. Now in my original here, I already have the h1 selector and I can paste it here. And I can click run and finally it's permanent now. Now I can close the DevTools and I change the font size of the h1s. Everybody okay so far? Okay, I'll go on. Okay, this is all nice but what happens maybe if I add another paragraph? You can unsubscribe at any time. How about that? What do you think this paragraph is going to look like? It looked like just like the other one. Why is that? Well, because your selector here is p. When you have the name of the element as the selector, that means every single element whose name is p will have the style with background color, the following and color the following. If you don't want that and in practice, we don't want this, okay? This is really bad practice in CSS because a real well document. We'll have numerous p tags, numerous elements of the same name. And if you change all of them, obviously somewhere, the page is going to look funny and very weird. So you want to avoid that. When you're doing CSS, you only want to target specific things that you can choose to style. Now there are different ways to go about that. One way is, okay, how many elements do I need to target? Okay, if I need to target all of the elements of the following name, I can do like this, but that's not really what we do in practice. Okay, what if I just want to target one and only one thing? If that is the case, I can use what's called an ID selector. What do you do is, let's say I just want this paragraph, the first one, to have the following styles of the green background. I go to the p, add a attribute ID, I don't know what to call this, maybe access message, how about that? Just make something unique, choose your own IDs. So ID is an attribute in HTML, that is unique, meaning no more than one element with the same ID. So if you give an element the ID, access message, that's the only element that can have that ID. You cannot type the same ID for any other element. That way we know for sure how to get access to this paragraph, okay, by the ID. Because there's only one with that ID. In any case, what we would do here in CSS, change the selector here for the p. Instead of saying p, we start saying hash, which means ID, access-message. So what you're saying is, okay, go through the document and find the element whose ID, if you see a hash prefix here, that means ID, is access-message. Make sure this, these characters are the same that you type for the value of the ID. If I click run, only that paragraph, the first one, will have the style defined here. Okay, now let's say I only, I want two things to have the same style, but in that case, what I could do is add one ID to each, but then I'd have to separately do style type one ID and then the other one. And that's kind of a pain. Yes, we could do that. For example, if I want to do p and this other one to have the same style, even though there could be another p, let's add another p here. You won't, let's put a message here, you won't regret it, something like that. So we have three paragraphs. Let's say for some reason I want to style the first and the second with the background color of the screen. Well, I can try the ID as well again, but that's not very good because you'll see unsubs, how about that? And to do that, I could go here and the selector will have to be changed a certain way. They have to do a comma here, then that hash unsubscribed. So this means now the selector is doing either you have an element whose ID is access message and also if you have an element whose hash is unsubscribed. So either this or that with the comma there. And if you want to add a space, that's okay too. But this is not very good, you know, a better way is using what's called a class. If you have more than one thing, like multiple things you want to style specifically, we use a class attribute. Okay, now let me remove this. And I want to do just style the first, the second and the third paragraph. I want to add, let's add a question mark for the selector because we don't know yet. I want to add, let's say, color to the text to be blue. Now let me remove the ID here. So I want the second and third paragraph to have color blue. What would be the selector here? Well, we have to use a class. So we add a class, let's call it blue text. And then to the other one, I also add the same class, okay, the same class. Now that's the thing about class. Classes are not unique, so you can apply the same class to multiple elements. So here for the selector, you start off by saying dot because dot means class name. Blue text, the same class I use for the second and third paragraph. Now you can see when I click run, the second and third paragraph now have blue text. Okay, so in practice, everybody uses classes. That's the best approach for everything. If you're unsure, just use class, okay, and then apply the class to whatever you want to style. That's the way to go. Now the great thing about class is somebody could come in, write a style sheet. They write all these styles and you can reuse their style. That means they can distribute their style sheet to other people so they can use their styles and designs. That way you don't have to write a code yourself. You don't have to reinvent the wheel every single time you build a website. One example we have today, if you ever heard of Bootstrap, this is probably the most popular. This is exactly what is happening. Bootstrap, if you want to, like for example, you want to put a button on the page that looks like any of these buttons, colorful buttons. If you see if I want to add this button that's a blue background, the code for that is this. Essentially all you have to do is use the class btn and then add the other class btnPrimary. And if you do that, your button will automatically look like this. Why is that? Because somebody else already wrote the definition for this class and that class. And if you use them, you will get their style which is just like that. Again, remind yourself of the DevTools. You can go to any website. If you want to learn how they are styled, right click whatever you want to inspect, click Inspect. You can see here it's highlighted on the right hand side in my case. You will see all the styles applied to this button. And you can see there's padding, zero, border style, none. And have margin here. Let's say if I uncheck this, what happens? Okay, it looks like this is the margin between all these buttons. And then I can scroll down, oh, okay, look at this. Oh, this is the background. If I uncheck this, this is how they did the background. This is the color they use. You can see the color. You can even copy the color. You can change it. Oh, what if it looks like yellow? It's like that and so on. So it's very useful if you want to inspect or analyze how other people wrote their website. You know, all websites today, everything is open source, meaning you can see the source. You have access to DevTools. You can see how it's built. So if you're unsure how somebody wrote something or built something or styled something, open the DevTools, inspect that, go through all the things here, uncheck things, see what happens. See what happens there? I just remove the spacing, the padding. Anyway, if you want everything to go back to normal, just control R or command R to refresh the browser and everything is reset. Okay, I'll copy and paste that link for you in the Zoom chat if you're curious to look at it later. And obviously you would have to install this, add this, spread the style sheet from Bootstrap in your website. And there are some, look at their docs, see what you have to do. Essentially just add this link tag here. Copy that link tag into the end of your head. Any case, let's go on. Okay, that's nice. Any questions so far? Okay, let's go on and keep building this newsletter. So one thing I want to do is put everything in a box. So I want this whole thing in a box. So I can do that easily, just put a div there. Div is a generic container in HTML. So I can enclose everything in a div. Usually when I open elements, I like to add indentation, meaning I can highlight whatever is inside and tab in my keyboard to add space to the left-hand side of each line. Okay, I got a div there, but visually nothing happens, right? Because it's just a generic container. If you inspect, you're going to see it's there. You see that box? The reason I put that is so we can style this box and put some borders, different backgrounds from the outside and so on. Here's the box. So if you don't know how to style things just without looking at it, as a beginner, it's probably hard for you to abstractly style things. So you want to leverage the DevTools once again. This is what I want to style. Okay, let's go here. Click the elements. First I want to add some border. So to add the border around it, I can use the property called border. Now if I start typing border, you can see there's many properties. Okay, I'm going to use the first one. Now this border property, it's called like a shorthand property because it kind of groups together different properties. For example, for border, we have the width of the border, border width property. We have border style. We have border color, okay? What if I don't type them? I don't want to type them all one by one. I want everything together. And that's with shorthand CSS properties. Now, what's different now from what you saw before is the value is going to be not just one thing, but three, right? Remember because we have the width of the border, that's one value. And then we have the style and then we have the color. So let's do it. One px is the width. Now to separate the values is the space. And then let's do solid, space, and then the color, let's do red. So you just, you can see something. Okay, so it's three values separated by a space. Now, what's nice about this, I can tweak it, okay? I want more width, so I'm going to press the up key in my keyboard like that. Maybe three. No, two is good. Okay. I don't like solid. Maybe I want it dashed like that. And the color, maybe I'll do this one hash, cc, cc, cc. It's like a gray color. And you can always inspect it here later. So it looks like that. Now you can type the properties by yourself. Let me show you how. Let me uncheck this, okay? So this is the equivalent of you typing, first you type border width and make that two px. And then you type a border style, and then you put a dash, and then you do border color, and you put it like that. So this is the equivalent, okay? Typing three different properties. See the advantage in Dove Tools of this is you can actually play around and see the different styles here. But other than that, we prefer writing the shorthand, because this is just too tedious to write everything separately. But there are times when you want to use these individual ones, when you need to tweak things very specifically, like you already have an established style. You just want to tweak the color of the border. That's when you would do it. Anyway, I'm just uncheck them and use that. Now I don't like dash, I'm going to put back to solid. And I kind of like the black one, so 000000 for black, or you can type black if you don't like hex. Oh yeah, I didn't tell you about RGB. There's another way of typing the color. You're going to see RGB like this, red, green, blue. What you do is you put parentheses, and you put red, comma, green, comma, blue. But the difference is an integer, but that goes from zero to 255. So if I do zero, comma, zero, comma, zero, that's black. If I want red is 255 full, that's the maximum value for the red there. Now if you want green, put the first one red zero, and then the green, which is the second one, will be 255. And if you want blue, zero for the second and 255 for the last. Okay, so these are the decimal equivalent numbers for the hex. When you type hex FF, that's actually 255 in base 10. Okay, because hex a decimal is base 16. Okay, you want to look that up later if you're interested. Hax is base 16. FF, when converted to base 10, is 255. That's why we write it like that. Anyway, I'm going to put zero here, and this looks good. Copy that. Now we need to figure out a style for our div. Again, the best practice is using a class. So I'll add a class here and call it maybe box, something like that. Go to your CSS. Now if you want to target selector for a class, dot, okay, dot means class. And then the name of the class, box, like that. And then I can paste that there. Oops, where's the border colon? Click run, it's there, great. Okay, nice. Now I want to add some spacing to this thing. Now we will understand how to add spacing with the box model. So in your browser, I think if you inspect the box here, the div, make sure you select the div here. Somewhere here in the right-hand side, it could be in another tab on Chrome. It's probably either computed or the other one. But in Firefox, it's under layout. If I scroll down and you see a box model like this, that's what we want to find right now. If you're on Chromium, it might be a different tab than mine. Maybe it's under computed and scroll down and try to find a box. If you don't find a box, let me know. Okay, so understand spacing, white space. There's the box model here. So there's three things you need to understand. Okay, so if you have this element here, there's space inside the box, and there's space outside the box, and there's the thing in between. The space inside is padding. The thing in between is the border, and the space outside is the margin. You can see here in this box, margin, border padding. So if you forget, always look at this box here in the dev tools to refresh your memory. Okay, so I don't like that the subscribe word is too close to the border. So I want to add some padding space here. I want to push this inward. Okay, see the padding here is zero in this purple thing. So I'm going to go back to my styles or rules, and I'm going to click there. It could be either here or there, it doesn't matter. If you do it here, all the elements of the class will get this style. So I want to do, the property is padding, but there are, again, there's different properties, you know. If you want to just change the padding at the top, you would do padding top. If you want on the right, it's padding right. On the bottom is padding bottom, and the left is padding left. Now all those suffixes that I told you applies to all other CSS properties like margin. So remember those top, right, bottom, left. Those suffixes always appear or infixes always appear in CSS names, property names. Anyway, if I do just padding, that means if I do one value here, that means padding on all sides, okay? Now you got to look at the docs for the property to see what values it takes. Because there's a lot of in CSS, many properties can take on a variable number of values because it's just kind of smart, I don't know how to describe it. You can give one value and it interprets one way. You can give two values, it's a totally different way. Three values, four values, and so on, okay? Now if you want to find out about that, let's take a pause here and look at the docs. One great documentation is MDN. So if you look at MDN padding in your browser, it's going to point to this website. MDN is the Mozilla developer network and they have a great reference for CSS. They have some examples you can try out here. But anyway, I want to scroll down and see the syntax. You see the syntax? This is the syntax. You see I can put one value, two, three, or four. What do they mean? Read these comments here. Okay, if you do one value, apply to all four sides. If you do two values, the first value is top and bottom, the second is left and right. If you do four, so the first is top, second is right, third is bottom, and fourth is left. So keep this in mind as you're developing. If you don't remember, just reference the docs. I'll paste this in the June chat if you're interested. Okay, going back to what we were doing before, I will start off padding one, increase my keyboard app arrow until I find one that's great for me. I think maybe 16 looks great to me. So I'm going to take this copy, put in my box, body of my dot box here. So I'm good at that. Click run, looks like that. Okay, now if you want to add spacing outside, that's the margin. I'm going to go a little bit faster here because we're out of time. We'll run out of time. So I just subtly add some eight pixels. It's like that on all sides. If I do, let's exaggerate, maybe 50. What happens? You see that's the space outside, that's the margin. So it's like, put the thing, squeeze a little bit. All right, maybe I want to do about 36. You choose whatever you want. Okay, nice. So that's the box about a margin, border, and padding. Now let's finish off the example that I wanted to do. So I want to add a text input here. So input type, actually it's email, right? Let's do type email. Now I want to add a label here, email. And I want to add a button here. Let's keep it simple. I don't have a form tag or anything, okay? Sign me up, that's a label. Now this looks like that, just plain HTML. Now a little bit, let's style that. I don't like that the email is in the same line as the input. So how would we style that? Okay, like I said, we can do class. Let me teach you another way of doing the selectors. We usually like to group form controls in a container like a div, and the label and the control like input go in there. That way we have, we can add a class to the div. Let's call it form, it's a form group, let's call form group. So this is like a class applied to the div. If I do it this way, not necessarily directly on the label or input, I can actually control all of the containers that have form group. And I don't have much time to explain why this is the best practice. Essentially, if you have multiple of them, and I wanted to control the style for every one of them to be consistent, I would have to change only one place. And that would be the definition for the class form group. As long as every container uses form group, the labels and inputs inside will be styled according to my rule form group. So that's very powerful. So we don't have to write the same thing over and over for every single group of inputs. Anyway, I'm going to revert what I had, and I'm going to go to the CSS and define the class dot form group here. And what's great about this is, let's say I just want to style the label, right? I want to style this label to occupy the whole line. And I can do the following, space label. What I'm doing right now in this selector is I want all the label elements there are inside an element whose class is form group. So that means if I have a label inside an element whose class is form group, this style will be applied, okay? The selector is very powerful. So let's do the following, I display block. Now, I haven't talked about display, but essentially, you see that the email is like side by side with the input. That's because this label is called an inline element. It doesn't push the other ones to the other line. Now, if you notice something like a paragraph or this H1, you can see it doesn't stick side by side with the paragraph, because they are not inline. They're actually display, as you see here, if you go here, it's the H1. You want to find out what their display is. You can go here and type display. Actually, you won't find it here, probably under computed. And if I type display and click to see the browser styles, you're going to say display is blocked by default for them. That's why they push everything to another line. But if I change display, you can see the display of the label. If I inspect that, I can see, again, if I type display in the filter and click browser styles, inline. Inline lets people hang out next to them. So I don't want that for, I want to, the email pushed the other thing to another line. So I make it display block, okay? So I'm going to have display block for the label there. You can see now it's under, it pushed the input to a new line. Okay, that's great. Now, I want to target, if you want to add bold, you can do font weight here, by the way, try this bold. And it will bold and detects for email there. Let me make this bigger. Anyway, now let's target the inputs. The input's ugly. I want it to occupy the whole line. Like a width has to be 100% of the container thing. So to do that, I'm going to do the following. I'm going to add another selector outside, dot form group. And I'm going to say input like this. So this means every single input element that is inside another element whose class is form group will adhere to the following styles. Okay, keep in mind this is every single label and every single input. So if I had another input here, that would also apply. And for the label case, if I had another label for some reason, it would also apply. But I'm assuming that my form group will only have one label and only one input. Therefore, I'm safe to use the selector with the element name here. Okay, in any case, going back to input, I can change the width to be 100%. Okay, instead of pixels, I could have pixels like 20 pixels. And that would be very small width. But I can do 100%, which is like relative, like percent, right? Of the container. You can see it expanded all the way to the right. Okay, that's what I wanted. Now, I don't like that the button is, you know, there's no space between the button and the input. So, okay, one way you could do that is maybe the, instead of adding some space under the input, maybe it's actually the group that should have the space. So I want to look at the group as a whole. So I want a target.form group instead of the input and add some margin to the bottom. So I use margin-bottom. Let's say 16px. If I do that, now there's some space between the button signing up and this grouping here. Okay, so I treat this whole thing as a grouping. Of course, it would work the same if I put in the input, but I think it's more proper to do it in the form group because the form group includes the label and the thing as a whole, okay? All right, so how about we do the button? I want to style this button. Okay, the best practice is a class. So we can do class. Let's call it button two. It might be confusing, or you can call it BTN to be like bootstrap. How about that? Then we do .btn here. And let's, I don't know, let button, let's make it look like bootstrap a little bit. Maybe the background color, I put like that blue and the value is this one. Hash, 0D, 6E, FD. If I do that, you see it's like a color. Now the contrast is pretty bad, so make the color be white for the text. You can either type white or type hash FF, FF, FF. This means all the colors. All red or green or blue, which means white. Looks like that. Now the text is too close to the border, so the space between the border and the content is the padding, right, the space inside. So add some padding there. Let's try the two value property for padding. So if I do 1px, space 1px, what does this mean? Well, top bottom is the first and the second is right and left. Okay, so I like maybe a lot, maybe let's try eight top bottom, but I want 16 left and right. This is what it looks like. Right, top bottom padding is eight pixels and left, right padding is 16. And maybe I want some, the rounded borders. That's border radius. Let's try six pixels. Looks like that. See it's rounded now. I think the border is a little bit weird. Maybe you wanna change the color. Let's see if I change the border color to whatever, the same color as the background. What would happen? Like that. I still see some shadow or whatever. Maybe it's the border style, whatever. You'd be creative. Okay, yeah, so you can type the email here and you would click the button. Obviously we don't have the back end to make this work, but it's just visuals in front end. Any questions? Okay, I'll call this a lesson then.