Welcome to Part 2 of the tutorial. Here we’ll create the CSS required to style the HTML form we created in Part 1.

Note that this tutorial isn’t intended to be an exhaustive introduction to CSS. Hopefully you have a basic understanding of CSS and these notes will be enough to guide you (roughly) through the styling of the HTML form created in Part 1.

If you’ve completed Part 1 of this two-part tutorial, you’ll have a HTML file, contact-form.html, as well as an external CSS file saved as form-styles.css. This CSS file currently does not contain any CSS rules. We’re going to write them now.

Just to quickly recap, our contact-form.html file already has a link to the
form-styles.css stylesheet:

<link href="css/form-styles.css" rel="stylesheet" media="screen">

… so, any CSS rules we add to our external stylesheet, once saved, will be automatically applied to our HTML form.

1. Open form-styles.css in your favourite text editor.

Let’s declare a font family for the page as a whole. If we apply a font family declaration to the <body> tag, this declaration will be inherited by all descendants (or children) of the <body> tag which contain textual content.

Add the following CSS rule to your form-styles.css document:

body{ 
   font-family:Arial, Helvetica, sans-serif; 
}

 

2. If you check your contact-form.html document, you’ll recall we wrapped all our content within a <div> tag. This <div> tag has an id attribute of form-container:

<div id="form-container">

Create the following CSS rule in your form-styles.css document, below the body rule you just created:

#form-container { 
   max-width:600px; 
   width:95%; 
   margin:50px auto 100px; /* top, right/left, bottom */ 
}

 

Note:

max-width sets a maximum constraint on the width of the <div> tag. It can be narrower than the specified value (600px) but not wider.

The max-width property overrides the width property. So, if the browser window is wide enough, the

tag will display at 600px wide. When the browser window is 599px or less, the

tag will display at a width of 95% of the available width. As a result, our

tag will behave responsively, adapting its width to the width of the browser window.

Finally, notice that the margin property sets the left and right margins to auto. Along with the width declaration, this will cause the

tag to be centred in the browser window.

In CSS, a comment starts with /* and ends with */

Comments can span multiple lines, but may not be nested:

/* This is a single-line comment */

/* This is a comment that
spans multiple lines */

3. If you like, open your contact-form.html document in a browser and view the changes to the layout as you progress through this tutorial, adding and saving CSS rules to the external stylesheet.

4. Now let’s add some general rules for the <header> tag, <h4> tag, the <ul > tag and <li> tags.

Add the following rules below the #form-container rule you just created:

header{ 
   margin-left:20px; 
} 

h4{ 
   font-weight:normal; color:#e86263; 
} 

ul{ 
   list-style-type: none; /* remove the list-item marker */ 
   padding:0; 
   margin:0; 
} 

li { 
   margin: 0 0 20px; /* top, right/left, bottom */ 
}

5. Next, we’ll style the <label> tags.

We want all <label> tags to have the same color text. Add the following CSS rule to your form-styles.css document:

label{ 
   color:#666; 
}

 

6. <label> tags are inline tags. This basically means they will occupy the same line as other elements, take up only as much width as needed and will not force new lines. Thus, without any styling, our <label> tags will sit beside their accompanying form elements.

However, we want some of our <label> tags to sit above their accompanying form elements, on their own line. To do this, we’ll use the CSS display property and set its value to block. Block elements occupy their own lines and force a new line before and after.

Since we only want to apply this rule to some of the <label> tags in our HTML document, we’ll use a class selector so that the rule can be applied several times within the one document:

.general { 
   display: block; 
   padding: 0 0 5px; /* top, right/left, bottom */ 
}

7. OK, let’s style the <fieldset> tags:

fieldset{ 
   border:1px solid #ccc; 
   border-radius: 5px; 
   margin:20px; 
   padding-top:20px; 
}

 

8. Now add a rule for paragraph ( <p> ) tags contained within <fieldset> tags:

fieldset p{ /* descendant selector */ 
   margin:0; 
   padding:0;
}

 

The descendant selector (represented by a space) matches all elements that are descendants of a specified element.

The following example selects all <p> elements that are contained inside (are descendants of) <div> elements:


