Open your home page HTML file in notepad and create an unordered list of navigation items that you will include in your navigation bar on your home page. This is just a simple list like you would use to create a bulleted or numbered list on your webpage. It looks like this: <ul><li>Your first navigation heading</li><li>your second navigation page</li> and ends with </ul>.
Step2
Add the <nav> tag to the list tag. So, your HTML looks like this: <ul id="nav"><li id="nav-first page"><a href="link to your first page">First Page Navigation Heading</a></li> <li id="nav-secondpage"><a href="link to your second page">Second Page Heading</a></li> and so on.
Step3
Open your CSS file. This file is usually located in your css folder, and it contains all the definitions that tell the browser what your text, bullets and so on, will look like once displayed in the browser. Follow the link in the Resources to learn to write a .css file, if you do not have one.
Step4
Type in #nav at the top of the CSS style sheet. This identifies that this code relates to your navigation bar, since we defined this by the id=nav tag in the home page.
Step5
Set your margins and padding in the CSS style sheet to 0. So, type {margin:0; padding:0} in the CSS style sheet right after #nav. The first piece of code on the CSS style sheet is #nav {margin:0; padding:0}
Step6
Make the navigation bar align horizontally. Normally, a list in an HTML page displays vertically, so entering this part of the code in CSS, tells the browser to display this list of items across the page. Type #nav li {display:inline; padding:0; margin:0} in the CSS style sheet.
Step7
Add colors and other styles to your link items, not the entire list of items itself. To do this, you use the #nav link tag. This tells the browser to apply styles to the links and makes the entire tab click-able. Type #nav a:link, #nav a:visited {color:#000; background:#b2b580; }
