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> 



Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net