Creating and styling lists

There are two main types of lists, ordered (numbered) and unordered (bulleted).

Here is an ordered list:

1. tuna
2. salmon
3. crab
4. yellowtail

<ol>
    <li>tuna</li>
    <li>salmon</li>
    <li>crab</li>
    <li>yellowtail</li>
</ol>

Here is an unordered list:

• tuna
• salmon
• crab
• yellowtail

<ul>
    <li>tuna</li>
    <li>salmon</li>
    <li>crab</li>
    <li>yellowtail</li>
</ul>

Nesting lists

You can nest a list inside of another list to designate a sub-list.

• sushi
• california roll
• spicy salmon roll
• french fries
• crinkle-cut
• curly

<ul>
    <li>sushi</li>
    <ul>
        <li>california roll</li>
        <li>spicy salmon roll</li>
    </ul>
    <li>french fries</li>
    <ul>
        <li>crinkle-cut</li>
        <li>curly</li>
    </ul>
</ul>

It's possible to nest them in many different ways. You can put an ordered list inside of an unordered list, and vice versa.

Styling lists

You can customize lists pretty extensively with CSS.

To display a list with no bullets, you must apply this property to the ul element:

list-style:none;

You can also use CSS to set a custom emoji or symbol as the bullet.

• tuna
• salmon
• crab
• yellowtail

Both of the examples below are same, but the first uses the unicode reference. Also, we add a space at the end to give it some room:

list-style: "\1F319 ";
list-style:"🌙 ";

You can also use an image, if you'd like:

list-style: url('image.jpg');

• tuna
• salmon
• crab
• yellowtail