I'm going to go up to the top, and I'm going to import another style sheet. It's one that we need to create. This is going to be just dedicated to forms. This is going to be the form style sheet, and if we open up the sidebar, let's go and create this file. I'm going to say form.css.

The reason why I'm putting this in a dedicated form file instead of the contact one is just because the form is something that's usually shared across other pages. You don't want to have to import the entire contact library every time that you want to have a styled form.

Taking a look, and we can close the about.html page. If we go down, let's see what we need to select. We have the class of form, and then we have form groups. Let's go back to the finished version and see what we have.

We have these inputs here. To start off, let's just make sure that we have some space in between those. We'll also get to test out our selectors that way. We have a form-group. I'm going to say, for a class of form and any form-group inside of that is going to need to have some margin on the top. Let's make this 30px, and then we're going to have some margin on the bottom.

form.css

.form > .form-group {
    margin-top: 30px;
    margin-bottom: 30px;
}

Switching back, if you hit Refresh, you can see that gives us some nice space. This should be all we need on that side. We also know that our selector is working.

That's kind of a pattern I follow, is anytime I'll add a new file or anything like that, I'll add a very basic test, just like this, just to make sure that everything is working properly.

What I've discovered is if I do not do something like that and then I had a typo or anything related to that, something small, unrelated to the code, then that becomes a lot harder to debug. If I go and I'm coding for 10 or 15 minutes without testing it, then it's going to take me longer to trace back to see where the bug occurred.

When you are writing code, write very small, tiny bits of it, and test it continually, to make sure that everything that you're doing is working. Now, let's go, and we're not going to actually have to write any styles for the form directly. So let's actually keep the form group here at the top.

The next element we're going to do is we're going to grab the form input. The form input here is going to have quite a few styles. We'll walk through them one-by-one. We first want to make sure that our font-size is pretty big. So I'm going to go 1.5em.

form.css

.form input {
    font-size: 1.5em;
}

Actually, let me show you one other size. We have em, but we also have another unit of measure called rem. What the difference is, usually there's not a big difference, but what rem does is it gives you access to the root value, where em is a little bit different.

For em, If there's some other style definition that precedes it, em is simply going to give you a percentage of that. I know that's kind of hard to understand if you've never seen it before. So let's actually kind of walk through it here.

Say that you have an h1 tag, and you start with it something like 20px, some size like that. If you have 20px, that is a custom size you have given. We'll say, at its root, h1s have 18px, just for the sake of argument. You say, "Okay, in my application, all h1s should be 20px."

Well, if you use the em, so we say h1 should be something like 1.5 em, this em is going to be related to this custom value of h1 > 20px. This is going to be about 150% of 20px. If you come down and say, "Okay, well, for this other element, I want to do 1.5 rem," this is going to go back to the root. That r is going to go to the root, and so it's going to be 1.5 on the 18px.

That's what the difference is. If you've never heard of that or if you do see it later on, that's what the difference is. If you need to make sure you're going back to the root value, then use rem.

We have our font-size, and I'm going to use a font-family. I'm actually going to use a value that you may not have seen before. This is going to be called inherit. This just means that I want to inherit from whatever the last value was.

form.css

.form input {
    font-size: 1.5em;
    font-family: inherit;
}

If that's a little bit confusing, the only reason I'm doing this, I don't think it'd actually make a difference in our situation, but if you're working on an application that has a ton of different forms and maybe they're styled differently, this is going to give you a lot more control. This will make sure that you don't run into a situation where you have a font-family overriding your form input.

That's all it's doing. It's going to go look at the root input value or font-family, and it's just going to say, "Okay, we're going to use this." Then I'm also going to do the same thing for the color. So I'm going to say inherit for this as well.

Then let's add some padding. For padding, I want to do 1.5 rem, and then let's go with 2 rem. The same rules apply as the font-size for the padding. In a form input, you have very little padding, by default.

form.css

.form input {
    font-size: 1.5em;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
}

What I'm saying here is whatever the root padding value is, I want this to be, top and bottom, 150% of that and, left and right, 200% of that, or approximately. That's what we're doing with the padding.

The reason why I'm using these rems is not just to teach you, but also, in my own practice, when I'm building out applications, when I'm working with forms, they can be very tricky. You can have all kinds of kind of sneaky overrides that come in, maybe from a framework you've installed or anything like that.

I will always try to make sure that I'm protecting myself and I'm going back to the root value, to essentially say I'm very confident that I'm starting from scratch with these values. That's the reason why we're doing that.

I'm going to add a border-radius here of 2px, which we've been using throughout the entire application. Then let's add a border-bottom. By default, all HTML forms have a border around all edges. I want to say that the border-bottom here is going to be 3px solid, and it's going to be that nice dark blue color, so #11122B.

form.css

.form input {
    font-size: 1.5em;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border-bottom: 3px solid #11122b;
}

Now, this, by itself, is not going to work perfectly. We also need to, right above this, say that we want a border: none. The way CSS works, it's just going to go line by line. It's going to set the font-family. It's going to set all those values.

form.css

.form input {
    font-size: 1.5em;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border: none;
    border-bottom: 3px solid #11122b;
}

It's going to come to line 12 here and say, "Okay, they don't want a border." Then, on line 13, we'll say, "Okay, they do want a border, but only on the bottom, and put in these values." That's how we're able to create a form that doesn't have those ugly little gray edges. It just has a little line on the bottom.

Now that we have that, I want to have a width: 100%. Then display: block. Now, display block is the default behavior for divs, but we are declaring it here. This is going to be necessary for us to build that cool animation.

form.css

.form input {
    font-size: 1.5em;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border: none;
    border-bottom: 3px solid #11122b;
    width: 100%;
    display: block;
}

We're just saying that I want this form input to essentially act like a div, in that sense. From there, I want to say transition, and I want to capture all transition types because we're going to be performing some different types of transitions. You'll see why I need to do that here in a second, and I want it to take 0.3s.

form.css

.form input {
    font-size: 1.5em;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border: none;
    border-bottom: 3px solid #11122b;
    width: 100%;
    display: block;
    transition: all 0.3s;
}

These are going to be pretty quick. That was a lot of code, but hopefully, we went line by line, slow enough so that if any of it did not make sense, then hopefully it makes more sense now. If after that, you're still a little unclear after we're done with the video, what my recommendation is is to pause it and not go onto the next one.

Play with these values and see exactly what happens when you change some of them. Switch between rems and ems, and remove font families and color and inheritance and remove the block and those kinds of things. Hopefully, that'll help to kind of reinforce what we're doing.

Now if I do that, you can see we have much better-looking form elements here. Now, we still have a lot of issues and a lot of things we need to do, but hopefully, this gives you a good feeling for the first few items that we needed to implement.

This is getting a little bit closer to what we have here. In the next guide, we're going to continue on down the line, and we're going to work on the text area.