HWG-News Tips Late December 1999

Cascading Style Sheets Tips

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the Late December 1999 newsletter, for the category 'CSS'.

This issue's winner!

HWG-NEWS TIP: If you use CSS, I strongly recommend that you browse your site in both IE and Netscape before publishing it! I had removed most HTML tags only to find that I had to put them back in due to lack of acceptance of certain CSS specifications. An excellent resource to determine what CSS is accepted in what browser is http://webreview.com/wr/pub/guides/style/mastergrid.html

Other Submitted Tips

With Cascading Style Sheets, you can obtain exact positioning of document objects without the extra lines of code or extended load times of tables. Simply use either the "relative" or "absolute" value of the "position" property of Cascading Style Sheets.

There are very few fonts which display reliably on all systems and browsers. Even if you use a common Windows font, Lucida for example, MAC users often won't have it. If you choose a "safe" font as your second choice you will have at least some control over the way your page is viewed. The safe fonts are: Arial, Helvetica, Courier, Symbol and Times.

CSS: When applying pseudo-styles to the <a> tag such as a.hover {} be careful using styles that change the size (+1), shape (italic) or density (bold) of the text. In 'text-buttons' using a table to arrange rows and columns of links, changing these could break or alter the table, causing the whole page to shift wildly as the user mouses over the links. Test in the browser using several default font-sizes before implementing.

Make your links come alive with different hexadecimal colors for each function, thus:

<style>
a:link {text-decoration: none; color: #FF9933}
a:visited {text-decoration: none; color: #FFCCFF}
a:active {text-decoration: none; color: #FF0000}
a:hover {text-decoration: none; color: #FFFF99}
</style>

And use the "none" command to get rid of the underlines! (in the above example).

If "h3 {font: 110% Arial bold; color: #3366cc}" isn't working properly, try --

h3 {font: 110% Arial bold}
h3 {color: #3366cc}

-- instead. It shouldn't make a difference, but it does!

Don't use underscores when naming classes: they will not be recognized.
-------------------------------
ALWAYS test in both Internet Explorer and Netscape; each browser has a subset of proprietary classes, and interpret CSS more uniquely than HTML.
-------------------------------
Many GUI CSS editors reformat the CSS page and strip out unrecognized (proprietary) classes. Use an editor you trust or a simple text editor.

Want to make implementing Cascading Style sheets easier without re-inventing the wheel for each site? Our development team has created a basic template with all the most commonly needed elements. We then can easily customize the template to the site for fonts, colors, etc. without re-writing the code. See an example at: www.internetdesign.com/resources/css/template.html

The following CSS script will change the color of links of the entire web page when placed in the HEAD section. Please note that Frontpage will erase the script so add it in notepad before placing on our server.

<STYLE type=text/css>
<!-- A:link {
COLOR: #0000ff
}
A:active {
COLOR: #C100CB
}
A:visited {
COLOR: #00A350
}
A:hover {
COLOR: #ff6600
}
-->
</STYLE>

Scrollbars can be added to a block element through the following CSS code, inserted inside the element's tag: style="width:200px;height:200px;overflow:scroll" For example: <p style="width:200px;height:200px;overflow:scroll"> The first two attributes (width and height) specifies the dimensions in which the block element should be confined to, while the last attribute (overflow) applies the scrollbars to this confinement area.

Place at least a couple of paragraphs of text above any pictures so that your visitors can read the text while the pictures are loading. This is especially important for webmasters who anticipate that site visitors may have slower connections or older computers.

HWG-NEWS TIP: "Want to greatly improve your text appearance online? Try using the justify option with the Paragraph tag. e.g. <P align="justify">your text here</P>

More HWG Resources on Cascading Style Sheets

• Online Course H151: Introduction to Cascading Style Sheets
• The HWG Cascading Style Sheets FAQ
• The HWG-Style Discussion List
• Accessibility and Cascading Style Sheets (from the AWARE Center)
• User-Defined Style Sheets and Accessibility (from the AWARE Center)