Bye, Bye Font Tags!
The <font> tag. Without it, the web would be nothing but boring Times New Roman text. But isn't it kind of limiting? You can only set seven different sizes. What if I were to tell you that there is a way to make the text in your web page any size you want, period? That you could size it in points, just like your word processing software? Believe it. You can do it, and much more, and I'm gonna show you how. You may never use the <font> tag again.
What we use to perform this nifty feat is a tool called cascading stylesheets, or CSS. It's a really simple code that can be stuck right in your HTML document, or can be put in a separate .css file. What I'll show you today will involve using CSS directly in your HTML document. Let me show you an example:
<html>
<head>
<title>Fun with CSS</title>
<style>
body { background: #000; font-family: arial; font-size: 18pt; color: #7F00FF }
a { color: #FF00FF }
a:hover { color: #FF7FFF; text-decoration: none }
</style>
</head>
<body>
This here is the body.
<a href="http://www.suite101.com">This here is a link.</a>
</body>
</html>
For starters, you see that the CSS is put in the <head> part of the document, between the <style> & </style> tags. The way it works is that you define what you want the text to look like when it is contained within certain HTML tags. In the example above, everything between the <body> & </body> tags will be purple, in Arial font, and 18 points (the background part makes the background of the web page black). Everthing between any <a> & </a> tags will be a brighter purple (it's already in 18 point Arial font). But, for the grand finale, I included the "a:hover" definition. This tells the browser to change the appearance of the font in an <a> tag when the mouse is moved over it, or "hovering" over the link. In this case, the link will become an even brighter purple, and the underline will disappear when the mouse hovers over it. That's something the <font> tag couldn't dream of doing.
You can define CSS rules for any type of HTML tag you want. If you want all the text within any table in your page to be red and in Helvetica font, just define rules for the <td> tag (you can add definitions for the <th> & <caption> tags as well, if you use them). In addition, you can define different rules for "a:link", "a:active", "a:visited", & "a:hover". (This corresponds to the "link", "alink", and "vlink" parts of the <body> tag.)
Latest Articles