<!DOCTYPE html>    
<html>   
   <head>   
   <title>CSS Lists</title>  
      <style>   
      .num{  
        list-style-type:decimal;        
        list-style-position:inside;   
      }  
      .roman{  
       list-style-type:lower-roman;   
       list-style-position:outside;   
      }  
      .circle{  
        list-style-type:circle;   
        list-style-position:inside;  
      }  
      .square{  
        list-style-type:square;   
      }  
      .disc{  
        list-style-type:disc;   
        list-style-position:inside;  
      }  
      </style>   
   </head>   
   <body>   
      <h1>   
         Selamat datang di Mbah WP
      </h1>   
            <h2>   
         Ordered Lists   
      </h2>   
      <ol class="num">   
         <li>INSIDE</li>   
         <li>dua</li>   
         <li>tiga</li>   
      </ol>   
      <ol class="roman">   
         <li>OUTSIDE</li>   
         <li>dua</li>   
         <li>tiga</li>   
      </ol>   
      <h2>   
         Unordered lists   
      </h2>   
      <ul class="disc">   
         <li>INSIDE</li>   
         <li>dua</li>   
         <li>tiga</li>   
      </ul>   
      <ul class="circle">   
         <li>INSIDE</li>   
         <li>dua</li>   
         <li>tiga</li>   
      </ul>   
      <ul class="square">   
         <li>DEFAULT</li>   
         <li>dua</li>   
         <li>tiga</li>   
      </ul>   
  
   </body>   
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.