How To Design a Consistent Web Site Using Style Sheets
Copyright © 2001 Milana Nastetskaya
milana@instantwebanswers.com

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
WORD COUNT: 501
PUBLISHING: this article may be freely published if the resource
box is intact.  Would love to know if you do publish.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

We don't expect Madonna to wear the same hair style, or the same
kind of clothes at every concert - that would be really boring!

But when it comes to web sites, we do need some consistency so
we could find things faster and easier.  Many web sites, though,
look different on every page.  You  might not even realize you
are still on the same web site!  And that's not good - you want
people to know where they are, and a consistent look will make
your visitors more comfortable.

How do you maintain a consistent look throughout the pages of
your web site, without spending too much time on maintaining it?
Use style sheets.

Don't leave just yet:  style sheets are very easy to understand
and create - just take a few seconds to look at a sample below:

(NOTE:  I am replacing the regular HTML tags with parentheses
so you could see it in your e-mail program.  You should replace
them with the "<" and  ">" tags before using in your web pages.)

(STYLE TYPE="text/css")
body {color: navy ; font-family: arial; font-size: 9pt;
text-decoration: underline}
(/STYLE)

The first and last line of the above code simply open and close
the style sheet.  Second line says that all the text in the (BODY)
of the web page will be in "navy" color, "arial" font, 9 points
in size, and underlined.

Try inserting the above style sheet in any of your web pages
(between (HEAD) and (/HEAD) tags) and your web page should reflect
the formatting specified in this code.

Let's see some more examples of style sheets:

(STYLE TYPE="text/css")
H1 {color: maroon}
H2 {color: blue}
H3 {color: green}
(/STYLE)

What this style sheet will do if you insert it into your web page
is make all your H1 headings "maroon" color, all your H2 headings
"blue" and all your H3 headings "green".  Go ahead - try it.

You can easily combine both of the above style sheets into one,
just like shown below:

(STYLE TYPE="text/css")

body { color: navy ; font-family: arial; font-size: 9pt;
text-decoration: underline}

H1 {color: maroon}
H2 {color: blue}
H3 {color: green}

(/STYLE)

You can add more code between the STYLE and /STYLE tags.  Style
sheets can make your links look different than just blue underlined.
They can also change the look of your forms, borders, tables,
images and most other web page objects.

When your style sheet is ready, you may paste it into a separate
file and give it a unique name ending with ".css" (for example,
"mystyle.css"). Then in every web page add this line between the
(HEAD) and (/HEAD) tags:

(LINK href="mystyle.css" rel="stylesheet" type="text/css")

*again, don't forget to replace the ( ) with the HTML tags "<" and
">".

Every time you change the style sheet file, all of your web pages
will be immediately updated!

For a list of all the objects and how to specify their properties
using Style Sheets, visit
http://www.htmlhelp.com/reference/css/properties.html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Milana Nastetskaya is a full time web and the author of
two books: "Create Your First Busines Web Site in 10
days" and "65 Instant Web Design Answers".
http://www.firstbusinesswebsite.com
http://www.instantwebanswers.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~