This project will help you practice CSS by applying real-world styling techniques. Along the way, we will focus on essential layout and responsive design concepts. In this project, we use an external CSS file to style the HTML document; you can see two files: the HTML file and the linked CSS file, which has already been connected for you. By the end of this section, your webpage will look approximately like this:

Follow the steps below to style the navigation menu:

Select the element with the class .menu
Apply styles to make it fixed at the top of the page.
Set a background color to make it stand out.
Add padding to give some space inside the menu.
Set top and left to 0 so the menu stays at the top of the page while scrolling.
Make the menu take up the full width of the page.
Set the z-index property to 100 to ensure it stays on top.

Style the links inside the menu a:

Remove the default underline from the links using text-decoration: none;.
Apply a font-weight of bold to make the links clear and easy to read.
Add margin to space out the links evenly.
Set a text color that contrasts well with the background for good readability.

Try it yourself

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="menu">
            <a href="#">About</a>
            <a href="#">Experience</a>
            <a href="#">Contact</a>
        </nav>    
        <header class="welcome">
            <h1>Swim with Whales in Tonga</h1>
            <p>Experience the magic of swimming alongside majestic humpback whales.</p>
        </header>    
        <section class="about">
            <h2>About Tonga</h2>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
            <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
        </section>     
        <section class="contact">
            <h2>Plan Your Adventure</h2>
            <table>
                <tr>
                    <td>Phone Number</td>
                    <td>+676 123 4567</td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>info@tongawhales.com</td>
                </tr>
            </table>
    </section>
</body>
</html>