CSS Lists – HostCoder

Lists are fundamental for structuring content on a webpage. In this tutorial, you’ll learn how to style HTML lists using CSS to enhance their appearance and usability.

HTML Lists

There are three types of lists in HTML:

Ordered Lists (ol): Numbered lists.
Unordered Lists (ul): Bullet-point lists.
Definition Lists (dl): Lists with terms and their definitions.

<ol>

</ol>

<ul>

</ul>

<dl>

<dd>Definition 1</dd>

<dd>Definition 2</dd>

</dl>

Styling Lists

Basic List Styling

/* Remove list styles */

ul, ol {

list-style: none;

}

/* Add custom list styles */

li {

padding: 5px;

margin: 5px;

border: 1px solid #333;

}

Custom Bullet Styles

/* Change bullet style */

ul {

list-style-type: square;

}

ol {

list-style-type: lower-roman;

}

Horizontal Lists

/* Display list items horizontally */

ul.horizontal {

display: flex;

flex-direction: row;

}

ul.horizontal li {

margin-right: 10px;

}

Advanced List Styling

Nested Lists

/* Style nested lists */

ul ul {

list-style-type: circle;

}

ul ul ul {

list-style-type: square;

}

Custom Icons for Lists

/* Custom icons for list items */

ul.custom-icons li::before {

content: "\2022"; /* Bullet character */

margin-right: 10px;

}

ol.custom-icons li::before {

content: counters(item, ".") ". ";

counter-increment: item;

}

Exercises

Create an ordered list with custom Roman numerals (I, II, III, IV).
Style a nested list within an unordered list.
Experiment with different list-style-type values for both ul and ol elements.

Conclusion

In this tutorial, you’ve learned how to style HTML lists using CSS. You can customize list markers, create horizontal lists, and apply styles to nested lists. The knowledge you’ve gained will help you design attractive and functional lists for your web projects. Keep practicing and experimenting to become a CSS list styling pro!