Styling a navigation bar using CSS
Most web pages have some sort of navigation, often at the top of a page, down the left side, along the bottom, or sometimes all three!
Before CSS, if you wanted to incorporate special effects into your navigation, such as highlighting the selection the mouse is resting on, you needed to use complex coding involving javascript and images. With CSS it's possible to create navigation bars that are far simpler and easier to update. Let's get started.
We'll start with the basics, adding the CSS step by step so you can see it at work.
Since at its most basic level, a navigation bar is just a list of links, let's code it for what it is. Open NoteTab or your favorite text editor and enter the following into a blank document.
<html>
<head><title>Styling a navigation bar with CSS</title>
</head>
<body>
<h1>Styling a navigation bar with CSS -- About Me</h1>
<ul>
<li><a href="#">My Home Page</a></li>
<li><a href="#">My Family</a></li>
<li><a href="#">My Hobbies</a></li>
<li><a href="#">My Cars</a></li>
<li><a href="#">My Vacations</li>
</ul>
<p> As you can see, it's all about me. Yada, yada, yada.</p>
</body>
</html>
When you're done, save it to your desktop as "menu.html." Open your browser and navigate to "menu.html." Here's what it should look like. Pretty plain, but we have not yet begun to style!
To start our CSS stylesheet, open another blank document, enter the following into it:
font-family: verdana, sans-serif;
}
Save it to your desktop as "menu.css". Next, we need to tell the browser where to find the CSS stylesheet with our instructions for displaying our page.
Go back to your "menu.html" document and add the part shown in red.
<html>
<head><title>Styling a navigation bar with CSS</title>
<link rel="stylesheet" type="text/css" href="./menu.css" />
</head>
<body>
<h1>Styling a navigation bar with CSS -- About Me</h1>
<ul>
<li><a href="#">My Home Page</a></li>
<li><a href="#">My Family</a></li>
<li><a href="#">My Hobbies</a></li>
<li><a href="#">My Cars</a></li>
<li><a href="#">My Vacations</li>
</ul>
<p> As you can see, it's all about me. Yada, yada, yada.</p>
</body>
</html>
Save your document, then go back to the browser where you have the page displayed, and refresh.
Your page should now look like this, with the text displayed in Verdana rather than the default font for your browser.
Let's look briefly at what is going on:
- The <link rel="stylesheet" type="text/css" href="menu_example.css" /> tells the browser where to find the CSS styles telling it how to display the page.
- In the stylesheet, body is the selector, telling the browser what part of the page to apply the style to.
- font-family is the property, the aspect of the body to be styled.
- verdana, sans-serif is the value of the propery. In this example, it is telling the browser to display text in the body tag using the Verdana font, and if the browser doesn't have Verdana installed, to use the browser's default sans-serif font.
Let's add a couple more styles before we start work on the menu in earnest.
Open your "menu.css" document and add the following (new stuff in red):
font-family: verdana, sans-serif;
margin-left: 3cm;
}
h1 {
color: #000066;
font-size: 16px;
}
Save "menu.css," reload your browser, and you should see this.
Let's get to work on styling our navigation bar. We could do it down the left side, but let's make it a horizontal bar across the top of the page.
To do this, we could create styles for the <ul>, the unordered list, and the <li>, the list items. In this small page, there are no other <ul> or <li> elements to worry about -- the styles would just apply to these. But often you want to apply styles some <ul>s and not others. That's where ids and classes come in.
ids and classes let you apply styles to some HTML elements, but not others. You tell the browser which HTML elements you want it to style by giving them an id or class. If you have just one occurrence of an element you want to apply a style to, use an id. Otherwise, use a class.
Since we have just one navigation bar in this page, we'll use an id. Open "menu_example.html" and add add id="navlist" to the opening <ul> tag, as shown below.
<head><title>Styling a navigation bar with CSS</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
<h1>Styling a navigation bar with CSS -- About Me</h1>
<ul id="navlist">
<li><a href="#">My Home Page</a></li>
<li><a href="#">My Family</a></li>
<li><a href="#">My Hobbies</a></li>
<li><a href="#">My Cars</a></li>
<li><a href="#">My Vacations</li>
</ul>
<p> As you can see, it's all about me. Yada, yada, yada.</p> </body>
</html>
Before we turn the list into a bar going across the top, we need to talk about the difference between block and in-line HTML elements. Block elements start and end on their own line. They don't allow other elements on either side. Examples of block elements are <h1> and <p>. In-line elements can have other elements on either side. The <a> tag is an example of an in-line element.
<li> tags are block elements, so each one normally displays on a separate line. To make the <li>s display side by side, we need to define them as in-line elements. With CSS, we can define any element as either block or in-line. Update your "menu_example.css" file as follows.
h1 {
color: #000066;
font-size: 16px;
}
#navlist li {
display: inline;
}
Why did we say #navlist li instead of li? If we used li as the selector, it would make every li in our web page display in-line. By using #navlist li as the selector, only lis in an element with an id of navlist will be affected by this rule.
Reload. You should now see this.
Let's style the text in the navigation menu a bit. Update "menu.css" again.
h1 {
color: #000066;
font-size: 16px;
}
#navlist li {
display: inline;
font-size: 11px;
font-family: verdana, arial, sans-serif;
font-weight: bold;
}
Reload. You should now see this.
Next we'll put a border around the navigation tabs to make them stand out.
#navlist li {
display: inline;
font-size: 11px;
font-family: verdana, arial, sans-serif;
font-weight: bold;
}
#navlist a {
border: 1px solid silver;
border-right: 2px solid gray;
}
The CSS property border allows us to specify the width of a border, its style (dotted and dashed are two other commonly used styles), and the color.
Hopefully your navigation bar looks like this.
To make a little space between the text and the border, we use the padding property. Update your "menu_example.css" file like this:
#navlist li {
display: inline;
font-size: 11px;
font-family: verdana, arial, sans-serif;
font-weight: bold;
}
#navlist a {
border: 1px solid silver;
border-right: 2px solid gray;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 9px;
padding-left: 9px;
}
You should see this.
Time to give the text a color other than the default hyperlink blue and add some background color. Another update is called for:
#navlist a {
border: 1px solid silver;
border-right: 2px solid gray;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 9px;
padding-left: 9px;
}
#navlist a:link, #navlist a:visited {
color: #000066;
background-color: #BFE4FF;
text-decoration: none;
}
a:link is the CSS property for links before they've been clicked, a:visited for links after they've been clicked.
Note that we can make a rule apply to more than one selector. Just be sure to separate them with commas.
text-decoration is the CSS property that includes underlining and line-through. Hyperlinks are underlined by default, but we can turn off the underlining using the declaration: text-decoration: none; Your example should now look like this.
The final touch is adding the rollover effect.
#navlist a:link, #navlist a:visited {
color: #000066;
background-color: #BFE4FF;
text-decoration: none;
}
#navlist a:hover {
color: #fff;
background-color: #336699;
text-decoration: none;
}
a:hover is the CSS property for links being hovered over with a mouse. It's a handy way to make hovered links stand out. With this final touch, your navigation example should look like this. Note that you need to move your mouse over the navigation tabs to get the full effect.
To achieve this effect without using CSS, you'd need to use images and javascript, a much more complex set of code to create and maintain.
Let's go to our next example, making a grid without using a table. We start here.