CSS Navigation Menu: Basic

CSS Navigation Menu: Basic

Creating a Navigation Menu using CSS is not hard when you know the basic steps involved. In this basic tutorial we’ll go through the necessary code; both HTML and CSS, you’ll need to understand to build this navigational menu and others like it. We’ll also show you an easy way to add a highlighted state to your navigational item.

Step 2: Create a CSS file

Create a CSS file and be sure that the CSS is linked in the head of your HTML file.

<link href="style.css" rel="stylesheet" type="text/css" />

Step 3: Add basic CSS

Zero out your margins and padding using the * (universal selector type) and zero out the top and left margins of your body. The header has a defined height and a background image with a bit of gradient.

The div named “nav” is positioned with some padding, margin, given a width, and is floated to the left.