Some information on Cascading Style Sheets, and how to use them to create a navigation bar.

This tutorial based upon http://www.w3.org/Style/Examples/011/firstcss.en.html

See a movie to introduce you to Cascading Style Sheets

See a presentation (used in the movie) to guide you through the information below: http://home.adelphi.edu/~pe16132/csc170/presentations/css.ppt

OR look at these written steps for learning about Style Sheets

A short summary of the information provided in the powerpoint:

First, look at these 5 stages of a page being developed with style sheets. The first one has no styles, and can be created with basic Seamonkey. The second one adds a navigation bar using a style. That is all you need to use a style to create a navigation bar. Continue on if you want to see how to move that style into an external style sheet so that one css file can control how all the pages on your website look.

HTML pages can have the same style repeated in four forms in one page. It has to know which takes priority. Here is the order, with the highest number being the one that will be used.

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the <head> tag)
  4. Inline style (inside an HTML element) called inline

From the examples above, you can see that the syntax for a style is: selector {property: value; property: value}

ex: address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

You can make a class, such as I did with ul.navbar using the following formatting:

You can make an identifier, which is another way to tie an html tag to a style:

Here are some more good tutorials