div p {
background-color: #00f;
}

9. Next, style the <legend> tags:

legend{ 
   color: #ccc; 
   padding: 5px; 
   font-size: 18px; 
}

10. We now need to style <input> tags.

Remember, <input> tags are used for the various textfields, radio buttons and checkboxes. At this point, we only want to style textfields. Using input as a selector would apply styles to all <input> tags, including radio buttons and checkboxes.

We can specifically target texfields by using CSS attribute selectors which allow us to select elements on the basis of their attributes. All of our form’s textfields have a type attribute so we’ll use that for our selectors.

Add the following CSS to your form-styles.css document:

input[type="text"], input[type="email"], input[type="tel"], input[type="url"]{ 
   width:96%; 
   height:22px; 
   background:#FFF; 
   border:1px solid #CCC; 
   padding:10px; 
   margin: 5px 0px 5px 0px; 
}

 

Notice that here we have grouped our selectors (separated by commas) so that we can apply the same styles to a series of elements with different type attributes.

11. Let’s add an image of a red asterisk as a background to those fields in the form that are required.

In addition to textfields and a <textarea> tag with a required attribute, we also need to add an asterisk to the <fieldset> with an id of pool-type and the <fieldset> with an id of list-container :

input:required, #type, #list-container{ 
   background: #fff url(../images/asterisk.png) no-repeat 98% center; 
}

 

Note that we use the :required CSS pseudo-class in a selector to target textfields that contain the required attribute.

More information here.

12. Also add an asterisk background image to the <fieldset id="message-container"> which contains the <textarea> tag:

#message-container{ 
   background: #fff url(../images/asterisk.png) no-repeat 98% center; 
}

 

13. The pool-type and problems <fieldset> tags contain <div> tags. Style these <div> tags with the following CSS rule:

div{ 
   margin-bottom:20px; 
}

 

14. Next. let’s add some styles for the radio buttons and the checkboxes:

input[type="radio"] { 
   margin-top: -2px; 
   vertical-align: middle; 
   width:20px; 
   height:20px; 
} 

input[type="checkbox"] { 
   margin-top: -2px; 
   vertical-align: middle; 
   width:20px; 
   height:20px; 
}

15. Now some styles for the <textarea> tag and the <p> tag with the class attribute of textarea-label:

.textarea-label{ 
   padding: 0 0 5px; 
   margin-bottom:15px; 
   color:#666; 
} 

textarea{ 
   width:95%; 
   height:200px; 
   border:1px solid #CCC; 
}

 

16. For the How did you hear about us? section our HTML document uses a <select> tag to create a drop-down list (sometimes called a pull-down menu etc).

Add the following CSS rule in your form-styles.css document:

select{ 
   padding:10px; 
   margin-top:10px; 
}

 

17. The last <ul> tag in the HTML form contains a <li> tag with an id attribute of btn. This <li> tag holds the form’s Submit button.

Add the following style rule:

li#btn{ 
   margin-left:20px; 
}

 

18. Now, add styles for the Submit button (the <button> tag):

button { 
   color: #666; 
   background-color: #eee; 
   text-transform: uppercase; 
   letter-spacing: 2px; 
   font-size: 12px; 
   padding: 15px 35px; 
   border-radius: 5px; 
   border: 1px solid rgba(0,0,0,0.3); 
}

 

Note the use of rgba notation to set border colour.

There are numerous sites offering infomation on rgba notation (and other methods of specifying colours in CSS). The Six Revisions site is a reasonable starting point.

19. As a visual cue to the user, we want to apply an effect to the button when the mouse pointer passes over it.

The :hover pseudo-class is used to style an element when the user’s mouse pointer hovers above it. It doesn’t have to be restricted to links, although that is the most common use case.

Add the following style rule:

button:hover { 
   background-color: #e3e3e3; 
   border-color: rgba(0,0,0,0.5); 
}

 

Again, there is lots of info. online regarding CSS pseudo-classes. W3Schools offers a simple introduction.

20. Save your form-styles.css file.

Now open contact-form.html in a browser and view your completed, fully styled form.

You can also view the completed form here.

Well done! You have created and styled a HTML5 form.