Search code examples
htmlcsshtml-lists

How to Bold both number and list on HTML (OL LI) without getting the sub list getting affected?

I am trying to make a list like this picture, but I think I can't get it right.

enter image description here

I was able to bold only the list but I couldn't bold the number generated by using , also I want to know how to get the exact result on like on the picture.

Here is my code :

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pertemuan 03</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h4 {
      text-decoration: underline;
    }
    
    .italic {
      font-style: italic;
    }
    
    ul li,
    ol li {
      text-indent: 20px;
      padding-bottom: 3px;
    }
  </style>
</head>

<body>
  <h4>Menu:</h4>
  <ol>
    <li>
      <b>Makanan:</b>
      <ol type="A">
        <li>Nasi Kuning</li>
        <li>Nasi Uduk</li>
        <li>Nasi Goreng</li>
      </ol>
    </li>
    <li>
      <b>Lauk:</b>
      <ul type="disc">
        <li>Tahu Goreng</li>
        <li>Tempe Goreng</li>
        <li>Orek Tempe</li>
        <li>Cah Kangkung</li>
      </ul>
    </li>
    <li>
      <b>Sayur:</b>
      <ol type="a">
        <li>Sayur Asem</li>
        <li>Soto Ayam</li>
        <li>Sop Iga Sapi</li>
      </ol>
    </li>
    <li>
      <b>Minuman:</b>
      <ol type="A">
        <li>
          <i>Minuman Dingin:</i>
          <ol type="i">
            <li>Es Teh Manis</li>
            <li>Es Jeruk</li>
            <li>Es Campur</li>
          </ol>
        </li>
        <br>
        <li>
          <i>Minuman Panas:</i>
          <ol type="i">
            <li>Kopi Hitam</li>
            <li>Lemon Tea</li>
            <li>Hot Chocolate</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

I am sorry if this question are confusing, because i cant explain it well

Solution

  • Now this code displays exactly the same as your picture

    <!DOCTYPE html>
<html lang="en">

<head>
<title>Pertemuan 03</title>
<style>
body {
  font-family: sans-serif;
}

h4 {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

ol {
    font-weight: lighter;
    
    

}

ul {
    font-weight: lighter;
    
}

.main-list{
    text-indent: 20px;
   
    
    

}
.main-list > li::before {
  content: none;
}

.main-list > li {
  font-weight: bold;
  padding-left: 16px;
  padding-bottom: 10px;
  
}
</style>
</head>

<body>
<h4>Menu:</h4>
<ol class="main-list">
 <li><b>Makanan:</b>
  <ol type="A">
    <li>Nasi Kuning</li>
    <li>Nasi Uduk</li>
    <li>Nasi Goreng</li>
  </ol>
 </li>
 <li><b>Lauk:</b>
   <ul type="disc">
    <li>Tahu Goreng</li>
    <li>Tempe Goreng</li>
    <li>Orek Tempe</li>
    <li>Cah Kangkung</li>
  </ul>
 </li>
 <li><b>Sayur:</b>
  <ol type="a" >
    <li>Sayur Asem</li>
    <li>Soto Ayam</li>
    <li>Sop Iga Sapi</li>
  </ol>
 </li>
 <li><b>Minuman:</b>
  <ol type="A">
    <li>
      <i>Minuman Dingin:</i>
      <ol type="i" >
        <li>Es Teh Manis</li>
        <li>Es Jeruk</li>
        <li>Es Campur</li>
      </ol>
    </li>
    <br>
    <li>
      <i>Minuman Panas:</i>
      <ol type="i" >
        <li>Kopi Hitam</li>
        <li>Lemon Tea</li>
        <li>Hot Chocolate</li>
      </ol>
    </li>
  </ol>
 </li>
 </ol>
 </body>

 </html>