Styling the Calculator

[00:00:00]
>> Jen Kramer: So I'm really, really, really super pleased that a lot of you have gotten the memo that one of the good things to do as you're working with CSS is to stick the border on it. Stick a border on it over and over again. It makes me very happy to see that you all are doing that.

[00:00:14]
So I'm gonna go ahead and put a border on my wrapper.
>> Jen Kramer: Let's see, we'll make it three pixels solid red. So I can see that and I'm also going to make my class .calc-button-row, and I'm gonna put a border on that too. Border 3 pixels solid blue.

[00:00:46]
>> Jen Kramer: So that is just gonna give us, of course, some lines around the whole thing, so we can kinda see what's going on.
>> Jen Kramer: And the reason that my screen looks so enormous is because I've zoomed in really, really far. And that is in fact, a 400-pixel wide wrapper, but it's zoomed in so far.

[00:01:12]
It looks like it stretches most of the way across the screen, okay, for the rest of you. It'll look like it tastes that much less of your browser window and it's much smaller. Okay, so now that we've got all that done, let's go ahead and head on to our styling and let's start with thinking about the easy part and the easy part is what.

[00:01:43]
This up here at the top. Yeah, so the way that looks, all we have to do is have a zero. It needs to be white. It needs to be on the far right side and the background here needs to be black. That's all we need to do. All right, so the one hint I'm gonna give you is we're gonna split this styling between two places.

[00:02:11]
So one place I'm going to put the colors on the wrapper just for the moment, okay? So what colors do I need to set to make this magic happen right here? What are my properties?
>> Speaker 2: It's in the the instructions?
>> Jen Kramer: Pardon?
>> Speaker 2: The colors are in the instructions.

[00:02:32]
>> Jen Kramer: The colors are in the instructions. That will tell me, but which two colors do I need?
>> Speaker 2: Black and white.
>> Jen Kramer: Black, white, correct? And what are my properties?
>> Speaker 2: Background color.
>> Jen Kramer: Okay, so I'm gonna go ahead and put this on my wrapper actually. Background color black, all right?

[00:02:56]
Color white, I’m putting it right here on my wrapper. So what is gonna happen now before we save this and look at it in the web browser? What’s gonna happen? I made my whole background color on the wrapper black and I’ve made my text color white, what's gonna happen?

[00:03:21]
>> Speaker 2: The whole thing is gonna be black.
>> Jen Kramer: The whole thing is gonna be black. The whole thing is gonna be black with white writing just like that, okay? So this first row is looking pretty good, except we need to get that zero over to the right-hand side, correct?

[00:03:37]
Okay, so what should I do to get that zero over to the right-hand side?
>> Speaker 2: Text align.
>> Jen Kramer: Yeah and what is my selector?
>> Speaker 2: Screen?
>> Speaker 3: Screen.
>> Jen Kramer: Okay and then what else am I gonna need here?
>> Speaker 3: Text just-
>> Jen Kramer: Text align. Text align, right? Thank you.

[00:04:10]
Okay, so that's gonna put it to the side. Is that font the same font that we see, oops, not that one in our picture. Is that the same font?
>> Jen Kramer: Not quite, so we need to set a font here.
>> Jen Kramer: So the font we can set here is font-family and we can use Courier.

[00:04:46]
Courier New, Courier, monospace.
>> Jen Kramer: So this is the sort of the typewriter font that we have going on here, that's going to give us and that's appropriate for a calculator kind of a typewritery looking font, okay?
>> Jen Kramer: And what I have here in my notes, I also have some padding.

[00:05:19]
So let's put in some padding too and the padding is 20 pixels, 5 pixels. And again, Brian wrote this code, so he's done it in pixels. Okay, but what does that mean? 20 pixels means we're adding 20 pixels top and bottom. Five pixels is what?
>> Speaker 3: Left and right.

[00:05:38]
>> Jen Kramer: Left and right, okay? Good, so now when we refresh again, we have a little breathing room around zero and our zero looks very nice. I'm gonna go ahead and resize this now a little bit.
>> Jen Kramer: That's the real size of the calculator so far. Let's also make that zero a little bigger.

[00:06:05]
>> Jen Kramer: So we'll add a font size of 40 pixels. And again, this is what would Brian has coded here. He's done his thing in pixels. So we're gonna honor that.
>> Jen Kramer: Okay, that actually looks more readable, doesn't it?
>> Jen Kramer: You've coded the screen, whoa.
>> [APPLAUSE]