dreamweaver templates from templates2go.com Ready to use dreamweaver templates
Dreamweaver Templates home Dreamweaver Templates FAQs Dreamweaver Templates Samples Order Dreamweaver Templates Dreamweaver Training CDs Web Design News contact us

New timesaving Dreamweaver templates, order now at our special introductory price.

Order dreamweaver templates now


Featured in the Dreamweaver Bible

As Seen On


Product Developers Resource Center

Producing DVDs for Profit

 

 

 

How To Design a Consistent Web Site Using Style Sheets
Copyright © 2001 Milana Nastetskaya

milana@instantwebanswers.com

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

About the Author

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

Back to the Article Bank Directory

 

Copyright © 2005 by Regent Press. All rights reserved.
Violators will be cybercuted!