When trying to control the font face in a table you needed to declare a font for each table cell, for the formatting to appear in Netscape. Adding all these font tags was an exhausting process which adds a great deal of code to your page and made maintenance a nightmare.
Well the font properties streamline the process, allowing your pages to contain less code, and making it easy to change the behavior of the code.
font properties:
These notes only cover the first 4 properties which are fully supported by both browsers. I will be using a file named "huma.html" and an external style sheet called "mystyles.css". Pretend that there are actually 100 fish pages instead of only one.
In the "mystyles.css" file I enter the BODY selector and add the declaration which identifies the property font-family. I assign a value of Arial, Helvetica, and sans-serif.
From each of my products pages (let's pretend we have 100) I take out these tags
<font face="Arial, Helvetica, sans-serif"> (which is at the top of the page below the <body>) and
</font> (which is at the bottom of the page above the </body>)
At the bottom of the page I see a table which contains my text navigation and it is full of font tags.
<table cellpadding=4 bgcolor="ccffcc"><tr>
<td><font
face=Arial, Helvetica, sans-serif>
<A HREF="index.html">Home</A> </font></td>
<td><font face=Arial, Helvetica, sans-serif><A
HREF="products.html">Products</A> </font></td>
<td><font face=Arial, Helvetica, sans-serif><A
HREF="shopping-cart.html">Shopping Cart</A>
</font></td>
<td><font face=Arial, Helvetica, sans-serif><A
HREF="refunds.html">Refund Policy</A>
</font></td>
<td><font face=Arial, Helvetica, sans-serif><A
HREF="faq.html">F.A.Q.</A> </font></td>
<td><font face=Arial, Helvetica, sans-serif><A
HREF="contact.html">Contact</A> </font></td>
<td><font face=Arial, Helvetica, sans-serif><A
HREF="about-us.html">About Us</A> </font></td>
</tr> <tr> <td></td>
<td colspan=2><font face=Arial, Helvetica,
sans-serif><A HREF="filefish.html"> file
fish</A> | <A HREF="angel.html">angel</A> | <A
HREF="angel.html">lion </A></font></td>
</tr></table>
When i view the file in Internet Explorer, the body style controls the text with in the navigation table at the bottom of the screen. When I view the file in Netscape 4.7 the font reverts to "Times Roman".
To solve the problem I access the "mystyles.css" file, add the TD selector, and declare a style.
I can remove 8 pairs of font tags from this table, that's 16 tags per page! If my Web site contains 100 pages, I have replaced 1600 tags with one line of CSS code.
CSS is looking good!! My pages will be easier to create and maintain, and file size will be smaller allowing them to load more quickly.
There are numerous measurement systems used to specify font size. In this demonstration I will focus on points, pixels, and percentages.
I add the font-size property to the body style and enter a value of 12 point. Boy this feels good. I have been dealing with point size for years as a desktop publisher. This CSS code is feeling downright familiar.
I substitute 11 pt as the value of font-size, save the file and then reload. I notice my font has become smaller on each page.
When I enter 14pt the font becomes larger on each page.
Up until now I have been limited to font size 2, 3, or 4. If I wanted a size that was in between 2 and 3, I was just out of luck. Now I can call out any point size available to me in a traditional word processor. As long as the computer has that font installed it can display that size on the Web page.
That's the good news, the bad news is that fonts often appear larger on Windows machines than they do on a Mac. One way to avoid this cross platform distortion is to control font size with pixels instead of points.
If I change the value of the font size from 11pt to 11px and view the page on both the Mac and Windows machines I see that the font size is exactly the same.
Well... before you open up all your code and start creating CSS files which specify pixels, you need to understand that although the pixels is a measurement unit which works well on the computer monitors it can produce inconsistent results if visitors try and print your page.
Some printers interpret the 11 pixel value as 11 dots per inch, which on a 300 dpi printer produces teeny weenie text which is unreadable. In some cases text displayed in pixels will not print at all. Drats There is no "perfect" solution. Use pixels on screens which will not be printed, or test the site on a wide variety of printers. Another option is to provide a copy of the web page which is set up for "print only".
The entire phrase is surrounded by h4 tags, and the only tag which separates the 2 portions of the phrase is the bold tag.
Remember how I said that cascading style sheets were powerful AND dangerous? This is a perfect example, I feel like I have painted myself into a corner. I want the phrase within the h4 tag to do 2 things. I could create 2 classes of <H4>, but then I would have to go into each of the 100 products pages and change the tags.
Here's the solution. I can create a contextual selector which allows me to specify that whenever the <B> tag is found within an <H4> tag then the font weight will be bold, the style will be normal, and font size larger by 150%. This will not affect the bold tag when it appears in any other location on the web page.
I enter the h4 and b selectors, declare the property "font-weight", a value of "bold", the "font-style" of "normal" which turns off the italic text, and finally "font-size" and a value of "150%" which increases the size of the text based on the original h4 size.
Special Note - in the Macintosh version of IE % the value of "none" was ignored.
Take a look at the Huma Huma products page which is now linked to the "mystyles.css" file and has font properties assigned to it. Compare it to the file BEFORE I began using CSS code and note the # of font tags I was able to eliminate.
Huma page AFTER font properties Huma BEFORE font properties
Here is what the "mystyles.css" file looks like now that the font properties have been added.
| home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates |