How to design a consistent web site using
style sheets.
By
Milana Nastetskaya
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 :
<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">
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/
---------------------------------------------------------------------------------------------------------------------