How To Create and Style HTML List – Simple Examples

Welcome to a quick tutorial on how to create and style HTML lists. Just started with HTML lists? Wondering how people do all sorts of crazy layouts using lists? Well, I am going to condense all of the common examples in this guide, so you don’t have to look everywhere – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes List Examples Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

HTML CSS LIST EXAMPLES

All right, let us now get into the common examples of HTML CSS lists.

 

1) BASIC ORDERED & UNORDERED LISTS

1-basic.html
<!-- (A) UNORDERED LIST -->
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
 
<!-- (B) ORDERED LIST -->
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
  • First
  • Second
  • Third
  1. First
  2. Second
  3. Third

For you guys who somehow missed out on the basics, lists are very straightforward in HTML.

  • <ul> Unordered lists (bullet points).
  • <ol> Ordered lists (in numeric or alphabetic running order).
  • <li> List items.

 

 

2) NESTED LISTS

2-nested.html
<ol>
  <li>First</li>
  <li>
    Second
    <ul>
      <li>Third</li>
      <li>Forth</li>
    </ul>
  </li>
</ol>
  1. First
  2. Second
    • Third
    • Forth

Want to add “sub-points” to a list? Yes, we can create nested lists, just put a list inside a list.

 

3) LIST – BULLET STYLES

3-bullet-style.html
<!-- (A) LIST BULLET STYLES -->
<style>
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ol.decimal { list-style-type: decimal; }
ol.roman { list-style-type: upper-roman; }
ol.gregorian { list-style-type: georgian; }
ul.none, ol.none { list-style-type: none; }
</style>
 
<ul class="disc"><li>Disc</li></ul>
<ul class="circle"><li>Circle</li></ul>
<ul class="square"><li>Square</li></ul>
<ol class="decimal"><li>Decimal</li></ol>
<ol class="roman"><li>Roman</li></ol>
<ol class="gregorian"><li>Gregorian</li></ol>
<ul class="none"><li>None</li></ul>
  • Disc
  • Circle
  • Square
  1. Decimal
  1. Roman
  1. Gregorian
  • None

This should be self-explanatory, we can control the bullet style using list-style-type and there are a ton of them – Circle, disc, square, decimal, Roman numeric, Chinese, Gregorian, and more. There are too many to list here, I will leave a link in the extras section below to the full reference.

 

 

4) LIST WITH NO BULLETS

4-no-bullet.html
<style>
.nobullet {
  list-style-type: none; 
  padding: 0;
  margin: 0;
}
</style>

<ul class="nobullet">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
  • First
  • Second
  • Third

This is a quick follow-up to the previous example. To create a list with no bullets, remove the bullets using list-style-type: none and also remove the indentation with padding: 0; margin: 0;

 

5) LIST COLORS & BORDERS

5-color-border.html
<style>
/* (A) FOR THE OUTER <UL> */
.colborder {
  background: lightgreen;
  margin: 10px;
  border: 2px solid darkgreen;
  padding: 10px;
  list-style-type: none;
}
/* (B) FOR ALL THE <LI> */
.colborder li {
  color: black;
  background: lightyellow;
  margin: 10px;
  border: 2px solid darksalmon;
  padding: 10px;
}
</style>
 
<ul class="colborder">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
  • First
  • Second
  • Third

Now that we have a list without bullets, how do we add colors and boxes around it? The answer – CSS box model.

  • It will be easier to think <ul> as a big box, and <li> are smaller boxes inside the <ul>.
  • But the structure of the boxes is the same, there are “4 layers” to each box.
    • In the middle is the text/content.
    • Followed by padding around the content.
    • A border around the box.
    • Lastly, blank margin spacing around each box.

 

 

6) LIST INDENTATION

6-indentation.html
<style>
.indentlist {
  padding-left: 5px;
  margin: 0;
  list-style-position: inside;
}
</style>
 
<ul class="indentlist">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
  • First
  • Second
  • Third

Remember the box model from a minute ago? That’s right – Just use padding-left to control the indentation of the list. You might also want to add list-style-position: inside if the bullet points appear broken.

 

7) CENTER LIST

7-center.html
<style>
.centerlist {
  /* THIS CENTERS THE LIST */
  margin: 0 auto;
  /* OPTIONAL */
  width: 500px; 
  background: lightcyan;
  list-style-type: none;
}
.centerlist li { text-align: center; }
</style>
 
<ul class="centerlist">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
  • First
  • Second
  • Third

To center the entire list on the page, add margin: 0 auto. To center the text of the list items, simply add text-align: center.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *