Changing the Text Style

The various text attributes of CSS allow you to alter the appearance of the type in any widget that uses text, including text fields, text areas, buttons, menus, and lists. Table 69.1 provides a summary of common CSS text attributes if you need a refresher.

Table 69.1. Common CSS Attributes for the Text in Text Widgets
ATTRIBUTE	CONTROLS	EXAMPLE
font-family	The typeface of the text in the widget	font-family: Arial, Helvetica, sans-serif;
font-style	The style of the text in the widget	font-style: italic;
font-weight	The weight of the text in the widget	font-weight: bold;
font-size	The size of the text in the widget	font-size: 12px;
font-variant	The typeface variation of the text in the widget	font-variant: small-caps;
text-transform	The way the browser alters the casing of the text inside the widget	text-transform: lowercase;
text-decoration	The underline, overline, or line-through of the text inside the widget	text-decoration: underline;

Use combinations of the attributes in Table 69.1 to work up sophisticated text widgets, as in Figure 69.1. These examples are over the top, but they show you what you can do if you have little aesthetic restraint.

Figure 69.1. Apply CSS text attributes to alter the type in text widgets.

TIP

Since different widgets often use the same tag, you're better off creating specific classes for each type of widget rather than creating one blanket style rule for the HTML widget tags.

Listing 69.1. View Source for Figure 69.1.

[View full width]

 <head>   <style type="text/css">     .textfields {       font-family: "Times New Roman", Times, serif;       font-style: italic;       font-weight: bold;       font-size: 18px;       font-variant: small-caps;       text-decoration: underline;     }     .buttons {       font-family: "Times New Roman", Times, serif;       font-size: 12px;       font-weight: bold;       text-transform: uppercase;     }   </style> </head> <body>   <form>     <table cellpadding="10">       <tr valign="top">         <td>           <textarea cols="50" rows="5" >Type text here. You'll be glad  you did.</textarea>         </td>         <td>           <input type="text"  size="50" value="No, type text here instead.">         </td>       </tr>       <tr>         <td colspan="2" align="center">           <input type="submit" value="Submit" ></td>       </tr>     </table>   </form> </body>

Table 69.1. Common CSS Attributes for the Text in Text Widgets

Figure 69.1. Apply CSS text attributes to alter the type in text widgets.

TIP

Listing 69.1. View Source for Figure 69.1.