Join the List
Bravenet Home
|
Webmaster Tips and Tricks
Newsletter Archives
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!
|
|
Build your very first live Database Driven Website using PHP & MySQL. Instantly apply working code examples from the book to your Website. Get it Now! 295 pages.
|
|
Write faster loading, dramatically smaller pages. ‘Now You Too Can Easily Create Modern 'Table-free' Websites Using CSS from scratch’. Get it Now! 480 pages.
|
|
 |
