CSS-ohjeet:

  ul.merkit1 {
    list-style-type: circle;
	color: #e6005c;
  }
  ul.merkit2 {
    list-style-type: square;
	color: #b300b3;
  }
 
 
  HTML-koodaus:

  <ul class="merkit1">
   <li>Appelsiini</li>
   <li>Banaani</li>
   <li>Mandariini</li>
  </ul>

  <ul class="merkit2">
   <li>Coca Cola</li>
   <li>Pepsi</li>
   <li>Sprite</li>
  </ul>
  

  CSS-ohjeet:

  ol.numero1 {
    list-style-type: upper-roman;
	color: #e6005c;
  }
  ol.kirjain1 {
    list-style-type: lower-alpha;
	color: #b300b3;
  }
 
 
  HTML-koodaus:

  <ol class="numero1">
   <li>Appelsiini</li>
   <li>Banaani</li>
   <li>Mandariini</li>
  </ol>

  <ol class="kirjain1">
   <li>Coca Cola</li>
   <li>Pepsi</li>
   <li>Sprite</li>
  </ol>
  

  CSS-ohjeet:

  ul.kuvapiste {
    list-style-image: url('oranssi_nelio.png');
  }
  li.oranssi{
    color: RGB(225,90,0);
  }
 
 
  HTML-koodaus:

  <ul class="kuvapiste">
   <li class="oranssi">Coca Cola</li>
   <li>Pepsi</li>
   <li>Sprite</li>
  </ul>
  

  CSS-ohjeet:

  ul {
    list-style: square inside url("oranssi_nelio.png");
  }
  

  CSS-ohjeet:

  ul.ulkona {
    list-style-position: outside;
  }
  ul.sisalla {
    list-style-position: inside;
  }

 
  HTML-koodaus:
  
  <h3 style="color: RGB(0,128,128)"> Asetuksena outside </h3>
  <div style="color: RGB(0,128,128)">
   <ul class="ulkona">
    <li>Coca Cola - Coca-Colaa on myyty Yhdysvalloissa vuodesta 1886 lähtien. 
       Sen kehitti atlantalainen farmaseutti John Pemberton lääkkeen 
	   kaltaiseksi piristeeksi.</li>
    <li>Pepsi - Vuonna 1893 Pohjois-Carolinasta kotoisin oleva apteekkari 
       Caleb Bradham ryhtyi valmistamaan vedestä, sokerista, vaniljasta, 
	   harvinaisista öljyistä sekä kolapähkinöistä kehittämäänsä uutta juomaa, 
	   joka tunnettiin nimellä "Brad's Drink".</li>
    <li>Sprite - Sprite on yhdysvaltalaisen The Coca-Cola Companyn rekisteröimä 
       ja valmistama sitruunan- ja limetinmakuinen virvoitusjuoma. Se esiteltiin 
	   tällä nimellä Yhdysvalloissa ensimmäisen kerran vuonna 1961.</li>
   </ul>
  </div>
  
  <h3 style="color: RGB(128,0,255)"> Asetuksena inside </h3>
  <div style="color: RGB(128,0,255)">
   <ul class="sisalla">
    <li>Coca Cola - Coca-Colaa on myyty Yhdysvalloissa vuodesta 1886 lähtien. 
       Sen kehitti atlantalainen farmaseutti John Pemberton lääkkeen 
	   kaltaiseksi piristeeksi.</li>
    <li>Pepsi - Vuonna 1893 Pohjois-Carolinasta kotoisin oleva apteekkari 
       Caleb Bradham ryhtyi valmistamaan vedestä, sokerista, vaniljasta, 
	   harvinaisista öljyistä sekä kolapähkinöistä kehittämäänsä uutta juomaa, 
	   joka tunnettiin nimellä "Brad's Drink".</li>
    <li>Sprite - Sprite on yhdysvaltalaisen The Coca-Cola Companyn rekisteröimä 
       ja valmistama sitruunan- ja limetinmakuinen virvoitusjuoma. Se esiteltiin 
	   tällä nimellä Yhdysvalloissa ensimmäisen kerran vuonna 1961.</li>
   </ul>
  </div>
  

  CSS-ohjeet:

  ul.esto {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
 
 
  HTML-koodaus:
  
  <div style="color: RGB(128,0,255)">
   <ul class="esto">
    <li>Coca Cola</li>
    <li>Pepsi</li>
    <li>Sprite</li>
   </ul>
  </div> 
  

  CSS-ohjeet:

  ol {
    border: 1px solid blue;
    padding: 20px;
  }
  ol li {
    background: RGB(234,231,245);
    padding: 5px;
    margin-left: 35px;
  }
  ul {
    background: RGB(234,231,245);
    padding: 20px;
  }
  ul li {
    background: #cce5ff;
    margin: 5px;
  }
  ul.reuna {
    border-left: 7px solid RGB(111,86,192);
    background-color: #f1f1f1;
    list-style-type: none;
    padding: 10px 20px;
	width: 50%
  }
 
 
  HTML-koodaus:
  
  <ol>
   <li> Coca Cola </li>
   <li> Pepsi </li>
   <li> Sprite </li>
  </ol>

  <ul>
   <li> Coca Cola </li>
   <li> Pepsi </li>
   <li> Sprite </li>
  </ul>

  <ul class="reuna">
   <li> Ford </li>
   <li> Jaguar </li>
   <li> Lotus </li>
  </ul>  
  

  CSS-ohjeet:

  .teksti{
    color: RGB(127,255,212);
  }
  ul {
    list-style-type: none;
    padding: 0;
    border: 1px solid Coral;
    /* listan ulkoviiva */
  }

  ul li {
    padding: 8px 16px;
    background: RGB(106,90,205);
    border-bottom: 1px solid Coral;
    /* listan sisällä li-elementtien väliin viiva */
  }
  ul li:last-child {
    border-bottom: none
  }
 
 
  HTML-koodaus:

  <ul class="teksti">
   <li> Maybach </li>
   <li> Infinity </li>
   <li> Lotus </li>
  </ul>