Website Workshop: HTML


 

Color
Alignment
Link Color and Underlining
Whitespace is your friend!
Download time is important
Make the structure of your site clear!
Writing Text for the Web

CSS: Cascading Style Sheets

1) Changes to the seeUthere Style Sheet
The seeUthere style sheet is an external document that specifies font sizes, families, colors, and boldness, among other features. It is set up by assigning particular sets of text characteristics to "classes", and a class can then be called from within any page and applied to text to give it a red color, for example, or a small size.

If you look at the V5 seeUthere site between Netscape and IE, you will notice that the text in general appears much larger in IE and much smaller in Netscape. What looks good in IE as a font size is often too small to read in Netscape. What can you do?

This problem is easily solved by changing the font-size specifications on the style sheet from points to pixels. For some reason points are very commonly used, but are interpreted differently from browser to browser. A pixel, on the other hand, is a pixel, no matter what browser you use. When pixels are used, as they are in the new V6 style sheet, there are no longer such dramatic differences in text size among browsers.

Note: You will have to readjust your new pixel values so that they approximate the size you want. You can't simply change all the pts to pxs! Usually pixel values need to be bigger than points. See below...

Incorrect: .small { font-size: 9pt; font-family: Arial, Helvetica, sans-serif;}
Correct: .small { font-size: 11px; font-family: Arial, Helvetica, sans-serif;}


2) How do you apply a Class to Text?
<font> tags should not be used to apply style sheet classes to text. In fact, they should not be used at all, since they are deprecated in the current HTML 4.0 standard.

The class should either be applied to the enclosing tag, or else the <span> tag should be used. The <span> tag should be used in any circumstance where the developer wants to apply the style sheet class to a section of text without applying it to everything within the enclosing tag. Otherwise, use the class attribute within the enclosing tag, either <td> or <p>.

This has been corrected in most places in V6, but there are still many pages that retain the old incorrect way of applying a class. Correct these when you see them!

Here's an example:

Incorrect: <td>
<a href="/eps/help/redirect.asp"><font class="topbaroff">Help</font></a>
</td>
 
Correct: Apply the class to the entire table cell
<td class="topbaroff">
<a href="/eps/help/redirect.asp">Help</a>
</td>
 
OR
 
Apply the class to individual pieces of text
<td>
<a href="/eps/help/redirect.asp"><span class="topbaroff">Help</span></a>
</td>


 
 
Next Topic: HTML Coding