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.
