How To Design a Consistent Web Site Using Style Sheets

Teacher: 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:

(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 teacher:
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