Styling the Navigation

Topics Covered in This HTML & CSS Tutorial:

Semantically Correct Navigation, Overriding Default List Styles, CSS Navigation Styles, Using Descendant Selectors

Exercise Preview

Exercise Overview

In this exercise, you'll transform a basic list of navigation links into a professional, streamlined navigation bar. Beyond the visual improvements, you'll master descendant selectors—a powerful CSS technique that allows you to target elements based on their hierarchical relationships within the DOM. This approach ensures your styles remain precise and maintainable as your projects grow in complexity.

1. If you completed the previous exercise, sanfran.html should still be open, and you can skip the following sidebar. If you closed sanfran.html, re-open it now. We strongly recommend completing the previous exercises (3B–4B) before proceeding, as they establish the foundation for this lesson. If you haven't finished them, follow the instructions in the sidebar below.

   Before You Begin

   This exercise builds on previous work with sanfran.html. Ensure you have completed exercises 3B-4B or follow the setup instructions to get the necessary files.

Overriding Default List Styles

We've semantically structured our navigation links as an unordered list—the correct approach for accessibility and SEO—but the default bullet points detract from the clean design we're aiming for. Let's eliminate these visual artifacts while preserving the semantic benefits.

1. In sanfran.html, add the following new rule below the existing nav rule:

   nav {
      margin-bottom: 30px;
   }
   ul {
      list-style-type: none;
   }

2. Save the file and preview sanfran.html in Chrome. We'll leverage Chrome's DevTools to examine the underlying structure and spacing issues.
3. The navigation links no longer display bullets, but there are hidden spacing problems we need to address. CTRL–click (Mac) or Right–click (Windows) on any navigation link and choose Inspect.

4. For optimal development workflow, dock the DevTools to the right side of your browser. At the top right of the DevTools panel, click the button and choose Dock to right as shown below:

   

5. In the DevTools, click on and hover over the <ul> tag while observing the colored highlights over the content. You'll see an orange highlight above and below the list and a green highlight to the left. Orange represents the element's margins, while green indicates padding. These default browser styles are adding unwanted whitespace that we need to eliminate for a clean, professional appearance.

   

6. Leave Chrome open for testing, and return to sanfran.html in your code editor.

7. Reset the browser's default spacing by adding the following property declarations to the ul rule:

   ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
   }

8. Save the file, return to Chrome, and reload the page. Now we need to address the layout. Currently, our links are stacked vertically—the default behavior for list items—but modern navigation requires a horizontal layout. By default, list items display as block elements, but we can override this behavior.

9. Return to sanfran.html in your code editor.

10. Add the following new rule below the ul rule to create a horizontal navigation layout:

    ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
    }
    li {
       display: inline;
    }

    Removing Default List Styling

    1

    Remove Bullets

    Add list-style-type: none to eliminate default bullet points from navigation lists

    2

    Reset Spacing

    Set margin: 0 and padding: 0 to remove browser default spacing that creates unwanted gaps

    3

    Inspect Results

    Use Chrome DevTools to visualize margin (orange) and padding (green) highlights around elements

Using Descendant Selectors

The rules we've just written (ul and li) work correctly for this page, but they're too broad in scope. If we add other unordered lists to our site—for content organization, feature lists, or footer links—they would inherit these navigation-specific styles. This violates the principle of CSS specificity and could create maintenance headaches. Let's implement descendant selectors to ensure these styles only affect our navigation.

1. Return to sanfran.html in your code editor.

2. Scroll down to examine the HTML structure of our navigation (located just after the opening body tag):

   <nav>
      <ul>
         <li><a href="sanfran.html">Featured Location</a></li>

   Code Omitted To Save Space

   <li><a href="contact.html">Contact</a></li>
      </ul>
   </nav>

   Notice the hierarchical relationship: the <nav> element contains a <ul>, which contains multiple <li> elements. We can leverage this parent-child relationship in our CSS selectors to create precise, maintainable styles that only affect navigation elements.

3. Scroll up to your styles and add nav before the ul and li selectors, as shown in bold below. The space after "nav" is crucial—it defines the descendant relationship:

   nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
   }
   nav li {
      display: inline;
   }

   These are called descendant selectors, and they're fundamental to writing scalable CSS. The selector nav ul targets only unordered lists that exist inside nav elements. Similarly, nav li affects only list items within navigation. This specificity prevents style conflicts and makes your code more predictable and maintainable.

