CSS Navigation

A navigation bar, or navbar for short, is an important part of any website. It helps users navigate to different sections of the website quickly and easily. In this chapter, we will discuss how to create a simple navigation bar using CSS.

HTML Markup

Let's start by creating the HTML markup for our navbar. We will use an unordered list (<ul>) to create the list of links. Each link will be a list item (<li>) inside the <ul> element.

<nav>
 <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
 </ul>
</nav>

CSS Styling

Now let's style our navbar using CSS. We will set the background color, font size, font family, and other properties for the navbar and its links. Here's the CSS code:

nav {
 background-color: #333;
 font-size: 18px;
 font-family: Arial, sans-serif;
}
nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
}
nav li {
 margin: 0 10px;
}
nav a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 10px;
 transition: background-color 0.5s;
}
nav a:hover {
 background-color: #555;
}

Explanation

• nav selector sets the background color, font size, and font family of the navbar.
• nav ul selector sets the list style to none, removes the margin and padding, and displays the list items horizontally using display: flex.
• nav li selector sets the margin between list items.
• nav a selector styles the links by setting their color, padding, and removing the underline using text-decoration: none.
• nav a:hover selector styles the links when the mouse hovers over them by changing the background color.

In this chapter, we learned how to create a simple navigation bar using HTML and CSS. By using the ul and li elements, we created a list of links and styled them using CSS. We also learned how to use the flex property to display the list items horizontally. With a few more styling tweaks, you can create a beautiful navigation bar for your website.