HTML Writers Guild Guild Operations Newsletters Tips Dec99b

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

--Submitted by Howard Merrill <>

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.

--Submitted by Bill Palmer <>

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.

--Submitted by Lee Rouland <>

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.

--Submitted by Rick Miske <>

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

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}

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

--Submitted by Jim Peden <>

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!

--Submitted by Donna M Smillie <>

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.

--Submitted by Don Franke <>

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:

--Submitted by Lori Ann Alita <>

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 {
A:visited {
COLOR: #00A350
A:hover {
COLOR: #ff6600

--Submitted by Sandra Olson <>

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.

--Submitted by Demetrius Francis <>

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.

--Submitted by <>

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>

--Submitted by Dirk Gardner <>

More HWG Resources on Cascading Style Sheets

[Valid HTML 4.0!]
This page is maintained by Last updated on 18 December 1999.
Copyright © 2002 by the International Webmasters Association/HTML Writers Guild.