Bye, Bye Font Tags!© Tony Sprinkle
Jan 19, 2000
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>
See it in action.
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.)
Go To Page:
1
2
3
The copyright of the article Bye, Bye Font Tags! in Web Graphic Design is owned by . Permission to republish Bye, Bye Font Tags! in print or online must be granted by the author in writing.
I don't see why embedding CSS in your articles should be a problem. Or, changing the colour of the text, for that matter, with CSS. If Suite101.com does decide to change the colour scheme, we editor ...
|
This is a perfect "next step" method of moving into CSS (of which I know next to nothing). Great job of explaining and showing ...As to using it here at S101, I fear it would make no difference ho ...
|
What I want to know is this: Is this method allowed in our Suite 101 articles. I understand that we are not permitted to use font tags at all, because some time in the future the Suite preprogrammin ...
|
For a complete listing of article comments, questions, and other discussions related to
Tony Sprinkle's
Web Graphic Design topic, please visit the Discussions page.
|
