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.
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; |
Figure 69.1. Apply CSS text attributes to alter the type in text widgets.
[View full size image]
TIPSince 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" class="textfields">Type text here. You'll be glad
you did.</textarea>
</td>
<td>
<input type="text" class="textfields" size="50" value="No, type text here instead.">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" class="buttons"></td>
</tr>
</table>
</form>
</body>