Web Marketing Ezine

July 24th., 2002                    Issue #200                      ISSN 1444-2027

Visit  http://www.ezineadventure.com/Default.asp?id=8572

Cluetrain Manifesto Theses #4 and #5

"Whether delivering information, opinions, perspectives, dissenting arguments or humorous asides, the human voice is typically open, natural, uncontrived."

"People recognize each other as such from the sound of this voice."

Read the whole Cluetrain Manifesto at http://www.webmarketingezine.com/cluetrain.htm

The name for eye and vision problems experienced during computer use. People are using light therapy to combat CVS (including ultraviolet and full-spectrum wavelengths).

-Source: NetLingo- The Internet Dictionary http://www.netlingo.com 
The NetLingo Dictionary book is 528-pages of over 2500 terms. Learn more...

6. Free Training Courses

Increase your knowledge; hone your skills; improve your results! Take advantage of some of the finest FREE training courses on the Web by visiting our Free Training Course listing at;
http://www.webmarketingezine.com/freetrainingcourses.shtml

You'll find courses on IT, Computing, Software, Business and Personal Development. With over 35 courses to choose from, you're sure to find something!

7. Feature Article

Cascading Style Sheets (CSS) Tutorial
by Will Bontrager

Getting Started

If you've been putting off using CSS because you have some uncertainty about exactly how to use it, then today is the day you'll get started. You'll see the simplicity of CSS. You'll realize that making style changes to your site's web pages is not only quick and easy, but also fun.

There are four ways a style can be applied to a web page. Only the first method is presented in this Getting Started article. The other methods are mentioned so you're aware they exist.

1. Styles are specified through the use of an external file, a method called "external style sheet" or "linked style sheet." This is the method you'll learn in this article. There is one file on your site that specifies the styles. Then, one line in each of your web pages links to that file. To change the style on all your web pages, simply change the external file.

2. Styles are specified in the HEAD area of each page the style is applied to. This method is called "embedded style sheet."

3. A style is specified in the actual HTML tag where the style is applied. This is called an "inline style."

4. A combination of embedded and external style sheets. For this, each page has an embedded style sheet. Within the embedded style sheet are certain codes that import one or more external style sheets. This method is called "imported style sheet."

To create an external style sheet, make a file named mysite.css with the following three lines:

BODY, TD, P, LI, BLOCKQUOTE { 
font-family: sans-serif;
}

Upload mysite.css to the same directory on your server where you have your main index page.

Now, in the source code of one or more of your web pages, in the HEAD area, put this line (make a backup of the pages before changing, in case you want to restore to the original):

<LINK REL="stylesheet" TYPE="text/css" HREF="mysite.css">

