Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

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.

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


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;



  • 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.