I would recommend always use external style sheets rather than embedded styles. This external style sheet can be applied to a hundred different pages, without having to retype the information. Also, perhaps more importantly, if you want to change the appearance of your pages, you simply change one file, instead of making changes to all your pages.
Creating a New Style Sheet To start a new Style Sheet, simply click on the button 
. Now you are ready to start Creating New Style Definitions.
When you want to test your style sheet, click on the button 
or the button
. This will open the browser with a list of text in common tags, so you can see how text will look in each tag.
Finally, when you are done editing your style sheet, you will have to Apply the Style Sheet to your Web Page.
Defining a New Style
There are three ways to define a new style.
Tags- 
This will define a style for an existing tag. Simply click the arrow box, and select a tag from the list. This is usefull if you want all the tags on your page to have a certain property. For instance, if you want all visited links to have a certain color, select A:visited from the list, then define the properties of the style.
Class- 
Here you can define a style with a name of your choosing. For example, you could define a style sheet named Bob. Then, in your page any time you want to apply the style Bob to a tag, you would use class="Bob". This is useful if you want some tags, but not all to have a certain style. For instance:
<P class="Bob">Hello</P>
<P>Hello</P>
The word first Hello would have the properties of Bob, while the second would not.
ID- 
An ID is similar to a Class, except you should only use ID once per document. For instance, if you defined an ID named Tom, you should not do this:
<P ID="Tom">Hello</P>
<P ID="Tom">Welcome to my website</P>
ID's should only be used once, especially if you plan to do any scripting, as this may lead to errors in your script. If you need to use a certain style more once, use a Class identifier instead of ID.
After you have defined a new style, the next step is to Edit the Properties of your Style. This will define exactly how the style will act when you apply it to your page.
Editing the Properties of your Style
This is the elementary function of style sheet maker- defining how your styles will be displayed. After you have Defined your Style, you will now have to define the properties of that style. Make sure you define the properties of your style within the brackets for that style, like this:
.Bob { font-family: Arial; font-size: 14px; color: #FF0000; }
You may find it easier to read if you put each style on a new line, like this:
.Bob
{
font-family: Arial;
font-size: 14px;
color: #FF0000;
}
To make things easier, we have a set of wizards for defining styles. Just put your cursor within the brackets, and then click on the appropriate button:
Font Properties 
Color and Background Properties 
Alignment 
Margins 
Padding 
Border 
After using the wizard, the appropriate code will be inserted at your cursor. You can define any number of properties for any style. Just make sure all the properties appear within the brackets.
Applying your Styles to a Webpage
There are two different methods of adding a Style Sheet to your web page: embedding the style sheet on your page, and linking to an external style sheet. To embed the style sheet in your page, all you need to do is copy everything between the <style> and </style> tags, and insert it on your page, between the <head> and </head> tags.
If you want to link to an external style sheet, you will first need to save the style sheet to the same directory your web page is saved in. After saving, click on the button 
, that will display the code needed to link to the external style sheet. Simply cut this code, and insert it on your web page between the <head> and </head> tags.
Get rid of your tables, and use Style Sheet Maker for positioning
HTML Tables are a great tool for positioning text and images on your webpage. Don't you just love trying to keep tack of all those tags? Things get even worse when you start putting tables within tables within tables. Pretty soon the code gets so confusing, you don't know which way is up. With Style sheets, all the confusion goes away. Just define a style sheet to handle positioning of elements on the page.
Here is example. Say we have two images, one of Bo, and one of Luke, and we want to position these images on our on our page. Using style sheet maker, we can position the images by creating ID's for each image:
#Bo { margin-left: 200px; margin-top: 300px; }
#Luke { margin-left: 400px; margin-top: 300px; }
Now we can apply the styles to our image tags, like this:
<IMG ID="Bo" src="bo.jpg">
<IMG ID="Luke" src="luke.jpg">
Now the image bo.jpg will be placed on the page 200 pixels from the left side of the screen, and 300 pixels from the top side of the screen, while the image luke.jpg will be placed on the page 200 pixels from the left side of the screen, and 300 pixels from the top side of the screen.
This method of positioning is much easier than using tables, and more exact than using simple alignment tags.
