Join Chris Converse for an in-depth discussion in this video Adding color and imagery to the form element, part of Design the Web: Styling Form Elements.
- Now, to begin our project, we're going to go to the exercise files. Let's find the form.html and the form.css, and let's open both of these files up in a text editor. Now in our text editor, let's first explore the HTML file. Here I have the standard HTML5 document. Inside of the header area here is our link to our form.css file. Then we have our main form element in the body area. We have an id of signup. Then we have a whole series of different form elements. We have our input, with a type of checkbox.
And then we have our format options, the frequency, and a place for comments. And then we have our email field and finally, our submit button. Now we will be making some minor changes to the HTML file, so we'll leave this open. But we're going to do the majority of our work over in the form.css file. So in this file I've imported a Google font, and I just have a few properties set on the body element. Now before we make any changes, let's preview this in our browser. My particular text editor here has a built-in preview, so I'm going to turn on the preview here and just point this at the HTML file.
So this is what our form looks like without any CSS modifying it. So what we're going to do first in our CSS file is target and style the main form element, and our form element, if you remember back to the HTML, has an id called signup. So in our CSS file after the body element, we'll type form#. Then we'll type in the word signup, put in our beginning and ending brackets. I'll split these open on a separate line. The first thing we're going to do is set a max-width.
We're going to put a background graphic in here that has a maximum width of about 900 pixels, with the clouds in the background, but I don't want the form to open up wider than that. So we'll set this to a max-width of 800px, then a space. Next we'll set a padding property. We'll set padding to 15px on all four sides. Then we'll set a background property. So we'll type background: , we're going to use short-hand style here, so the first property is going to be the color. So do a pound sign, we'll do 58 for red, 90 for green, and d0 for blue.
Then a space, we'll specify the background graphic, so we'll type in url, put in our parentheses. We'll type images/background.jpg, then outside of the parentheses, we'll set a repeat of no-repeat. Next we'll set the x position to 0px, then a space, and then 0px for the y position. And now in the preview area, you can see the clouds in the background. I do want the clouds to be a little bit higher, because the graphic is a little darker at the top, as well.
So let's come in here to the y position and let's set that to -70px, just to move the clouds up. So with that in place, next we'll style the text inside of the form. So let's come up here and copy form#signup. Let's paste that on the next line. Then a space will target all of the h2 tags. Put in our beginning and ending brackets. We'll set a margin of 0px. That'll apply to all four sides. Next we'll set a color property, #fff, that'll give us white.
And then next we'll set a font-size of 2em, which will be twice the base font-size. So the base font is set to 16, so this will render at approximately 32px. Next line, let's paste in our form#signup . Let's target our h3. So we'll type margin. We're going to set -5px for the top, 0px on the right, 12px on the bottom, and 0px on the left. Space. We'll set the color of this to white as well, so #fff .
And then we'll set the font-size of our h3 to 1.2em. So that will be 20 percent larger than the base font. Next line, we're going to target the h4 tags. Here we're going to set a margin of 15px on the top, 0px on the right, just 3px on the bottom, and 0px on the left. Again we're going to set the color to white. And then we'll set the font-size to 1em.
And now with the headings styled, we're going to target the paragraph elements and the label. So again we'll paste in form#signup. p, then a , . We'll paste in the form#signup again. Then label. So now we're going to target both of these items with these rules. So we'll come in here, and we're going to set the margin to 0px on the top, 0px on the right, 6px on the bottom, and 0 on the left. Then we're going to cite color, and here we're going to use a semi-transparent white.
So we'll type rgba();. Inside, we're going to set 255 for red, 255 for green, 255 for blue, then a comma, and then we'll type .8, for 80 percent opaque. Or, 20 percent transparent. I'm going to widen my preview here a little bit, so that my h3 subhead fits on one line. And now with these in place, next we'll style the fieldset and the legend.