Form & Fieldset Styling

[00:00:00]
>> Jen Kramer: Well, that's nice, it's a great picture. But now we can't read the form at all. That's kind of bad, all right? So one of the tricks that you can do when laying at a web page like this, that's kind of fun. Notice that there are colors on all these galaxies, yeah, okay?

[00:00:20]
Notice that you have your eye dropper in Colorzilla, right? You can go ahead and pick here some cool color from this galaxy, and it will match so nicely with your picture. Your whole color scheme will come together, it'll look so professional, all right? So you can roll your mouse around in here and pick a color that you like.

[00:00:43]
And we're gonna set that to be the background color for our wrapper. And I already did this, so I've already picked my color, [COUGH] which I have here in my notes. So on my wrapper, let's set this to a background color.
>> Jen Kramer: And that color is going to be, in my case, efb106, which is a lovely shade of orange.

[00:01:13]
>> Jen Kramer: Okay, and if you refresh your page, this is a nice way of applying a background image. And still getting the benefit of a background image, but still having readable text on your webpage, okay? So you can just put a solid color on your wrapper, and already it's looking a little bit more polished?

[00:01:34]
Very, very simple technique. This paragraph style, we actually aren't gonna need anymore. That was there when we had paragraphs, we have very few paragraphs at this point, you can go ahead and get rid of that. Our section, we have our aside, and now we're moving on.
>> Jen Kramer: Okay, actually, I did keep my paragraph style, I just moved it down here.

[00:01:57]
So I'm gonna go ahead and do this. Let me put back in my paragraph style, margin-bottom: 0, margin-top: 2rem. How else could I have written this, instead of writing margin-bottom and margin-top, how else could I have written this?
>> Student1: Margin.
>> Jen Kramer: Margin?
>> Student1: 2rem.
>> Jen Kramer: 2rem, like this?

[00:02:21]
>> Student1: No, then 0 after 2rem.
>> Jen Kramer: 0 after 2rem? Is that the same thing?
>> Student1: No, sorry.
>> Jen Kramer: How could I write a margin top of 2rem and a margin bottom of 0? Which also means the margin on the left and the margin on the right of 0, how could I write that?

[00:02:41]
>> Student2: Trouble.
>> Student1: Zero.
>> Jen Kramer: Trouble, remember, we gotta remember our trouble, right?
>> Student2: Top.
>> Jen Kramer: So top is 2rem, 0.
>> Student2: Right 0.
>> Jen Kramer: 0 on the right, 0 on the bottom, 0 on the left.
>> Student2: There you go.
>> Jen Kramer: That'd be another way to write it, right?

[00:02:58]
All kinds of different ways to write these numbers. They're all correct.
>> Jen Kramer: I'm gonna move on here to my fieldset.
>> Jen Kramer: Let me put in a bunch of returns so you can see what I'm doing. I'm gonna move on to my fieldset. [COUGH] Now you notice that the fieldset right now has got a great big huge line going around our content, right?

[00:03:20]
You guys dig the line, you wanna keep it? Do you hate it? How do you feel about the line?
>> Student1: I like it, it's cool.
>> Jen Kramer: You like it? If you like it, you can keep it. If you don't like it, we can get rid of it. So I'm gonna show you how we can go about working with that line.

[00:03:38]
One possibility is simply to redeclare. Cuz right now what you have going on here with this line, this is kind of a 90s sort of effect, I think, I think of it. [LAUGH] It's either called inset or outset, it kinda gives you that fake 3D sort of look.

[00:03:55]
Which is not really in the graphic design fashion world at the moment. We like flat in the current graphic design fashion world, this is kind of a dated book. We just need to update, trim down the bell bottoms a little bit. No more parachute pants, all that stuff.

[00:04:10]
So what we're gonna do here is we're gonna say instead, border. And I said 1 pixel solid black, which will give me a nice flat, narrow black line around it, it will be a little prettier that way. And I also did this, border-radius: 10 pixels. So we'll have some nice pretty rounded corners on our fieldset as well.

[00:04:39]
And one other thing you might wanna add, as you'll see here in a moment, we may also wanna add a little bit of margin.
>> Jen Kramer: margin-bottom of 2rem, so that's gonna give us a little bit of space in between our two fieldsets, a little bit of breathing room between them.

[00:05:01]
>> Jen Kramer: So go ahead and type all that in, refresh your page. Aw, isn't that prettier? So much nicer looking. So you can keep your lines, you can just like jazz them up a little bit. [COUGH] Bring them into the new millenium.