Jump to Main Content

Styling a form with CSS

Styling submit and reset buttons

Styling our buttons requires a little more effort than our two previous form fields. You can’t style the input tag because as you might remember this affects radio buttons and check boxes. You can’t use a descendent selector because there’s not one. You might be asking how you style these buttons. Remember from earlier in the article we created a custom class so that only our first two text fields would have a border, leaving our radio buttons and checkboxes preserved. We style our buttons the same way by adding the following rule:

form#simple input.buttons{
background-color:#14314f;
color:#c90;
font-family:Verdana, Helvetica, sans-serif;
font-size:.8em;
}

We create a custom class named buttons, which will only be applied to input tags in a form named simple to which the class is applied. The property-values are listed below:

  • Background-color
    • Sets a background color of dark blue
  • Color
    • Sets a text color to a dark gold
  • Font-family
    • Sets a font family of Verdana
  • Font-size
    • Sets a font size of .8em, which is 80% of 100%, a proportional unit of measurement

When the browser reads the style sheet and the web page it does this: “Look for any input tags which are in a form named simple that have a class of buttons and apply the following styles” Next, in our HTML file, add the class to our buttons:

<input name="submit" type="submit" class="buttons" value="submit">
<input type="reset" name="reset" value="reset" class="buttons">

Save your file and preview the results.

Styling buttons

Styling the table

Let’s make our table stand out just a bit more by adding a few additional rules to our existing style sheet. First, add the following rule:

body{
    font-family:Verdana,Arial,Helvetica, sans-serif;
    font-size:101%;
    }

We set a global font family of Verdana and font size of 101%. Next, add the following to your main table rule:

table#simple{
    width:500px;
    margin:0  auto;
    border:0;
    border-collapse:collapse;
    background-color:#CCCCCC;
    font-size:.8em;
    }

We added the following property-values:

  • Background-color
    • Sets a background of a light gray
  • Font-size
    • Sets a font size to .8em, a proportional unit of measurement

Next, add the following to your td rule:

table#simple td{
      vertical-align:top;
	  border:1px solid #666666;
      padding:6px;
      }

We added the following property-values:

  • Border
    • Sets a 1 pixel, solid border, dark gray color
  • Padding
    • Sets padding on all table cells to 6 pixels, which provides a bit of space between cells and our table border

You will notice our button text is a bit small. The reason is our font size is set at .8em. While this is normally fine, in this case, it’s actually .8em of .8em (80% of 80%). The reason is because the table rule set higher in the style sheet is set to the same size, an example of cascading and inheritance; either remove the font size set in the button class or increase it to .9em, which would be .9em of .8em (90% of 80%). You can also remove the break tag which is before the submit button. Save your file and preview the results.

See finished page

Summary

In this article you learned how to style a web form inside a table. You also learned:

  • Set a width on a table using an ID
  • Style only two input tags using a custom class
  • Style a select tag
  • Style a text area tag with width and height
  • Styling a submit and reset buttons with a custom class
  • Styling the table to make the entire form aesthetically pleasing

If you have questions, contact me.

top of page