If you look at the HTML source of a form you will see that the code for a simple one line text box looks something like this: 

<input type="text" name="T1" size="20">

As you can see the selector we will need is again called 'input', and we have already defined a class style for input. If you add the class 'red' to the line above:

<input class="red" type="text" name="T1" size="20">

you will get an input box with a red background. A bit of a startling color for users to be asked to write on! So we will define a second style for 'input', this time choosing a contrasting pink background. Once again, in the interests of clarity, we will call this class a meaningful name, 'pink'.

input.pink {background-color: #ffcccc;}

You can add additional styles to that, we will just add font size but you could also define the font and so on if you wished. 

input.pink {background-color: #ffcccc; font-size: 10px;}

Add this to the style sheet so that in full it now reads:

<style tyle=text/css>
input.red {background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;}
input.pink {background-color: #ffcccc; font-size: 10px;}
</style>

Now in the HTML add the class to the text box:

<input type="text" name="T1" size="20">

becomes:

<input class="pink" type="text" name="T1" size="20">

And the result is:

Try adding some text to that field. 

You can of course add the style to both text boxes, which would be the best thing to do in most cases. Or you might for example use the pink color to highlight required fields in a form.

In this case the styled text box is now smaller than the unstyled one because we defined a font size for it, in the interests of a neat appearance we will just add a simple text size to all the 'input' tags.

input {font-size: 10px;}

Note that there is no need to amend any of the HTML tags in this case, because no class has been defined the sizing will affect all <input> tags.

And the result is:

Styling Text Areas

The opening tag in HTML code for text boxes looks like this:

<textarea rows="4" name="S1" cols="20">

So this time the selector we use to add style to will be 'textarea'. In the interest of funkiness (!) lets make the text area a nice pale violet. Add this to your style sheet:

textarea.violet {background-color: #ccccff;}

So that is now reads:

<style tyle=text/css>
input.red {background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;}
input.pink {background-color: #ffcccc;}
input {font-size: 10px;}
textarea.violet {background-color: #ccccff;}
</style>