Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.


They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

quick tutorials

A navigation bar

Commonly, where a site comprises a number of pages, or sections, a "navigation bar" is placed at the top and or the bottom of each page that allows readers to easily go to other sections of the site which interest them. A navigation bar can be distinguished by its background color, distinctive link appearance, and by a border which separates it from the surrounding page. You'll see one at the top and bottom of all the pages in this Cookbook.

The navigation bar on these pages uses these features to distinguish itself. To create such a navigation bar we need to create a paragraph which contains the links to be navigated, then add to our style sheet so that the bar has the required features. This is what we'll learn to do in this recipe.

In the HTML

In the HTML, our navigation bar only needs to be a paragraph, with the necessary links. The one addition is that the paragraph should be of a particular class, so that we can apply style to that paragraph alone, and not the other paragraphs in the page. For this page, our navigation bar HTML looks like this

<p class="navigation-bar"><a href="index.html">introduction</a> | <a href="side_panels.html">side panels</a> | <a href="links.html">links</a> | <a href="appearance.html">text</a> | <a href="navigation_bars.html">navigation</a> | <a href="text_and_images.html">images</a> | <a href="bullets.html">bullets</a></p>

In the style sheet

In th style sheet, we want to create a background color, center align the text, and place a border around the whole navigation bar. We then want to create particular styles for the links in the navigation bar.

The paragraph

background color

We've now seen how to give an element a particular background color a number of times. Here's how we do it.

p.navigation-bar {background-color: black;}

text alignment

We've also seen how to align text with the text-align property. Here is how we do it.

p.navigation-bar {background-color: black;

text-align: center}


With the pullquote example we created borders around the element. We use the same property to put a border around the navigation bar.

p.navigation-bar {background-color: black;

border: medium #ffffff solid;

text-align: center}


We've also added some padding to aid legibility, so that there is some space between the edges of the element and the text. We also saw this with the pullquote example.

p.navigation-bar {background-color: black;

border: medium #ffffff solid;

padding: 1%;

text-align: center}

The links

We still need to create the style sheet rule for the links in our navigation bar. We can't simply apply style to all the links on our page, as not all of them are in the navigation bar. You might think that we need to create a new class for the links in the navigation bar. But wouldn't it be nice if we could select only links inside paragraphs of class navigation bar? Well we can (you knew I was going to say that didn't you?)

Here is how. We need a slightly different type of selector. This one lists the container element, then the element that is contained inside it. In this case

p.navigation-bar a:link

p.navigation-bar a:visited

and so on.

Then we create the properties to finalize our navigation bar. In this case, white text, which, when the mouse is over it changes to black text, with the background color the same as for the body of the page.

p.navigation-bar a:link {color: white;

text-decoration: none}

p.navigation-bar a:hover {background-color: #ffb0d3;

color: black;

text-decoration: none}