In case you haven't heard, the HTML FONT tags have been depreciated (See Section 15.2.2). That means the FONT tags are no longer part of the HTML specification. And although browsers still support them and probably will for a long time, all of us who create our own web pages need to keep up with the changes and learn a new way to define the font face, font size, and font color of our web page content.
So what do you use instead of the HTML FONT tags?
You can use CSS styles.
Now when it comes to writing CSS styles there are 3 types:
- External style sheet (.css files linked to .html files) - make it easy to make formatting changes across your web site
- Internal style sheet (inside the <head> tag) - make it easy to make formatting changes on a single web page
- Inline style (inside an HTML element) - has priority over the above 2 and is used to make something on your page different from the defined styles
Now I'm not a expert at writing CSS styles. And because we don't have to be if we're using a WYSIWYG HTML editor I'm only going to talk about inline styles since those are the styles we may have to write ourselves.
Inline CSS Styles Equivalent To
HTML Font Tags
Font Size
HTML - <font size="4">Font Size</font>
CSS - <span style="font-size : 14pt;">Font Size</span>
Font Color
HTML - <font color="#9933ff">Font Color</font>
CSS - <span style="color : #9933ff;">Font Color</span>
Font Type
HTML - <font face="Arial">Font Type</font>
CSS - <span style="font-family : arial;">Font Type</span>
Font Underline
HTML - <u><font size="2">Font Underline</font></u>
CSS - <span style="text-decoration: underline;">Font Underline</span>
***Note***
The </span> does not turn off text-decoration as it does for other CSS inline styles. To turn off the text-decoration in an inline style you'll need to include:
<span style="text-decoration: none">Your text</span>
***End Note***
Font Strickthrough
HTML - <strike><font size="2">Font Strickthrough</font></strike>
CSS - <span style="text-decoration: line-through;">Font Strickthrough</span>
See Note Above.
Bold
HTML - <b><font size="4">Bold</font></b>
CSS - <span style="font-weight: bold;">Bold</span>
Highlight
HTML - uses the CSS inline style
CSS - <span style="background-color: #ffff00;">highlight in yellow</span>
Multiple Characteristics
HTML - <u><b><font size="4" face="Garamond" color="#9933FF">Multiple Characteristics</font></b></u>
CSS - <span style="text-decoration: underline; font-weight: bold; ">Multiple Characteristics</span>
See Note Above.
As you can see, writing CSS inline styles is not more difficult than writing HTML FONT tags. It's just different. And since most WYSIWYG HTML editors will write external and internal styles for you, you don't have to learn a lot of CSS. However, just like HTML, you should learn a little because if you want to use inline styles to do something different you'll do have to write them yourself.
To Your Success,
Susan
P.S. BTW, I've checked FrontPage 2002 (my HTML editor) and Nvu (a free HTML editor) and found they both will create external and internal CSS styles. FrontPage does it through the Format menu and Nvu does it through the Tools menu. To find out if your WYSIWYG editor creates CSS styles, simply go to the help menu and search for terms like; style, css style, inline style, etc.
Let me know if you found this tip useful by leaving a comment.
Tags: html font tags, incline css styles, html font tags depreciated, how to replace html font tags, css styles, how to create css styles
|