How to Style a Form Label

Web page form labels are an essential element of the form. They identify for the user what should be inputted or checked in order to complete the form. You can make your form more attractive by using CSS to style the form elements, including the label element. Here are steps to styling a form label.

Things You'll Need

• A text editor
• A web page

Instructions

1. 

   Here is a simple, unstyled form with only two input boxes.

2. 

   Here is the HTML for this simple form.

3. There are many CSS rules that can be applied to the label element. Let's look at a few.

4. 

   This CSS rule changes the text color:
   label {
   color: #009;
   }

5. 

   These rules will make the label a block level element, assign a width, and float the element to the left. The effect of this is to align the input boxes neatly on the right.
   label {
   color: #009;
   width: 100px;
   display: block;
   float: left;
   }

6. 

   By adding a rule for text align, we can make the labels appear in closer proximity to the input box, but aligned on the right.
   label {
   color: #009;
   width: 100px;
   display: block;
   float: left;
   text align: right;
   }

7. 

   The label is too close to the input box, so we can add a rule to give padding to the right side of the label.
   label {
   color: #009;
   width: 100px;
   display: block;
   float: left;
   text align: right;
   padding-right: 3px;
   }

8. 

   Other rules such as adding a background color could be added.
   label {
   color: #009;
   width: 100px;
   display: block;
   float: left;
   text align: right;
   padding-right: 3px;
   background: #FFC;
   }

9. Rules for borders, line spacing, font size and other CSS properties could be added as well, depending on the appearance of the page and the items in the form. As you can see, any property that can be used in CSS can be used to style the label element.