Styling HTML Ordered Lists with CSS

Nicely styled OL on KeepAndCastle.Com
Nicely styled OL on KeepAndCastle.Com

As with the previous post, it’s the simple, small things that build your site’s “feel.” As with the HR in the previous post, ordered lists often end up being quite boring despite the range of numbering options. However, again, CSS3 offers us the ability to style these lists in a wide range of ways giving us full control over the lists’ feel.

Here I found Red Team Design‘s article “CSS3 Ordered List Styles” excellent and helpful. While I didn’t use any of the animations they built (they seemed a bit over the top to me, except for the small movement on the rectangle-shaped elements) I did find these examples a great starting point for creating my own styles.

The only issue I ran into that I have yet been able to solve is restarting the numbering on a multi-page list since their examples used CSS3’s counter-reset and counter-increment properties which I don’t fully understand yet.

Leave a Reply