(The above assumes your web page is in the same directory as the style sheet file, but that situation isn't required. The HREF="__________" URL can be a relative URL or an absolute http://... URL.)

That's all there is to it. Every page with the above line in the HEAD area will have it's text "magically" converted to a sans-serif font.

Okay, there may be just a bit more to it than that. If you currently have FONT tags specified in the source code of your web pages, then those will need to be removed so the CSS style can do its job.

Once all FONT tags removed from your page, let's experiment a bit. In the mysite.css file, change the font from sans-serif to serif:

font-family: serif;

Like magic, all your text is converted to a serif font.

A paragraph about definitions: The "font-family: serif;" line is a style element. Styles can have other elements, like size and color, and some of those are addressed below. Each style element has two parts, as you've noticed. The first part is called the "property" and the second part is called the "value." The property is followed by a colon and the value is followed by a semi-colon. The property must be specified before the value, and they must appear together. Thus, "font-family: serif;"

So far, we've specified the generic sans-serif and serif fonts. These allow the browser to use its default sans-serif or serif font.

You can, however, specify exact font names, and if the font name is available on the user's computer then it will be used. Arial and Helvetica are common sans-serif fonts for PC and Mac desktop computers. To control the exact font name to be used, with backups in case the one you specify isn't available on the user's computer, list the font names in order of preference, separated with a comma. Example:

font-family: arial,helvetica,sans-serif;

The above line in the style sheet will cause the browser to use font Arial if it's available on the user's computer. If Arial is not available, Helvetica will be used. If neither Arial nor Helvetica are available, the browser will choose a sans-serif font that is available. And if no sans-serif font is available, the browser will use its internal default font, whatever that may be.

While you're changing the font family specifications, let's also specify the font size and text color. Your mysite.css file can now have these five lines:


BODY, TD, P, LI, BLOCKQUOTE { 
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}

The above specifies a font size of 12 pixels ("px") in height. Font sizes can also be specified in points ("pt") and other measurements. However, use the pixel measurement; pixel measurement maintains the most consistent size among different monitors and operating systems.

The above also specifies a text color. The color can be specified either as a hexadecimal number preceeded with a "#" character (like the example) or by a color name such as "black".

Once you upload the above style sheet, your pages will have black, 12 pixel sized text, Arial font. Change the color to

color: blue;

and suddenly all your text is blue. Change the size to 

font-size: 55px;

and your text is huge.

Just one simple change in mysite.css changes every page that has the one-line <LINK REL="stylesheet" ...> tag in the HEAD area.

By now, you've probably been wondering about the 

BODY, TD, P, LI, BLOCKQUOTE { 

line in file mysite.css. That is a list of tags that the style will effect, tags separated with a comma. In this case, it effects the BODY tag (which is everything in the page BODY that doesn't otherwise have a style), the TD tag (table data cell), the P tag (paragraph), and the BLOCKQUOTE tag.

Let's add another style, one for the H1 tag. Your mysite.css file should now have these twelve lines:

BODY, TD, P, LI, BLOCKQUOTE { 
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}

H1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: red;
background: blue;
}

The above will cause the H1 text to be 36 pixels in size, bold, centered, colored red, and with a blue background. The font face will be Arial because that's what's specified for BODY, and H1 didn't specify any different.

Once you upload mysite.css, all your web page's H1 text will be the specified style.

A note about degradation: Some users have style sheets off in their browsers. Some browsers are unable to process style sheets at all. Although the percentage of those is likely to be tiny, it's still a good idea to design your style sheets so your pages degrade gracefully for such users. In other words, if you're going to specify a font size of 24px, that's closer to a non-style sheet H2 size than it is to H1 or H5. So, if you can, use H2 for that particular font size because it would degrade with more grace than H1 or H5 would in that situation.

Your mysite.css file can contain specifications for any HTML tag. The file can be named something else, if you wish, although by convention it should have the .css file name extension.

Yes, there is a lot more to be learned. Even with just this small amount of knowledge, however, you have the ability to specify the font attributes for any and all HTML tags that contain visible text -- throughout your site. Except one.

The one exception is the anchor tag, often referred to as the "A" link tag, the tag you use when you create a link on a web page. The A tag can have three different styles, one for each of it's states: link, active, and visited. To see how it works, change your mysite.css style sheet file so it has these thirty lines:

BODY, TD, P, LI, BLOCKQUOTE { 
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}

H1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: red;
background: blue;
}

A:link {
color: yellow;
background: red;
font-weight: bold;
}

A:active {
text-decoration: underline;
}

A:visited {
color: red;
background: yellow;
font-style: italic;
text-decoration: line-through;
}

With the above, your linked text will be bold, colored yellow, and with a red background. When the link is active (while it's being clicked on), it will be underlined. Once the linked page has been visited, the text will be italic and have a line through it, the text color will be red, and the background will be yellow.

Note that the "active" and "visited" behave differently in different browsers. If you specify font changes in the "active" style, the change might or might not display. Changing the font style to italic in the "visited" style causes the font to be italic; however, in some browsers the font weight remains bold as specified in the "link" style and in other browsers the font weight becomes normal.

Another A tag style you may wish to utilize is "hover" style. This style becomes effective when the mouse cursor hovers above the linked text. The "hover" style works in IE 5+ and in Netscape 6+. The style has no effect for browsers that don't support "hover". Here is an example "hover" style:

A:hover {
text-decoration: none;
color: purple;
background: pink;
font-size: 22px;
font-weight: bold;
}

The above causes any underlines or line-throughs to disappear, turns the linked text color purple with a pink background, changes the text size to 22 pixels, and makes the text bold.

Some of the styles demonstrated in the examples cause dramatic effects. They serve to demonstrate possibilities. Your actual implementation will probably be more pleasant to the eyes.

Copyright 2002 Bontrager Connection, LLC
"WillMaster Possibilities" ezine
http://willmaster.com/possibilities/ 
mailto:[email protected]

8. Our Companion Ezine: A Better Life:ItsYourFuture!

                                ITS YOUR FUTURE!
Enjoy Humor, Inspiration, Romance, Fitness, Nutrition & Personal
Finance- all aimed at helping YOU to take control of YOUR future!
Subscribe FREE by sending a blank email to:
mailto:[email protected]
                            BE HAPPY BE HEALTHY LIVE LONG & PROSPER


9. Administrivia

Website:
http://www.WebMarketingEzine.com

Contact Information:
to subscribe: [email protected]
to unsubscribe: [email protected]
Note: This is an Ezine. So sorry, NO postings are accepted
contact John Payne: [email protected] NO SPAM PLEASE

Advertising Information:
Please go to: http://www.webmarketingezine.com/advertise.shtml 

Disclaimer:
This publication was designed to provide accurate and authoritative information with regard to the subject matter. Subscribers are sent this free weekly e-zine with the understanding that the publisher is not engaged in rendering legal, or other professional advice. If legal advice or other professional assistance is required, we advise seeking the  services of a competent professional.

John Payne does not accept any responsibility for any liabilities resulting from any claims in articles or advertisements published in WME, or the actions of the parties involved.

This publication is for informational purposes only.

Copyright:
� Copyright 2000-2002 John Payne All rights reserved. Web Marketing Ezine may only be redistributed in its unedited form. You are welcome to forward it to as many people as you like, with our thanks. Written permission must be obtained to reprint or quote original material published in Web Marketing Ezine.

               Web Marketing Ezine is published by John Payne