4. Save the file, return to Chrome, and reload the page to verify that the visual appearance remains unchanged. While the result looks identical, this code improvement is crucial for maintaining clean, conflict-free stylesheets as your project grows.

5. Now let's examine the user experience. Hover over the navigation links and pay attention to how precisely you must position your cursor to see the pointer cursor that indicates a clickable link. Currently, the clickable area is limited to the exact text dimensions. In professional web development, we expand this area to improve usability—especially important for mobile users and accessibility.

Increasing the Clickable Area of the Navigation Links

1. Return to sanfran.html in your code editor.

2. To visualize the clickable area, let's temporarily add a background color to the links. Below the nav li rule, add the following new rule:

   nav a {
      background-color: #000;
   }

3. Save the file and reload the page in Chrome. The black background reveals the current clickable area—notice how it's confined to just the text itself.
4. Return to sanfran.html in your code editor.

5. Expand the clickable area by adding padding:

   nav a {
      background-color: #000;
      padding: 10px;
   }

6. Save the file and reload the page in Chrome.
7. The black background now extends beyond the text, indicating a larger clickable area.
8. Test the improved usability by hovering over the expanded link areas—you'll find them much easier to target.
9. However, there's a CSS rendering issue we need to investigate. Let's use DevTools to examine this problem. CTRL–click (Mac) or Right–click (Windows) on a navigation link and choose Inspect.
10. Resize the browser window (or adjust the DevTools panel) to force the navigation links to wrap onto two lines.
11. Notice how the second row of links overlaps and obscures the top row—this is unacceptable for a professional website!

12. In the DevTools, click on an <a> tag within the navigation and examine its computed styles. Toggle the padding property on and off by clicking its checkbox:

    

    You'll observe that padding increases horizontal spacing between links but doesn't properly affect vertical spacing. This limitation occurs because anchor elements are inline by default, and inline elements don't respond to vertical spacing modifications in the way you'd expect.

13. Ensure the padding property remains enabled (checked) before continuing.

14. Also toggle the background-color property to see how the overlapping becomes more obvious when visible. The overlapping occurs because inline elements are designed to flow with text content and don't create proper vertical space for layout purposes.

15. Return to sanfran.html in your code editor.

16. Fix the display issue by changing how the links render. Add the display property to the nav a style:

    nav a {
       background-color: #000;
       padding: 10px;
       display: inline-block;
    }

    The inline-block value combines the best aspects of both display types: links flow horizontally like inline elements but respond to vertical spacing like block elements. This hybrid approach is essential for creating professional navigation interfaces.

17. Save the file and reload the page in Chrome. The overlapping issue is resolved—the second line of links now displays properly below the first line with appropriate spacing.
18. Return to sanfran.html in your code editor.

19. Now that we understand how inline-block and padding interact, remove the temporary background color. Delete the background-color line from the nav a style:

    nav a {
       padding: 10px;
       display: inline-block;
    }

20. Let's also apply professional typography standards to make the navigation more polished. Add the following properties:

    nav a {
       padding: 10px;
       display: inline-block;
       font-size: 13px;
       text-transform: uppercase;
    }

    The smaller font size and uppercase text create a more refined, professional appearance that's common in modern web design.

Adjusting the Surrounding Space

With the addition of 10px padding on all sides of our navigation links, we've inadvertently increased the overall spacing around the navigation area. Professional web design requires precise control over whitespace, so let's adjust the surrounding margins to maintain the intended visual hierarchy.

1. Return to sanfran.html in your code editor.

2. Reduce the bottom margin of the navigation to compensate for the added padding. Locate and edit the nav rule:

   nav {
      margin-bottom: 20px;
   }

3. Also adjust the header spacing to maintain consistent vertical rhythm throughout the page. Edit the header rule's margin:

   header {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
   }

4. Save the file and reload Chrome to see the improved spacing. The content now maintains proper visual balance and hierarchy.

   Our navigation is taking shape, but there are additional refinements we'll tackle in the next exercise, such as standardizing link colors across all states (ensuring visited links don't stand out differently) and adding hover effects for better user feedback.

5. Keep sanfran.html open in both your browser and code editor—you'll continue working with this file in the next exercise where we'll add the finishing touches to create a truly professional navigation experience.