Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

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 info@westciv.com.

style master css tutorial

Styling a navbar

In this section you will learn

  • how to create more complex descendent selectors
  • how to remove the bullets from in front of list items
  • how to streamline your style sheets using group selectors
  • about the display type of HTML elements
  • how to change an element's display type using the display property
  • how to turn what looks like an ordinary unordered list into a semantically correct navbar

Project goals

  • To style the contents of the navbar.

<< 11. descendent selectors | 13. where to now? >>

We've positioned our navbar, but we still have to style its contents.

Styling the list items in the navbar

More complex descendent selectors

First you'll need to go to the HTML and work out exactly what elements make up this navbar. You'll see that it is in fact just a regular <ul>, containing a collection of <li>s. And then inside each of the <li>s there are links, which makes up the elements of the navbar. How do we strip out all that list-like appearance and make it behave like a navbar?

Well, first of all we want to select only those <li>s that are in the navbar. Right now there are no other <li>s on the page, but there's a good chance in the future that you'll also want to create a list in the main text area, and you probably won't want those ones to look the same as this navbar is going to look.

So you need to create a descendent selector that selects <li>s, inside <ul>s which are inside <div id="navbar">.

Note: optimization demons will tell you that you don't really need to specify that <ul>, and it's true. Descendent selectors should select the specified element regardless of what else appears in the containment hierarchy between the two. However, taking this belt and braces approach which I show you here will ensure that what you're trying to do will work reliably in the browsers you need it to work in. If you don't I can guarantee you will one day run into a situation where your descendent selector just won't seem to select. So, unless you've got a good reason not to, get into the habit of using the full containment hierarchy like I have here.

Exercise 51

Make a new statement that will select <li>s, inside <ul>s which are inside <div id="navbar">. Can you work out how to do this based on the simple descendent selector we learned to create before?

Rather than putting this new statement at the bottom of the style sheet as we have been doing so far, you might want to put it underneath the statement for #navbar. That way you keep all the styles which apply to the navbar together.

Create these in the same way as you created the statement to select paragraphs inside #header. This time, just add in the third selector, and make sure they're arranged in the right order. The explanation in the dialog will help you get it right.

To create a new statement using the editor underneath another one, just make sure you have the cursor inserted in the code in the place where you want the new statement to go.

Here's what it will look like.

#navbar ul li {

}

Removing bullets from lists

Now you're ready to get rid of the bullets on those list items - the first step in turning it into a navbar. We'll do this using a new property, list-style-type, which we'll set to none.

Exercise 52

For the statement you just created, set list-style-type to none.

You'll find the list-style-type editor on the Display Type editor.

#navbar ul li {

list-style-type: none;

}

Now that those bullets are gone, we don't actually do to much more to the <li>s. Most of the rest of the style that turns this into a navbar is applied to the links themselves.

Styling the links

Group selectors

First we need to select, in their various states, only those links which are inside the navbar.

Exercise 53

Create three new selectors which will select links in their three different states (link, visited and hover - we won't worry here about active) only when they are inside #navbar. Remember, take my hint and use the full containment hierarchy.

Did you get the following?

#navbar ul li a:link {

}

#navbar ul li a:visited {

}

#navbar ul li a:hover {

}

Now, remember when we styled the links in the main text area, we gave them a different appearance depending on whether they were visited or unvisited? Well, we're not actually going to do that here: we're going to make them both the same. When you want to do this in CSS, ie, make two elements which need different selectors appear with the same styles, it's a good idea to use what's called a group selector. The syntax for this is simply a comma separated list of the selectors. So to take a really simple example

h1, h2, h3, h4, h5, h6 {

color: #ff0000

}

will select all the heading levels and color them red. As I said, you can have any type of selector in this list.

Exercise 54

Can you combine the two selectors you created for unvisited and visited links in the navbar into one group selector?

It's probably easiest to do this just in the style sheet text itself. For future reference though you'll find an editor for group selectors in the usual place, via the Statement menu.

Here's what you should have when you're done. But be sure not to forget that comma!

#navbar ul li a:link, #navbar ul li a:visited {

}

#navbar ul li a:hover {

}

And in the browser, if you follow any of the links in the navbar, when you come back you won't see a line-through anymore.

Group selectors are a really handy way of both optimizing your code and also setting up the style sheet so that when you want to make changes at a later date you only need to do so in one place, rather than several.

