CSS Navigation bar

Creating a navigation bar with CSS involves styling a list of links, typically wrapped in an HTML <nav> element. The navigation bar is often placed at the top or side of a webpage to provide easy access to different sections or pages of the site. Below is a basic example of how you can create a horizontal navigation bar using CSS:

HTML:

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item"><a href="#">Services</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

/* Reset default list styles */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Style the navigation bar */
.navbar {
  background-color: #333;
  height: 50px;
  display: flex;
  justify-content: center;
}

/* Style each navigation item */
.nav-item {
  padding: 15px 20px;
}

/* Style the links */
.nav-item a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Change link color on hover */
.nav-item a:hover {
  color: #ffcc00;
}

In this example, we use a flexbox layout to center the navigation items horizontally. The links are styled with a background color, padding, and bold font weight. The :hover pseudo-class is used to change the link color when the mouse hovers over it.

You can further customize the navigation bar to fit your design needs by adjusting the colors, fonts, sizes, and other styles. Additionally, you can explore different CSS layout techniques to create vertical navigation bars or other variations.

Remember to apply appropriate accessibility considerations when designing navigation bars, such as providing clear and descriptive link text and using semantic HTML elements to aid screen readers and other assistive technologies.