Transcript from the "Input Spacing" Lesson
[00:00:00]
>> Jen Kramer: I now have the craziest selector you've ever seen in your entire life. We've kept our selectors really, really simple up until now. Yeah, we've used HTML tags, we've used classes, we've used IDs, and we've used descendant selectors. But I wrote a really crazy selector here for you because I want you to see what is possible with CSS.
[00:00:20]
I'm not expecting you guys to know how to use selectors like this. I'm not expecting you to be able to write selectors like this. But I want you to take a look at some of the crazy things people do in their code. So you can look at it and go, that's a weird selector thing, I need to do a little research to know what that means.
[00:00:38]
Okay? And so this crazy selector has to do with the following. Let's just look at our form right now. We've got all these fields and text right? Things are kind of close together. We have a nice separation of space here but really everything else is kinda piled on top of each other right?
[00:00:59]
Okay, so we could go ahead and look at our HTML, and we can see, we have some inputs, right? Lots and lots of input tags here, and we need to have some margin that goes underneath those input tags. So let's go on ahead and add that here to our code.
[00:01:20]
I'm gonna start with input. Warning, this is gonna blow up, that's okay, all right? So let's start with just our input tags here, and let's say that what we wanna do. First of all, are these input tags, are they inline or are they block?
>> Jen Kramer: Do we know?
[00:01:42]
>> [INAUDIBLE]
>> Jen Kramer: Are input tags inline or block?
>> Jen Kramer: They're probably inline right? And in fact, if you put the border on them, you'll find out that they're inline. So I'm gonna switch their display to block because that's gonna allow me to put a little bit of padding on underneath of these so we can get some more spacing on our page with our form, all right.
[00:02:10]
And so, otherwise our margin isn't gonna quite work correctly here. So I'm gonna to put on a margin on the bottom of 2rem, okay.
>> Jen Kramer: I'm gonna give them all a nice width of 20rem, okay. So that they're all nice and even right? Nice, the same size. That's a hallmark of a nicely coded web page.
[00:02:36]
You don't want unsightly, different sized form fields right? These are just little graphic design things you can do even if you're not a designer.
>> Jen Kramer: We noticed that some of the input fields had different fonts in it. So I'm gonna go ahead and declare a font family here, a font family.
[00:02:54]
Arial, helvetica, sans-serif. And I'm gonna declare a font size because we have different font sizes, right?
>> Jen Kramer: I'm gonna put on some padding,
>> Jen Kramer: 0 1rem, and what does that mean again? 0 1rem? 0 and what?
>> Speaker 2: Top and bottom.
>> Jen Kramer: And 1rem where?
>> Speaker 2: Left and right.
[00:03:28]
>> Jen Kramer: Gosh, you guys are getting good at this! Okay. So that's gonna put on some padding.
>> Jen Kramer: All right, I think I got everything. Now we're gonna go ahead and save this. I'm warning you, it's gonna blow some stuff up, don't panic. Save it and let's look at the web page.
[00:03:49]
>> Jen Kramer: Okay, what happened?
>> Jen Kramer: Okay, let's look at it and think about it. So what happened here?
>> Jen Kramer: This looks pretty good, doesn't it? This is exactly what we wanted. We have some nice input fields up here on the top, we have some nice spacing in between. Cool stuff, right?
[00:04:16]
Okay, this is looking pretty good. And then when we get to our radio buttons, what happened?
>> Speaker 3: Made it look bad, cuz it's an input, also.
>> Jen Kramer: It's also an input, and that's how a 20rem radio button looks.