A complete guide about lists in HTML and CSS

What are lists

A list is a way to represent the collection of data or information. It provides more understanding or insights for the collection of data or information than any other form of representation. For example, a collection of shopping items will give more understanding if it is represented in lists rather than paragraphs format every item separated with a comma.

Lists in HTML

If you want to present data which is a collection of something in your web pages, a  list is a great option to present it and make a user understand the information easier.

Types of lists

In HTML, There are 3 ways by which you can represent any list.

1. Ordered lists
2. Unordered lists
3. Definition lists

What is an ordered list?

An ordered list is a collection of items represented in a definite order. Such a collection of data or information when presented in a definite order makes sense is the best candidate for presenting that information in an ordered list.

Example: Lists of instructions for making a recipe, lists of instructions for making a simple program.

Such kind of lists has to present in an ordered list. If it is not, then the information will lose the actual meaning it wanted to provide. The ordered list is also known as a numbered list.

The ordered list is represented with <ol> tag and <li> tag is used to list items in the ordered list.

code :

html:

<ol>
    <li>Add water in a pan.</li>
    <li>Add sugar, tea leaves, and spices.</li>
    <li>Bring to boil and simmer for a minute or so.</li>
    <li>Add milk.</li>
    <li>Bring to boil and simmer for 3-5 minutes.</li>
    <li>Strain tea in the teapot.</li>
</ol>

result:

1. Add water in a pan.
2. Add sugar, tea leaves, and spices.
3. Bring to boil and simmer for a minute or so.
4. Add milk.
5. Bring to boil and simmer for 3-5 minutes.
6. Strain tea in the teapot.

Default values:

Default style for list item marker of an ordered list is decimal number .

We can change the styling of lists using the list-style-type property of CSS of list item marker of the ordered list.

list-style-type :upper-alpha;

html:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

css:

ol {
    list-style-type:upper-alpha;
}

result:

list-style-type :upper-roman;

html:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

css:

ol {
    list-style-type:upper-roman
}

result:

list-style-type :lower-alpha;

html:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

css:

ol {
    list-style-type:lower-alpha
}

result:

list-style-type :lower-roman;

html:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

css:

ol {
    list-style-type:lower-roman
}

result:

The above properties are the most commonly used values of property list-style-type. There are lots of other values which you can use which is explained in the list-style-type section ofsection.

What is an unordered list?

The unordered list is the lists of items which doesn’t necessarily represent in a particular order. This list is also called as bulleted lists.

For example: shopping lists, to do lists etc.

The unordered list is represented with <ul> tag and list items in <li> tag in the unordered list.

For example:

html:

<ul>
    <li>clothes</li>
    <li>books</li>
    <li>pens</li>
    <li>laptop</li>
    <li>bag</li>
</ul>

result:

• clothes
• books
• pens
• laptop
• bag

Default value:

The default style type of list item marker is disc .

You can change the styling of lists using the list-style-type property of CSS of list item marker of an unordered list.

list-style-type: square;

html:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

css:

ul {
    list-style-type:circle;
}

result:

list-style-type: square;

html:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

css:

ul {
    list-style-type:square;
}

result:

list-style-type: disc;

html:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

css:

ul {
    list-style-type:disc;
}

result:

For more info, go tosection of this article.

What is Definition Lists?

Definition list is that type of list in which list items consists of two elements, first is term and second one is description.It is also known as description lists.

You can create definition lists with <dl> tag, term with <dt> and its description with <dd> tag.

For Example:

html:

<dl>
    <dt>New Delhi</dt>
    <dd>The Capital of India</dd>
    <dt>Washington</dt>
    <dd>The capital of United States</dd>
</dl>

result:

What is nested lists?

Sometimes there comes a situation in which you have to present information inside the list of the list. Such type of presented structure where you make a list of lists is known as a nested list.

For example:

html:

<ul>
    <li>Chapter one
      <ol>
        <li>Section one</li>
        <li>Section two</li>
        <li>Section three</li>
        <li>Section four</li>
      </ol>
    </li>
    <li>Chapter two
        <ul>
            <li>Section one</li>
            <li>Section two</li>
            <li>Section three</li>
            <li>Section four</li>
        </ul>
    </li>
    <li>Chapter three</li>
    <li>Chapter four</li>
</ul>

result:

Style a list

You can style list using these three CSS property.

list-style-type

As you know from the explanation from top of this article, list style type is the property of CSS which is used to do styling for list items marker.

This property have several values and here is list of those values

• disc
• square
• circle
• decimal
• lower-alpha
• lower-roman
• lower-latin
• lower-greek
• upper-alpha
• upper-roman
• upper-latin etc…

Here is the complete list of values of list-style-type.

list-style-image;

list-style-image is used to set an image as a list image marker. This property has two values, one is url of image and second one is none .

For example:

html:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
</ul>

css:

ul {
    list-style-image:url('https://image.flaticon.com/icons/svg/1420/1420462.svg');
}

result:

Another value is none .

list-style-position

The list-style-position CSS property sets the position of the list item marker relative to a list item. The list-style-position have two values – inside and outside

value– inside

The list style marker is the first element among the list item’s contents.

html:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
</ul>

css:

ul {
    list-style-position:inside;
}

li {
  background-color:grey;
}

result:

value– outside

The list item marker is outside the principal block box.

html:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ul>

css:

ul {
    list-style-position:outside;
}

li {
  background-color:grey;
}

result:

Play with colors in list:

Now its time to play with colors in lists.

Colored unordered or bulleted Lists:

case 1: same color of list item and list item marker

html:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
<ul>

css:

ul {
    color:red;
}

result:

case 2: different color of list item and list item marker

html:

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
</ul>

css:

ul {
    list-style-type:none;
    color:blue;
} 
li::before {
  content: "\2022"; 
  color: red;
  display: inline-block; 
  width: 1rem;
  margin-left: -1rem;    
}

result:

Colored numbered list

Now its time to color the number lists.

case 1 : Same color for list item text and list item marker

html:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ol>

css:

ol {
 color: red;
}

result:

case 2: different color of list item and list item marker

html:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ol>

css:

ol {
  list-style-type:none;
  color:green;
  counter-reset:li
}

li::before{
  content: counter(li)'.'; 
  color: red;
  display: inline-block; 
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em; 
  text-align: right; 
  direction: ltr
}

li {counter-increment: li}

result: