Creating Your First CSS Website (Part 2)

In the first part of this tutorial, you learned how to design a modern header for a website using CSS.  In this part of this step by step tutorial, you will find the instructions that teach how to create a modern navigation menu!

1. If you have not taken part one of this tutorial, you should consider going to take it now.  Our current code looks like this:

2. Insert the following classes into your CSS Styles:

3. The first class is the class that will effect our table we call "main".  It will make the table expand to take up the entire height of the display.  Our classes after this are all classes for our table cell that contains our left navigation (hence "leftnav").  We can apply this as follows:

4. We began by making a table, and calling it "main".  We then created a new row (<tr>), and then a cell following the styles in "leftnav" class.    After this cell was created we used "<div class="header">Menu 1</div>" so that it follows the style of the header class.  So why doesn't this use the first header class we made?  Because we are in the cell called "leftnav", we can create classes that can only be used in here.  We did this in our classes by typing "td.leftnav div.header { style properties }".  Our full code should now look like this:

5. Save, and open in your web browser.  Your left navigation menu should now look like this:

You have now completed Part 2 of Designing a website with CSS. 

Continue to part 3 to learn how to design the main content area of your website!