Today, we'll talk about CSS again, continue our learning. And I would like to touch upon the sign-in form. This is the website I have opened, remember, I opened the file index.html, and I'm going to zoom in just so you can see better, but the actual thing is not this big. And I click sign-in, and we are in the sign-in.html page. Now this form looks terrible, so we want to improve that, so that's one of the goals today. And while we do that, I'll teach you a few more concepts on CSS and spacing in particular, and some nice tricks how you can centralize the styles for the form. And maybe we can do another sign-up form too, and learn a few more HTML stuff, okay. So looking at this form, let me zoom in so you can see better. It looks really terrible, and one of the things I want to do, let me annotate here. First there are two, every group is just too close to each other, so we want to learn how to put a space between them. Also, I don't like this label next to it, so I want to have the label on it, it's online like this. These are just my preferences, okay. You can design it however you want, but this is the way I'm thinking. We could improve, so we can teach you the concepts. And the button, maybe you can style that, make it a little better, then just plain. Maybe some other color, that's suggestive of submission or primary action. And yeah, let's see how we can start off. Maybe also between the label and the field should be some slight space. Okay, what do we got about doing that? So I'm going to right click here, inspect, and I'm using this one Firefox, but Chrome is the same functionality. Remember Chrome, you're going to see the elements tab, and the right hand side you're going to see the styles tab. I'm using Firefox that says inspector and rules respectively, but it's the same. So here I have the label selected, and I want the label to be on its own line, and I want it to push the input to another line. Now we learned how to do that if we kind of artificially add a div, right, in HTML. I can actually change this HTML here just to see what it looks like. If I right click, edit as HTML, I can actually try to place a div like that, and like that. Obviously you can always break a line if you find it hard to see, but it won't matter here. So basically I enclosed the label in a div. So now you can see it pushes the input, this one, to a new line. If you recall, the reason it happens is because the div element by default has a CSS property of display set to the value block, okay? If you want to know the default CSS property of an element, you can always click on that, and you go here to the styles tab on Chrome and rules in Firefox, are you going to go... I'm going to show you Chrome and Firefox because I think they use different places. So in Firefox, you go to computed, and you mark browser styles, and then you're going to click this text box and find a property. Instead of you scrolling, you can just type it here, display, and I can see it's block, the value. Now if you didn't know the property name, you can sample through all the default values for each CSS property here. So this is also a way you can understand... It's for you to learn what all the default values for your browser, for the CSS properties are. So you learn the CSS properties names as well, so it's very useful. Let me do it on Firefox, sorry, on Chrome because people use Chrome, many people, so let me see if I can find my Chrome here, Google Chrome. Here it is on Chrome, F12, open DevTools, click elements tab, another way you can, instead of right click inspect, you can also go here, click this pointer in the top left of the panel for DevTools and point to the thing you want to analyze or investigate. So I'm going to click the label for email, and that's going to select or highlight it here. On the right hand side, I can go and see the browser styles, I think, yeah, let me see where is it here, oh, we got user agent, but I need to find, oh, there you go, in Chrome you've got to click compute it and scroll down, and you should see all of them here, click show all, and then you can also filter and display, and you see that, sorry, I meant to click the div, right, click the div, that's the example I give, you can see the div has display block, which is different from the label here that has display inline by default, so that's the problem, so to change the behavior, I'm going to change the display property for the label to be lock, so if I do that, it's going to push the other thing to another line, that way I don't need an extra div in closing the label. So I'm going to go to styles and try it out, remember, I can always go to styles and see what something looks like in real time, just to test things out, so I click here, element.style, I'm going to say display, and then a tab, and you can see Chrome suggests all the values for me, so you can sample through with the up and down arrow and see what it looks like, this is block what we want, but in case you're curious about the other ones, you can just go down and see what it does, and see pretty much either next to each other or not, and this one is none, this one makes it disappear, so it doesn't display, okay, and there's many others there you can sample through, but basically I want the block, so this is the style I want for this, now of course I type in adapt tools, but I make sure to copy this by the way, what I'm going to demonstrate right now is that the adapt tools forget everything you type, when I click refresh, it's gone, and the reason for that is when I refresh, it makes a request to the server, and the server gives you back the HTML file as it originally was, so when we change the adapt tools, we don't actually change that file, right, we're not changing this for anybody else, we're just us in this current session here but it's going to be gone forever, that's why I told you before, always make sure to copy your code back into your original, so let's go to Visual Studio Code, if you recall this is the code SRC directory, I'm changing the file for sign in, right, sign in dot HTML, and the one that I did was this one, but how can I do that, CSS for that, there's different ways, if you recall, the first one I can add a style attribute with the value, I can do this, but this is not the recommended approach, or I can do the style back like this, before the end of the head, and place it there, but I need a selector, so I can put label, but if I use that one, all of them will be targeted, right, all the labels, so if I don't want that, I would have to change this to ID, for example, email field, and I would say hash here, right, I want to target an element that has the ID email field, which we know it's unique, and only one and only one element will have that ID, this one works, but it's still not the preferred way for either where I place the CSS, where I write it, and how I use the selector, okay, so instead of writing in here, we want to isolate that into an external file, so I could create a separate style sheet just for sign in, so we can do sign in dot CSS, and I'm going to paste that code that I had, let me open split down here, I right click the tab and split down, so I can open it in the bottom, and I have sign in dot html on the top, so I can cut this and paste it here, like that, and instead of style in the html file, I'm going to use link tag, attribute rail is style sheet, all it, and then the href is where is the file, well it's relative to where we are in signing dot html in the same directory, we can just say sign in dot CSS and it will know how to find it, link is a self-closing tag, you don't have to say the slash link like this, okay, that way we can have, if you want to open this to the site of vscode, you can control shift P or click view command palette, show preview from the live preview extension, so quickly see it, that email is actually occupying the whole row, but like I said, I don't recommend using id here, we want to use usually a class, but instead of doing that, I want to show you a different approach to, because you know when we have forms, we're going to have many labels, right, label for the email, label for password, maybe label for date, some kind of date or time, there's so many labels, we don't want to be adding, of course we could add a class for each one of them, but I want to teach you a different way to actually target or select the children of an element that has a class, and I'll show what it means, so basically what I'm going to do is remove this id, so I'm going to consider the following, every single label and input will be part of this div, right, div is a generic container, and this I'll be calling a group, a form group, and then I'll give a class to the div, the parent of label and input, by the way this terminology is very commonly used when we talk about html, because the structure as is seen, it can be thought of as like as a tree, and this tree is like spinning, and this label is a child of this div, and this input is a child of this div, therefore the label parent is the div, the input parent is the div, so we can think of it that way, okay, so the label and the input are siblings, okay, so you're going to hear that terminology a lot as you talk about html, because the structure is a tree, you're going to hear the term dom tree, document, object, model tree, something like that, okay, anyway I'm going to always pass a class here called form group, so that every single form group that I have will have the class like this, so with that I'm going to go back here to the selector for the CSS, and I want to target the label, right, but that label is a child of the div whose class is form group, how do I approach that, well if you, I'm going to do it thinking backwards, okay, first I want to target a label, so I could do that, but if I write it this way all the labels in the document will be targeted, can we like be more specific, I only want to do that if this label is a child of an element whose class is form group, so I can go backwards to the left out of space, and I say dot form dash root, now this is saying a label anywhere inside an element whose class is form group, and that matches exactly this, okay, now if you don't remember what I said, there's always the visual studio code feature that if I point my mouse over the selector, it lets me know what that is, so reading this again, okay, it says an element whose class is form group, okay, dot dot dot means could be anywhere as a child or a descendant, right, could be nested in another tag, as long as it's within the element, and the element is labeled, so that's what it means, a label somewhere in the tree of the element whose class is form group, okay, now the dot dot dot, I don't know if you understood that, it just means that I could have for example a div here, but notice how this label is no longer a child of the div with the class form group, although this scale is going to work because of the dot dot dot that you see, it could be anywhere as long as under that, it doesn't matter if it's inside a div or another element, it doesn't matter, now if you do care about that, you want a direct child, it's possible to do that if you change the selector, and you would have to go here and between the the class name and the label you have to say with a space greater than, what this is now telling it's okay, I want a label who that is a direct child like immediately under that div class form group, now this is not going to work anymore if I do it like that, let's see, okay, if you hover over that the dot dot dot is gone, now you might have noticed nothing changed, that's because the div, it's displayed block, so let me show you another element, maybe a span that'll be clear, see that it's not applied anymore, but it doesn't have, could we have a div and make color, let's say color red, right, maybe that's clear to you, you see the color is not changing, because this label is not like this, you see like that it works, because it's directly under the div class form group, now this doesn't work, see the difference, this is the greater than, this is without the greater than, which doesn't apply, so you got to understand the difference there, like that, like that, okay, hope that's clear, if not clear just, you can always go back here and hover over to remind yourself, and you can always play around like this and like that, anyway, I like doing it like this, so I'm immediately very specific, so let me remove the color, okay, so we're going to do that for the label, for password, so how do we do that, instead of going to the label directly, I go to the parent, which is the div here, and add a class form group, and notice how I use the same class, because I already wrote it, you only write it once, use it as many times as you want, you don't have to rewrite it again, don't repeat yourself, that's the whole point of this, okay, and because of this I can control all of the labels, by just going to the code here, for example I want them to have color blue, all of them will change at the same time, and that's why this technique is so powerful, you can have a central place that changes everywhere in the form, so that's very nice, okay, I'm going to revert to color, I don't want that, nice, so we talk about display, inline versus block, okay, block is, it doesn't let anybody next to it, inline is, okay, you can stay next to me, now let's talk about spacing, I don't like that email is too close to the text field, I would like some slight space under that, how would I approach that, what is the property, now to do that I need to teach you about the box model, so let's go to from externally, you might have noticed if you open the DAB tools, let's choose refresh here, let's choose this form group, maybe the label, click the label there, you notice on the right hand side, if you scroll down there's this box, that's called a box model, and firefox smart explicit, I think it says box model, you might have to click computer tab in firefox, so this is the spacing model, so we have the content, let me scroll this, the content itself, that's the inner part, we have the spacing between the border and the inner content, that's called batting, and we have the spacing outside the border called margin, now let's better understand that by practice, first I'm going to add a border surrounding that, so I'm going to click here and get say border, now this property is interesting, it has three values, it's called a shorthand property, so I want the bar to be let's say two pixels, two px, space, and I want the type of bar to be solid, the style, border style, and space, I want the color to be green, like that, so this is what's called shorthand property in css, you can hover over that and tell you shorthand property for setting border width, style and color, so if you were to do that separately, you would have to write border width, two px, border style, two px, and then border color, sorry solid right, and then border color green, see, so you can either type everything in one property with a shorthand or use the individual ones, obviously the individual ones is typing more, so some people might prefer just using border like that, okay, and you also can use the specific ones if you just want to change the width and not necessarily the style color, so usually the shorthand properties, they take more than one value, and when you do that, you separate them with space, you can see here there's one value here, space, another value, space, another, and you might be wondering how do you know the order of values, what is what, you got to just read the docs and understand how it is, and it comes from experience having done this multiple times, but I'll teach you a documentation resource called MDN, that's really useful, Mozilla developer network documentation, this is the website, you can search for the property here, border, and it will tell you what it is, I'll paste that to the zoom chat, so it gives you like an overview of what that property does, some examples if you click around, and if you scroll down to syntax section, you can see these examples, and it will tell you what each value is, the one that we used was the third one, sorry the fourth one here, I can see first the value is the width, second is the style, and third is the color, so that's how you understand how to use that, and you might have noticed you can also pass only two or only one value as well, and what it means for two for example is just the first is the style, second is the color, so very good resource, I recommend checking it out if you're unsure about certain CSS property, or you want to learn more about the values and the syntax, going back to what we were doing, so I added a border, everybody knows the border is, it's just some sort of line surrounding the box or the rectangle, so you can play around here clicking here up, down to see what it looks like with a lot of border less border, I'm going to exaggerate to six, and then it can choose the different styles, it could be like dash for example, it's like that, or like dotted is like the dots, anyway I'm going to keep solid for now, okay now you could have space between the text and the border, or space outside the border, so to add space inside it's called padding, so let's use the shorthand padding, and then let's start with zero one px, and then you press up to increase, see what's happening, as I increase padding, the space between the border and the content itself, inner content is increasing, now it increases on the top, right, bottom, and left, now the reason I just told you these keywords are important because they are predominant in CSS, so when I use the shorthand property, I am changing not only top but right, bottom, and left space for the padding, you can also be very specific if you just want to change one side, you would have to write for example, let me remove that for, I just want space to the left, that's padding dash left, padding dash left, and this pattern is very common in CSS, you're going to see whatever property dash left, or dash right, or dash top, or dash bottom, so if you do that one and increase, it would just add to the left, okay, let's go back to the shorthand that adds to all sides, now you learned about padding, now what's the space outside, that's the margin, so we can use the shorthand, and guess what, it's just the same margin, same pattern, let's start one pixels and increase, you see what's happening, outside the space is increasing on all sides, and that's margin, space outside, padding space inside, margin space outside, just remember that, and again, if you want to use just one side, maybe just one padding, margin to the bottom, that's what we want, margin dash bottom, that's exactly what I want, I want some space between the email label and the input, so we're going to use margin bottom, obviously I'm exaggerating right now, so we're going to calibrate that to less, but before I do that, scroll down here, you're going to see this box again, and that's just a reminder of the box model, if you ever forget about the box model, just open the dev tools and look at this box, you see in your content, this is the width cross height in pixels, and you can see padding is the space inside, right within the border, border padding, border padding, you can see highlights green, you can see the color green, and the number zero just means padding top, padding right, padding bottom, and padding left, same thing for border, number is the top right, right, left and bottom, and then outside is no margin, except for the bottom, 24, and it's kind of beige gray, I don't know how this color is, all right, so that's the box model, now I don't want this padding anymore, I don't want border, all I want is a margin bottom, maybe that's too much, let's try four, what do you think, eight, or four, eight, let's do eight, copy this, back to the code, remember I'm targeting labels, already have a selector here, I just have to add that here, and we got margin to the bottom of each, to the bottom of email and part of password, all of them changed, so long as the container parent has the class form group, okay, now I really don't like that the input is too close to the next group, right, visually it's next to the label for the next thing, I don't like that, how would you go about adding some space between them, I just want to point out that there's different ways you can accomplish the same thing in CSS, okay, there's no one single way, for example, if I want space between this and this password, obviously I can look at different perspectives, I can look from the perspective of a password, I could add either a padding to the top, or a margin to the top, right, or I can go to the input, add margin bottom, padding bottom, not padding, sorry, because padding is outside of order, just margin bottom, right, or I could go to the parent, which is this div, and add a margin bottom, that also works, that's the one I recommend, so I'm going to go here to CSS, how can we target this div, anybody want to guess, what's the selector you're going to use for this element, if I want to change style for this and that, we have a class, right, so we target by class name, we start with what punctuation, we're going to say select an element by its class, dot, form group is the name of the class, probably raised, this is targeting all elements whose class is form group, and I want to add margin bottom, let's do 16 px, and see what happened, to the bottom of each there is a margin, let's look at the dev tools, maybe it's better to visualize, I'm refreshed because I changed the code, I'm going to point to this, and click on the container, you see the form group highlighted, that's highlighted at the bottom is the margin bottom, that way every one of them at the bottom will have some margin, this one also has it too, so there's a very quick way, nice way to separate things, and you can see on the right hand side, there is a margin bottom 16 applied to the elements whose class is form group, so before, after, uncheck is before, check is after, okay nice, looking better, much better than before, how about we make the label in bold letters, how would we do that, that's called the weight, font weight, so locate the selector for the labels, I want all of them to be bold, so you would go here, this one line five, you're going to say font-weight, now the value could be several, you could just say bold, that's okay, but you can also be more specific as to what, you know when you have fonts, they kind of have the different levels of bold, so you could have like 500, which is pretty much not bold, 600, which is, it looks bold now, we're ready right, and there's 700, and you can look up MDN, or you can use the DevTools auto-suggesting feature like I showed you, to see what possible values you're going to have here, but anyway you can say bold if you want, like that, now notice, I don't like the font for this page actually, so if you recall from index.html, we actually included Google fonts right from Montserrat here, and in the css for index.css, we only applied that to the law and paragraph, the element whose class is that, and we did font-family, how do we apply the font-family to the whole document, instead of just one element, that's what I'm going to show you, so going back to signin.css, what we have to do is target the body tag, which is the one that encloses the whole content that people see, so we're going to go here, let me do it before, I selected for body, and we're going to change font-family to Montserrat to Rs, and I want to put a fallback to sans serif in case it doesn't exist anymore, and you change the font for the whole document, okay, that's the body selector, basically it'll target everything under the body, and the reason it changed, if you're asking why everything in the body changed, it's due to inheritance, basically the children elements of body, they inherit the font-family, let's see in the DevTools, I can see, remember when you have an HTML document, we have the top-level HTML tag and then two things, the head and the body, the body is what everybody sees in the content of the website, so this is actually what we styled, right, on the right hand side you can see this is what we wrote, so if you uncheck, it's like that, but why do the other elements adopt the same font, and if you click any one of them, like the A or the H1, you can scroll down, you see this inherited from body, font-family Montserrat, so that's why, there's an inheritance mechanism, meaning all the children of the body, all the descendants, their font-family will be inherited, unless you specify a different one, right, explicit, that's the mechanism, okay, so let's see, we got the spacing, we got the font, how about the button, but before I do that, I think I didn't teach you about placeholder attribute for inputs, let's go back to Visual Studio Code, sometimes when you look at farms, you see that there's some tags or a typed kind of floating in the input, although when you click it disappears, that's called a placeholder, and it's just a suggestion or tip to what the user should type, now that's very easy to do, locate the input, and you add the placeholder attribute, like this, for example, I want to give an example, mail at example.com, and you see there's this kind of gray fading text, it's like it's meant for the user to understand what he should type there, like what's the pattern, and when he clicks, starts typing, it goes away, right, very common feature that you might see out there, I can do the same for password, although it's kind of, everybody knows you should type, but basically placeholder, I don't even know what it's going to show, it's actually showing, okay, star, star, star, star, star, star, about that, and then when I start typing, it's bullet points, what's going on here, it's faded, I don't know why, that's weird, something's weird in this, let me restart, there you go, okay, let's touch on this button, remember we did button type submit, so like you can always target an element by a class, you can always make a new class and do it, but I'm going to show you like a different way to select this, so every form, right, form element, usually only has one submit button, a button type submit, so that's the assumption, okay, and how can I target this one, instead of a class, if I target the form from the form itself here, I want all the submit buttons for any one form element to be designed or layout the same way, so let's go here, selector, so it's a button, but it's not any kind of button, because you could have multiple buttons, it's a type submit, so how can I be more specific about the attribute of the button, you can actually type the brackets here and say type submit like this, so this is targeting any button whose type attribute has value submit, you got to use the square brackets like this, now I want it to be always inside a form, if you recall here, if I scroll, you see this button is inside a form, right, so I can add the form name before the space, so remember, if you don't remember, hover over it, and it's telling you there's a button with the attribute type having the value submit somewhere as a descendant of a form element, that's why it's a dot dot dot, okay, and then let's style that, let's say background color, maybe some kind of blue, we can calibrate, and then color white, I don't like the space is just too close together to the border, anybody remember what's the name of the property for the space inside between the content of the border, that's the padding, right, now if I do 16, it's like that, I kind of don't like that, so can I just do separate the top and bottom from right and left, of course, you can write them out, right, you can have padding top, padding bottom, padding right, padding left, then type them all, but this is tedious, people like to be lazy in programming, so instead use shorthand, which is this one, but this one is changing all, can I just change the top and bottom, for example, yes you can, it can do like this, let me remove the others, so like I said, read mdn to know what this is doing, we can play around the dev tools, let's play around, go into chrome, refresh, inspect this, let's play around with the padding, click here, if I go down, press down, down, down, what's doing, oh that's changing the padding top and bottom, right, oh let's calibrate, I like eight, that's good to me, now I want more on the left and right, so this one, oh it's changing left and right, let's do 16, something like that, okay, so that's how I play around and trial and error, you understand what the values are doing, great, I'm going to copy this back to my code, nice, I don't like the border, it's kind of pointy on this edges, can we make it rounded, yes, it's called border dash radius, and this is the shorthand for all the sides, all the edges, you can start one and then go increasingly rounded, like eight, that's eight, I think that's too much, maybe I just want four, slightly rounded, if you can see it, it's slightly rounded there, and I think there's something weird about the style of the border, I don't know where it is, there's some shadow whatever there, let's inspect in the dev tools, maybe we can change that, I can see scroll down, there's some weird properties from the user agent with the default style of the browser, and yeah, there's some stuff there, maybe look at the computed, show all, let me look at border here, look for border, there's so many properties related to border, let's see what the style is, what's the style, it doesn't say, block and style, okay let me change it, let's change the border style to dash, well actually that might not even be a border right, cannot see, maybe there isn't a border, let me put border with five pixels, oh there you are, we exaggerate to see if there is a border, there is, I exaggerate there, I don't like that stuff, that's weird to me, so maybe we can just remove the border altogether, let me try the style here, just for fun, and this is dashed, dotted, okay so we couldn't see because it's too small, but it's actually changing it, oh there's hidden, which is basically no border right, none is just kind of hidden as well, and they're solid, yeah I don't want border, maybe I can put none, how about that, and I'm going to take that out, and here I'll paste the code, okay so let me switch to a cool effect that you can apply to that button, which is the box shadow property, you might have seen that, so if we do box dash shadow, this one we have to do several values, let's start with 1px, space 1px, space 1px, space the color, put black, and I'll explain to you what this means with the dev tools, let's go refresh, so let's go here, you can see a box shadow, what is that, well it's literally a box shadow, and the first value is the x offset, so if I increase the shadow is going to the right, if I decrease to the left, okay so I'm exaggerating so you can see the shadow there, yeah the second value is the y offset, if you increase it goes down, if you decrease it goes up, okay, finally the last one is the blur, so if you increase it gets blurry, if you decrease it's less blurry, more solid opaque, right, and the third is the color, you can change to whatever, okay, let's calibrate that, maybe you want to slide to the right and down, it's like that, it's kind of used to give an effect of depth, like if you're, you know, remember if you're playing like a video game in arcade, they have buttons that you press, right, it's kind of like that effect, when you press the button, you can make like a CSS effect, when you hover over it or click, the button will go down as though it's pressed, we can try that, so let's see, I don't like, I like black, let's see, black, yeah, and I like a little blur, like that, you can change to whatever you think is nice, so make sure to copy back the values, here, there you go, now let me teach you a cool effect, let's say when I point my mouse and hover this button, I want it to kind of make the effect of being pushed, okay, or basically there's no shadow anymore, it's kind of, it will move a little bit to the right and down, I think, we can use the pseudo class selector and the way we do that is like this, so let's first copy the same selector, because we want to target that button, but now we're going to put colon hover, what this means is I want a style to be applied when the hover action is active, hover is when you have the pointer over it, right, and we can, first of all, maybe you can eliminate the shadow, I think you can say none, yeah, there you go, see that when the hover is gone, you can either do that or you can actually move the button to be covering the shadow, I think that's a better approach, let's see, let's see, if I remove this, how can I translate the button around about its original place, are we going to use left property like this, but it doesn't work by itself, you have to combine with another property called position, so position relative, and if I increase left, that should move it around, but let's see what's going on, why is it not moving, because it's got a hover, sorry, yeah, there you go, that's the problem because the shadow is moving accordingly, so maybe I should remove the shadow, there's different ways to go about solving this problem, so let's see, that's not the right place, right, how much of the shadow, that's three, right, so it has to be three here, I think, to give like the sense that's being pushed, and then to go down, I gotta go top, yeah, actually, I think, yeah, there you go, something like that, okay, so if you want to position an element, like to shift its position, make the position property relative, and it can manipulate with left and top, there's also right and bottom, and you can guess what they do, right, the right that kind of pushes it to the left, it's kind of weird, you have to think of the opposite, imagine it's just adding space to the left, or adding space to the top, adding space to the right, that's how I think about it, when I remember, if I want to push to the right, I just think of it as adding space to the left, when I want to push to the left, I think of it as adding space to the right, something like that, okay, save, let's look at chrome, so you can see the button, so when I hover, it kind of gives the effect that it's pressed, when you press a button in real life, it goes down the thing, right, the hole, so I don't know what you think, okay, just a fun thing to teach you the position and box shadow, and you learn the pseudo class hover, by the way, if you want to debug that in dev tools, and you don't, you have a hard time, hey, how can I leave, how can you debug if my pointer cannot be there and here at the same time, right, what the hell, it's easy, click that inspect, you can go to this, you see that colon hub, click that, and you can change, activate one state, element state, one of them is a hover, remember that's the one we're using, you can click that, and it will be acting as though you have a pointer there, so you can see what's before hover after, before after, which is the press button, effect, very useful, you can also do that for other stuff, other pseudo class electors, like these other ones, that we haven't talked about, they can look it up, okay, yeah, I think, I'll call it a lesson,