CSS Lists


Go to main Page

Lists in CSS

Thre are three types of lists as we have discussed already in HTML.

  1. Ordered list (For this we use ol tag).
  2. Unordered list (For this we use ul tag).
  3. Description list (For this we use dt tag).
Lets style unordered list and make Navigation Bar


<!DOCTYPE html>
<html>
<head>
  <title>document</title>
  <style type="text/css">
    *{ /*universal selector*/
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;

    }
    a{
      text-decoration: none;
      float: left;
      padding: 30px;
      color:orange;
    }
    a:hover{
      color:black;
    }
    


  </style>
</head>
<body>

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

</body>
</html>




Now lets style Ordered list


<!DOCTYPE html>
<head>
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        text-align: center;
        font-family: sans-serif;
    }
    h5{
        color: darkblue;

    }
    li{
        color:darkorchid;
    }
</style>
</head>
<body>
    <h5>List of my skills</h5>
    <br><br><br>
    <ol>
        <li>Web Development</li>
        <li>Graphics Designing</li>
        <li>Video Editing</li>
        <li>Youtube SEO</li>
    </ol>
</body>
</html>



Note:We can add more properties like margin and padding.