Turning links into buttons

Now it just remains to take what still look like everyday links and make them look more like some sort of "button".

Changing an element's display type

All HTML elements have what is called a default display type. There are in fact more of these, but for now let's keep it simple and say that most elements display as either inline or block. An easy to grasp way to see the difference is to think about how <a> elements appear on the page as opposed to <p> elements. An <a> element, being inline, will just form part of the flow and not separate out from the content around it. A <p> element on the other hand, being a block, will form a new block of content, separated out from the content which comes before and after it.

The big difference between what the navbar is looking like now, and what it will look like when it's finished is that at the moment those links are showing their default display, which is inline. That's why their background isn't extending out and filling the whole line.

All HTML elements are by default either block or inline. But with CSS you can change an element's default display type, for example make a paragraph behave like an inline element, or, as we're going to do here, make an <a> element behave like a block.

The property we use to do this is called the display property. It can take quite a complicated set of values but let's start off with the two easiest ones, block and inline.

Exercise 55

Make links inside #navbar behave like block elements. To do this you only need to set the display property for links in their normal and visited state.

The display property is on the Display Type Editor. Just set the popup menu to block.

#navbar ul li a:link, #navbar ul li a:visited {

display: block;

}

Once you've done this, you should see that the background color of the links now fills the entire line.

Default browser values for margin

Well, they're not exactly filling the entire line: where are those gaps at the top and bottom and to the left coming from? The answer lies in something we've already seen - remember when we came across default browser values for margin on the <body> element? This can happen on all sorts of elements, and, depending on which browser you're using, it's probably what you're seeing here. I say "depending on which browser" because Opera doesn't do this, but it has default padding instead.

So, one thing you'll need to get into the habit of doing for both the <li> and <ul> elements when you turn a list into a navbar is applying a 0 margin and padding. And then on those occasions when you actually do need margin and padding on these elements, you can just specify your own.

Exercise 56

Apply zero margin and padding to both <li> and <ul> elements when they are inside #navbar.

Hint: I've actually given you a bit of extra work to do here, because for that second one you're going to need to create a new selector and statement as well. The first one can just be added in to a statement that's already there.

Did you rise to the occasion? Here's what you need to have, with the newer statement below.

#navbar ul li {

list-style-type: none;

margin: 0;

padding: 0;

}

#navbar ul {

margin: 0;

padding: 0;

}

And in the browser now the navbar should be sitting exactly where it should be, tucked up against all the elements around it.

A bit of practice

All that remains now is to add a few more properties to the links themselves and you're done. I'm going to give you all of these in one go.

Exercise 57

For links inside #navbar

  • get rid of the strike-through, which will be showing if any of the links have been visited
  • make the text bold
  • add a 1 pixel black border to the bottom edge only
  • add padding of three pixels to the top and the bottom
  • add padding of 20 pixels to the left

Remember, you've already got a statement for this - you just need to add those new properties.

If you get it right, when you're done, it should look like this.

#navbar ul li a:link, #navbar ul li a:visited {

display: block;

text-decoration: none;

font-weight: bold;

border-bottom: solid #000000 1px;

padding-top: 3px;

padding-bottom: 3px;

padding-left: 20px;

}

And well, that's about it for the navbar. You could have course work on the color and background color of the links. At the moment they're just using the same color combination as regular links in the main text, by virtue of the fact that they are just links as well. And there are a whole host of other things you can do with navbars, but what you have here will be the basis of all of them. I'm going to leave the rest up to you.

There's a chance that when you preview your work in Internet Explorer you're seeing strange gaps between the items in the navbar. Most likely it's caused by something you might have changed in the HTML. I actually talked about this way back at the beginning when we created the document. If you're seeing this now, you might want to review that part of the tutorial.

Next

I hope you agree with me that you've created a pretty neat looking site here. And the best part is that it's a kind of template: creating more pages like this is simply a matter of pouring different content into the same HTML file. And even if you've created thousands of pages like this, making changes to the style is simply a matter of editing the style sheet.

So what's next? Well, next I leave you to your own devices to go out into the world and come up with your own designs. That's not completely true. In the final section of the tutorial I've put together a collection of resources that will help you on your way. I hope you've got a lot out of the tutorial, and that it's shown you the enormous potential of standards based web design.

<< 11. descendent selectors | 13. where to now? >>

Style Master CSS Editor

Web Directions Conference