Mastering HTML Ordered Lists and Customizing them with CSS

When it comes to organizing information on the web sequentially, ordered lists are our perfect allies. HTML provides us with the tag

For this purpose, however, we often want to go beyond simple enumeration. Here we'll explore how to create ordered lists and how to give them a custom touch with CSS.

Table of Contents

Toggle

What is Label

in HTML?

In the tangle of code that makes up a web page, tags are the fundamental building blocks. The label

, short for "ordered list," allows you to create a list of items that follow a sequential order. Each item within the list is marked with a tag
1. (list item), creating a clear and easy-to-follow structure for both users and machines.

   Basic ordered list example:

   First item
    Second item
    Third item

   This example will produce a list automatically numbered by the browser, starting at 1 and increasing consecutively with each item.

   Customizing Ordered Lists with CSS

   The default visual style of an ordered list is functional, but it may not align with the aesthetics of our website. This is where CSS comes into play to allow us to give our lists a unique look and feel in tune with the overall design of the site.

   Changing Marker Type

   Perhaps the default numbering style is not to our liking or does not fit our needs. Through ownership list-style-type, we can change the numbers to letters, Roman numerals and other options.

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

   Setting a Custom Counter

   CSS allows us to go a step further with custom counters, adding a layer of flexibility in the presentation of our lists.

   ol { counter-reset: my-counter; } li { counter-increment: my-counter; } li::before { content: "Section " counter(my-counter) ". "; }

   Aligning and Placing Numbers or Markers

   Controlling the position of numbers or markers in relation to list items can significantly improve the readability of the list.

   ol { list-style-position: inside; }

   Or, for a more refined alignment:

   li::before { display: inline-block; width: 2em; margin-left: -2em; text-align: right; content: counter(my-counter) ". "; }

   Decorating List Items

   Sometimes we may want to highlight certain list items with different underlining, colors, or fonts.

   li:nth-child(odd) { font-style: italic; color: #555; } li:nth-child(even) { text-decoration: underline; }

   Adding Icons or Images

   We can replace traditional numbers with images or icons to better integrate lists into our design system.

   li::before { content: url('/path-to-icon.png'); }

   Practical Examples of Stylized Ordered Lists

   To offer a richer experience to our readers, here are some practical examples of ordered lists with custom styles:

   List with Stylized Numbers

   ol.custom-numbers { counter-reset: section; list-style-type: none; } ol.custom-numbers > li::before { counter-increment: section; content: counters(section, ".") " "; font-weight: bold; color: rebeccapurple; }

   List with Alternative Bookmarks

   ol.alternate-markers { list-style-type: none; padding-left: 0; } ol.alternate-markers > li::before { content: counter(item) "→"; padding-right: 5px; color: tomato; }

   List with Color Backgrounds

   ol.colored-background > li { background: linear-gradient(90deg, rgba(135,222,202,1) 0%, rgba(155,208,233,1) 100%); padding: 5px; margin-bottom: 2px; colour: white; border-radius: 5px; }

   Conclusion

   Ordered lists are a powerful tool for structuring content on the web. With the customization capabilities that CSS offers us, these lists can be transformed into attractive and functional visual elements that enrich our designs.

   We would love to know your opinions, ideas or questions about how you use ordered lists and their customization in your projects. Don't forget to visit our website for more guides and tips on web development. And if you have any specific requests or questions, don't hesitate to contact us. Your feedback is invaluable and you help improve the NelkoDev community with every interaction!