×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


CSS Navigation bar



Navigation-bar is nothing but just the list of links vertically or horizontally which gives a great look to our webpage. Navigation-bar can create also through <ul> and <li>elements in HTML and styling we can do here through by CSS only. And this navigation-bar can be in vertical or horizontal position.



Vertical navigation-bar


Here the navigation-bar we can create in vertical position through HTML elements and styling we will give through CSS.

Let's understand this by following program:-



<!DOCTYPE html>

<html>

<head>

<style>

ul {

      list-style-type:none;

}

li a {

      display:block;

      width:80px;

      background-color:white;

}

</style>

</head>

<body>

<p> Navigation vertically </p>

<ul>

  <li> <a href="#"> HOME </a> </li>

  <li> <a href="#"> NEWS </a> </li>

  <li> <a href="#"> CONTACT </a> </li>

  <li> <a href="#"> SUPPORT </a> </li>

</ul>

</body>

</html>


Output of the Program



Navigation vertically



So this is how we can create navigation-bar vertically.




Horizontal navigation-bar


Here the navigation-bar we can create in horizontal position through HTML elements and styling we will give through CSS.

Let's understand this by following program:-



<!DOCTYPE html>

<html>

<head>

<style>

ul {

      list-style-type:none;

}

li a {

      display:inline;

      background-color:white;

}

</style>

</head>

<body>

<p> Navigation horizontally </p>

<ul>

   <li> <a href="#"> HOME </a> </li>

   <li> <a href="#"> NEWS </a> </li>

   <li> <a href="#"> CONTACT </a> </li>

   <li> <a href="#"> SUPPORT </a> </li>

</ul>

</body>

</html>


Output of the Program



Navigation horizontally



So this is how we can create navigation-bar horizontally.











CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute