Transcript from the "Textarea & Select Styling" Lesson
[00:00:00]
>> Jen Kramer: My text area.
>> Jen Kramer: I'm gonna set a height on this. 10rem, and I'm going to set a padding on it too, 1rem. What do you think this is gonna do for my text area? Yeah?
>> Speaker 2: Make it bigger.
>> Jen Kramer: Make it bigger. We have a tiny little box to start with, we want it bigger.
[00:00:26] We can just use CSS to do that. Historically there's been HTML attributes that you could use to make your text area bigger. Not needed anymore. We can just use CSS to do that, okay? So we go ahead and refresh the page. Hey, we have a bigger text area.
[00:00:48]
Isn't that nice? So nice.
>> Jen Kramer: And how about this select, anyone bothered by the size of the font on the Select?
>> [INAUDIBLE]
>> Jen Kramer: I'm bothered by it cuz I'm an old person. It's tiny. I can't see it. I want it bigger. So I'm gonna go ahead and add a style to make that bigger.
[00:01:15]
So I'm gonna go ahead and say select, how would I make the font, bigger font size? Font size. And then pick something. It's not one rim right now. So I'm gonna go ahead and just set it to one rem.
>> Jen Kramer: Now I can read it, sort of somewhat better.
[00:01:49]
>> Jen Kramer: Okay. Next up I want to style this button down here. That has got to be the tiniest button I have ever seen in my entire life. I'm really bothered by the size of this button. I want it much bigger. I want it a different color, because it's very lost down here at the bottom of the page.
[00:02:08] Buttons are very commonly styled in all kinds of crazy ways. So, I've got some good stuff here for this button. Let's style up our button. First of all, let's go ahead and change our font size to one rem. That alone is going to help our button tremendously. Just change the font size.
[00:02:31]
And then you can actually start to see the button, yeah.
>> Jen Kramer: I'm going to put a margin on this button.
>> Jen Kramer: 2rem 0, what does that mean, 2rem 0?
>> Jen Kramer: 2 rems on the top.
>> Speaker 2: 2 rems on the top and the bottom?
>> [INAUDIBLE]
>> Jen Kramer: 0 on the lett [INAUDIBLE] 0 on the left and the right, correct, okay?
[00:03:00]
So that's gonna give this button a little bit of breathing room down here. Okay, little bit more breathing room. Okay.
>> Jen Kramer: Now we can go ahead and change its color. So I have a background color.
>> Jen Kramer: And that background color is bb342F, which is a lovely shade of red.
[00:03:37] You can also pull off a different color off of the galaxy using your colorZilla eyedropper and just run it around on the galaxy. And find a nice looking color that will work great for that button. Go on ahead and choose something. Once i do that you won't really be able to see the text so we need to change the text color.
[00:03:56]
What is my property for text color? Just color. Just color, I don't know why they did that, but okay, just color, white.
>> Jen Kramer: Okay, looking a little more appealing, okay? We still got that 90 styling thing going on here, right sort of popped off the web page. Everybody see that?
[00:04:26]
Anybody who have any idea what's causing it to sort of pop off the web page and then 3D sort of way?
>> Speaker 2: Yeah, there's sort of button decoration.
>> Jen Kramer: Maybe it's some kind of button decoration?
>> Speaker 3: Which might be a border.
>> Jen Kramer: Border, yeah. Let's try resetting the border here.
[00:04:45]
So if we go ahead and say border, how about none? [LAUGH] Let's turn off the border that we have, okay?
>> Jen Kramer: So we will make our button a little flatter. Still doesn't look very clickable does it. Okay but it's getting more appealing looking alright, so next step.
>> Jen Kramer: Let's put some padding on it to make this button bigger.
[00:05:22]
>> Jen Kramer: 0.5rem 1rem.
>> Jen Kramer: So where is this padding going? 0.5rem where?
>> Speaker 3: Top and bottom.
>> Jen Kramer: Top and bottom. 1rem where?
>> Speaker 3: Sides.
>> Jen Kramer: Left and right, okay let's add that.
>> Jen Kramer: It's starting to look like a button. Just adding a little padding, right? Now, notice how nicely we rounded the corners here.
[00:05:57] Notice how our button has pointy corners, all right? This is another one of those fashion things, all right. If you're going to go with pointy corners go all the way all the corners are pointy. If you're going to go with rounded corners, go all the way it should all be rounded.
[00:06:15] And they should generally be rounded about the same amount, okay? So I'm gonna go ahead and add to this a border radius of 10 pixels. That's actually what I used before I think. Yeah, so I'm being consistent, 10 pixels. [COUGH] And if we refresh the page Whoo looking like a button.
[00:06:48]
What do you think? Okay, yes. So I think there should be a hover state. What a great idea. How about a hover state? I also have a question. So that is a clickable link.
>> Speaker 2: How come when I put my cursor over it, it doesn't change to a pointy hand?
[00:07:05]
>> Jen Kramer: Yes. Because that's the way the browsers their buttons dealt with.
>> Speaker 2: Okay, so this is a safari thing and not well?
>> Jen Kramer: Well but it's actually the same here I'm using Firefox and I have a pointy arrow also when I run on the mouse over it. There is a way to change that in CSS, it's the cursor property.
[00:07:22] So that we can take a look at that.