2.5 Form Styling
It’s time for some styling; in this lesson we’ll write the CSS for our page.
2.5 Form Styling
Hello and welcome to lesson number five of this course where we'll write the CSS for our page. So let's begin with the body, and on the body we're gonna set a background color. We're gonna set the font family to Roboto Condensed. Set a font size and a line height, that's pretty straightforward, and we get this. Now let's do the H1NH2's. On both of these we're setting colors, font sizes, font weights and a margin 0. The h1 has a 700 weight so it's a bolder, the h2 is much lighter at 300. In addition we're setting the active class for dispense to just have this color here. So let's have a look, okay. So notice how the color there will change based on what field I'm focusing, rretty cool. Now let's see about the container for our entire form. And the container will basically be white will have some around corners and will be centered in the middle of our page and it's gonna stay there no matter how we're resizing the page. For that we're gonna target card container. And we're gonna set a background color of white. A width position absolute top and left to 50% so its top left corner is right in the middle of the page and then we're gonna use transform, translate. -50% both top and left to reposition it in the middle of our page and we're adding a border radius which probably should be around here at the top. So, now our container looks like this much better right. Next let's go and add a little bit of spacing and padding actually to all of these sections header main and footer and space things out a little bit better. So what we're doing is we're adding a 3.75em padding to the header main and footer then on the header, we're adding a border-bottom and we're reducing the padding-bottom a little bit. We're removing the padding-bottom from the main. And we're adding a couple more styles for the footer, setting a color, font-size and aligning the text on the center. So we get from this to this. So, as you can see, the styling on this page is almost complete, we just have to deal with this form. Let's start by setting the new typeface, the new fonts to the form. So, we'll do font-family Roboto Mono and we'll set the font-weight to 500. Now let's go ahead and style these labels because they have to be above the inputs and be a little bit smaller. So we're setting a color, font size we're making them uppercase display blocks so they're above the inputs and setting a margin bottom of point 0.5ems. So now we get this bit, now let's go ahead and add a bit of spacing between the inputs and the payment button. And start working on these fields because they need to be a certain size and sit in a single row. First, let's add a margin bottom to the input fields container which is the div that holds all of our fields. Next, let's tile the inputs. Now, on the inputs were sending a max with 100%, so the width of the input doesn't exceed the space that's available. Setting color, outline and border to none, setting a five pixel border-bottom solid, a little bit of padding, and then styles for the focus on error. So the focus basically we're changing the bottom border color and the error we're also changing the text color. So now our forms our fields look like this. Here's how they look like when they're focused and here's how they look like when we have an error inside of them. Now let's go ahead and target the containers for each of these fields. Let's line them up in a single row, and let's give specific widths to all of them. Now for all three containers we're sending float left and a margin right of two ems. Then we're giving widths to each one of these and we're setting the margin right 0 for the last one. So we go from this to this. Now of course we're floating stuff to the left so that means we have to clear those flaws. We're gonna do it here, we're gonna see input-fields-container:after. Whoops, we're gonna say content has none, display block and clear both. That will make sure all of the floats are cleared. Next let's style the payment button. And we're gonna go down here and we're gonna say submit-payment. For this we're setting the background color and border to these values saving a border radius of 50 pixels height. Aligning text in the center. Giving up a font size a font weight. 100% width so it occupies all the available space. White for text color, we're making everything upper case, 1 pixel letter spacing, line height 3.5em so the text is positioned in the center. Display inline-block to be able to give it a height and a width, text decoration none to get rid of the underlying that's inherently present in the anchor tags, and outline none. So we go from this to this, this is our button. Now of course we need a style for the disabled class so disabled. We're gonna set the cursor to default. Now we're gonna set the opacity to 0.5, and it looks like this. Now we also want a hover state for the button, but we want it to take effect when it's not disabled. So we're gonna say submit-payment:not(.disabled): hover. And we're gonna set the background color. Let's say that the we enter a valid values in here. 33 and 113. Now the payment button becomes available and it has the correct hover style. All right, so that's it for styling in this lesson. Now, we have pretty much everything covered. There are just a few final touches left and we'll handle those in the next lesson.