CSS – 05 HTML Lists

Unordered Lists

UNORDERED LIST – The Basic Unordered List is an HTML element used to create a list of items without numbering them. It is often used for menus, navigation, and lists that don’t require numbering. Lists can be styled using CSS, allowing you to customize the appearance of the list. It is also a useful tool for organizing information in a way that makes it easier to read and understand.

The Unordered List can be found in many places, such as websites, apps, and even printed materials. You would expect to see a Unordered List in places where there are multiple items that need to be organized in an easy-to-read format. The Solid Circle Bullet, Outline Circle Bullet, and Square Bullet are the most basic of the HTML/CSS bullets.

Ordered Lists

CSS Counters

Automatically Number Elements with CSS Counters. While not completely clear from the example, the CSS Counters method to me is very powerful (give me five minutes in the future to dig deeper into CSS Counters and creating some some creative options using the method).

Properties

• counter-reset – Reset or initialize your counter.
• counter-increment – Increment the variable of an already initialized counter.
• counter()– used inside the content property to add up the counts.
• counters() – used for inherited counting, and generates the counter variable.
• content – Add up the count value (string)

This is a fun example of using the CSS Counters with increases in increments of 10 with 🍅🥫🥣 emojis insert before the bullet item.