More CSS Styling
October 22nd, 2001


CSS is a great way to add "style" to the graphical output of HTML pages. 
Look at the two code samples below, a form textarea and an input button. See 
how they have been spiced up with CSS Styles! 

<textarea style="background-color:000000; color:ffffff; 
font-family:verdana,arial,helvetica; font-size:10pt;">White 
Text!</textarea><br><br> 
<input type="submit" value="This is neat!" style="font-family:verdana; 
color:ffffff; font-size:12pt; background:000088;"> 

Notice the addition of a style attribute to these 2 examples? Why not grab 
the code and take a look at them in your favorite editor? 

Of course, not all of these attributes will be processed by all browsers, so 
it is always a good idea to define attributes in raw HTML wherever possible 
also. For example, the SPAN tag is a handy tool you can use to define 
attributes of fonts, table cells etc. But these attributes may not dispay 
properly in older browsers. To get the best display, we hard code HTML 
values outside of the SPAN tag. Here is an example:<br><br> 

<font color="0000ff"><span style="color:ff0000;">This text is 
red.</span></font> 

Now, why would you want to complicate things by using both CSS and HTML? 
Because there are many more attributes available in CSS. For instance, we 
could set an abnormal font size, mouse-over effect or other attributes to 
this font, which will not display by old browsers. The HTML coding outside 
of our span ensures at least a likeness of our span charactaristics for such 
browsers. 


Here is an example of a CSS Style for the Table Cell tag: 

<table> 
<tr> 
<td style="background:000000; font-family:arial; 
text-decoration:underline;"><FONT FACE="Verdana, Arial, Helvetica" SIZE="1" 
COLOR="#ffffff"><b>Notice the underline? This is not defined in a font or 
underline tag, but the table cell itself!!</font></td> 
</tr> 
</table> 

As always, feel free to copy/paste this code in your editor and see how it 
works, and modify it to suit your needs!