<!DOCTYPE html>    
<html>   
   <head>   
   <title>CSS Lists</title>  
      <style>   
      .order{  
        list-style: upper-alpha;  
        background: pink;  
        padding:20px;  
      }  
      .order li{  
      background: lightblue;  
      padding:10px;  
      font-size:20px;  
      margin:10px;  
      }  
      .unorder{  
        list-style: square inside;    
        background: cyan;  
        padding:20px;  
      }  
      .unorder li{  
      background: green;  
      color:white;  
      padding:10px;  
      font-size:20px;  
      margin:10px;  
      }  
  
      </style>   
   </head>   
   <body>   
      <h1>   
         Selamat datang di Mbah WP
      </h1>   
            <h2>   
         Ordered Lists   
      </h2>   
      <ol class="order">   
         <li>SATU</li>   
         <li>DUA</li>   
         <li>TIGA</li>   
      </ol>   
      <h2>   
         Unordered lists   
      </h2>   
      <ul class="unorder">   
         <li>SATU</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.