Transcript from the "Textarea & Select List Spacing" Lesson
[00:00:00]
>> Jen Kramer: We have a couple little tweaks left to go here, this is all kind of tight, a little bit tight together here, okay? So I have some more stuff for that, this goes back to crazy selectors again. I'm gonna scroll back up to my paragraph. So this paragraph worked really well.
[00:00:20]
This has got a nice little bit of margin to separate things, but I need to apply the same kinda styling. I'd like to apply it here to what type of abduction experience do you want? I need a little space between that and those radio buttons, don't I? Okay, so let's go take a look at our code, where is that?
[00:00:47]
>> Jen Kramer: Okay, so I have a label here. What type of abduction experience do you want? So you guys would probably write a class for that. And you could stack a class here, like whatever. Some sort of class here with the paragraph and put in that margin on the top and that would get you that space.
[00:01:05]
But in the interest of showing you weirdo selectors, notice that that label has a for on it, right? That's an attribute selector, and it's unique here in this document. Cool, so we could use an attribute selector, just use our square brackets like this, and we could say, [for='abtype'].
[00:01:28]
>> Jen Kramer: This is Jen showing off, this is not like, and I mean, it's actually good practice, you don't have to create a class here or anything. But I'm just, again, just trying to show you a little bit more of what's going on out here. You could definitely do this with a class.
[00:01:42]
You could do what I just showed you before with a class too. But if you know some of these cool CSS selectors, then you don't have to use so many classes, all right? You can keep your code nice and clean. So using [for='abtype'],
>> Jen Kramer: Then we go ahead and add that little bit of space, yeah, nice.
[00:02:04]
The other thing is, we need some space here between my Select drop-down, right, and Special requests? That's really the last thing that we need here to make this form look pretty. This is a little bit tight in terms of our space. So let's look again at our HTML, all right.
[00:02:21]
So, how could we create some space between this label here for comments and that Select drop-down, right? That's where we are, that's where that space is. Between Special requests and Select one.
>> Jen Kramer: How could we create some space there, yeah?
>> Speaker 2: It's you.
>> Cassie: All right, [LAUGH] could we just add a comma after the input, not all that stuff, and just put a select afterwards?
[00:02:58]
>> Jen Kramer: We could, sure. Although that's got a lot of other stuff, but let's try it. So the crazy selector down here, the very last one on our page. You wanna put a comma here and say Select?
>> Cassie: Yeah.
>> Jen Kramer: Okay, let's see what happens. So we're gonna add select to our list of all these selectors here, on our absolute crazy one here, and let's see what happens.
[00:03:23]
>> Jen Kramer: Ooh, so that rounded the corners and it made it the same length, and it gave us a nice font. That's pretty nice, great solution.
>> Jen Kramer: All right, and now you know a little bit about how to tweak these. You could go back to these labels, you could add a little bit of padding underneath if you wanted to do that.
[00:03:42]
I think we already have a label property here, or a label declaration, yeah. So we could say padding or margin, either one, bottom, let's say 0.3rem,
>> Jen Kramer: On our label, this is around line 46, 47, 48, something like that.
>> Jen Kramer: That'd give us just a little bit of breathing room between those words and the actual labels there.
[00:04:15]
>> Jen Kramer: Nice.
>> Jen Kramer: Yep?
>> Cassie: How do you make those check boxes pretty in just the radio points?
>> Jen Kramer: These radio buttons here?
>> Cassie: Yeah, how can we make that more pretty?
>> Jen Kramer: More pretty?
>> Cassie: Yeah.
>> Jen Kramer: I'll give you that for homework.
>> Cassie: All right.
>> Jen Kramer: Why don't you look into it and come back and tell us tomorrow?
[00:04:42]
Seriously.
>> Cassie: Okay.
>> Jen Kramer: Okay, that would be good. Yeah, Dylan?
>> Dylan: Other than her solution, from going down and then putting in a comma, I just put it back up on the top of the p for=abtype comma bracket for comments, is there any issue with that?
>> Jen Kramer: Nope, nope, but just be aware, so Cassie's solution here, she added select here to the bottom so this adds all of these styles.
[00:05:09]
It made it a block, it gave us a margin, it gave us a width, it gave us a font-family, padding, blah blah blah, right, gave us all of that. If you put it up here on the other one, this one here, p, [for="abype"] and we add it on to that with whatever for=, whatever the other thing was, then all we're adding is the margin.
[00:05:32]
That's all we're adding, which is better?
>> Speaker 5: It depends.
>> Jen Kramer: It depends, yeah, what do you wanna do, right? Okay, how are you guys feeling?
>> Jen Kramer: Okay?
>> Speaker 6: To do what Dylan was talking about, is that colon and then the same square bracket and-
>> Dylan: It was just a comma.
[00:05:54]
>> Speaker 6: It was a comma and then [for=
>> Dylan: Comment.
>> Speaker 6: Comment, okay.
>> Jen Kramer: Yes, so yeah.
>> Speaker 6: There's a comment [INAUDIBLE]
>> Jen Kramer: Instead of abtype, this would be comment. So the selector would look just like this.
>> Speaker 6: You just put that comma and then that, yeah, okay.
>> Jen Kramer: Yep.
[00:06:10]
>> Speaker 6: And a space, too.
>> Jen Kramer: [for="comment"] or comments, I don't remember which it was, but whichever is correct. Yeah, you can just line them up separated by commas, just like that.