Portfolio: Navigation

Styling the Navigation Links

Now that we've styled the list so that it floats in a horizontal line and gave it some additional properties to look like a navigation menu, we will finish up by styling the links.

You may have noticed that we didn't really mess with the font properties while styling the list. When we make a body of text a link, it adds the <a> element to the text, nesting it within the <li> tag. The font properties of the <a> tag overide the font properties of the <li> tag, so this is why we adjust the font properties of the <a> element.

Styling the <a> Tag

  1. Place the cursor in any of the navigation list items
  2. In the Tag Selector at the bottom of the Document Window, Click the <a> tag – the <a> tag should appear to be selected in a bubble (see below image for reference)
  3. Next, Click the New CSS Rule button in the CSS Styles Panel
  4. The New CSS dialogue box opens
  5. In the Selector Name box, you should see "#wrapper #navbar ul li a"
  6. We don't need to include the #wrapper id in this selection, so click the Less Specific button one (1) time
  7. In the Selector box, it should now read "#navbar ul li a" – see image below for reference
  8. Click OK
  9. The CSS Rule Definition for #navbar ul li a dialogue box opens
  10. Select the Type property in the Category column if isn't showing already
  11. In the Font size box, Type "16" and leave the unit at px (pixels)
  12. In the Font weight drop down menu, select "bold"
  13. Click the Color picker box and select white (#FFF)
  14. In the Text Decoration list, check "none"
  15. Next, Select the Block property in the Category column
  16. In the Display drop down menun, select "block"
  17. Select the Box property in the Category column
  18. In the Padding section, UNCHECK the "Same for all" box
  19. Type the following values:
    • Top box – "2" – leave the unit at px (pixels)
      • Note: Depending on the type of default font you used, you may need to play around with the padding value so the navigation list fits squarely inside the navbar <div>. If you notice the text "Content for id "content" goes here" floating to the right in the content <div>, then you will need to reduce the top padding value to 2 pixels
    • Bottom box – "2" – leave the unit at px (pixels)
    • Left and Right – "7" – leave the unit at px (pixels)
  20. Select the Border property in the Category column
  21. UNCHECK the "Same for all box" for each section (Style, Width, Color)
  22. We will add a border for the TOP and RIGHT only
  23. Select "solid" from the Style drop down menu
  24. Type "1" in the Width box – leave the unit at px (pixels)
  25. Click the Color picker and select the light gray (#CCC)
  26. Click OK
  27. Your navigation list should be styled like the image below

Adding Link Interactivity with the Hover Psuedo-class

We're going to add a bit of interactivity to the navigation menu by adding the psuedo-class hover to the <a> tag

  1. Place the cursor in any of the navigation list items
  2. In the Tag Selector at the bottom of the Document Window, Click the <a> tag – the <a> tag should appear to be selected in a bubble (see below image for reference)
  3. Next, Click the New CSS Rule button in the CSS Styles Panel
  4. The New CSS dialogue box opens
  5. In the Selector Name box, you should see "#wrapper #navbar ul li a"
  6. We don't need to include the #wrapper id in this selection, so click the Less Specific button one (1) time
  7. In the Selector box, it should now read "#navbar ul li a"
  8. Place the cursor right after the "a" and type a colon (:) followed by "hover" – see image below for reference
  9. Click OK
  10. The CSS Rule Definition for #navbar ul li a:hover dialogue box opens
  11. Select the Type property in the Category column if isn't showing already
  12. Click the Color picker box and select black (#000)
  13. Select the Background property in the Categroy column
  14. Click the Color picker box for the Background color and Select light gray (#CCC)
  15. Click OK
  16. You won't see anything different in the index.html document until you preview or see it in Live View
  17. Click the Live View Button at the top of the document window, then hover the mouse over the navigation menu – you should see the navigation links change font color and background color!

Next Steps

In the next exercise, you will learn how to create new pages from one that is already designed.

Click here for the next tutorial